2. Linux.do
  3. opencode/go dsv4p max+dsh 鹈鹕骑自行车

opencode/go dsv4p max+dsh 鹈鹕骑自行车

Yezau 2026-08-14 10:17 1

用时 7分21秒 · 首 token 2.8秒 · 76 tok/s




生成的html
<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>鹈鹕骑车 · Pelican Cyclist — SVG 2D 动画</title>

<style>

  html, body { margin: 0; height: 100%; }

  body {

    display: flex; align-items: center; justify-content: center;

    background: #0b1220;

  }

  svg {

    width: min(94vw, calc(94vh * 4 / 3));

    height: auto;

    display: block;

    border-radius: 16px;

    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);

  }

</style>

</head>

<body>

<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="鹈鹕骑自行车的 2D 动画">

  <defs>

    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">

      <stop offset="0" stop-color="#a9ddfb"/>

      <stop offset="1" stop-color="#e9f8ff"/>

    </linearGradient>

    <linearGradient id="pouchGrad" x1="0" y1="0" x2="0" y2="1">

      <stop offset="0" stop-color="#fbb257"/>

      <stop offset="1" stop-color="#ee8d2c"/>

    </linearGradient>



    <g id="clouds">

      <g fill="#ffffff" opacity="0.95">

        <ellipse cx="120" cy="100" rx="40" ry="19"/>

        <ellipse cx="158" cy="88" rx="30" ry="15"/>

        <ellipse cx="186" cy="100" rx="26" ry="13"/>

      </g>

      <g fill="#ffffff" opacity="0.9">

        <ellipse cx="500" cy="150" rx="34" ry="16"/>

        <ellipse cx="538" cy="140" rx="26" ry="14"/>

        <ellipse cx="563" cy="151" rx="24" ry="12"/>

      </g>

      <g fill="#ffffff" opacity="0.85">

        <ellipse cx="315" cy="58" rx="26" ry="13"/>

        <ellipse cx="344" cy="52" rx="20" ry="11"/>

        <ellipse cx="360" cy="60" rx="17" ry="9"/>

      </g>

    </g>



    <g id="scenery">

      <path d="M -20 462 C 90 368 170 378 262 462 Z" fill="#c3e2a8"/>

      <path d="M 178 462 C 300 336 430 346 558 462 Z" fill="#addc8e"/>

      <path d="M 462 462 C 590 380 700 390 822 462 Z" fill="#c3e2a8"/>



      <g>

        <rect x="115" y="356" width="10" height="106" fill="#8a5a34"/>

        <circle cx="120" cy="330" r="36" fill="#56a552"/>

        <circle cx="98" cy="344" r="24" fill="#56a552"/>

        <circle cx="144" cy="344" r="24" fill="#56a552"/>

      </g>

      <g>

        <rect x="425" y="344" width="10" height="118" fill="#8a5a34"/>

        <circle cx="430" cy="316" r="38" fill="#4c9c49"/>

        <circle cx="406" cy="332" r="26" fill="#4c9c49"/>

        <circle cx="456" cy="332" r="26" fill="#4c9c49"/>

      </g>

      <g>

        <rect x="685" y="360" width="10" height="102" fill="#8a5a34"/>

        <circle cx="690" cy="338" r="30" fill="#56a552"/>

        <circle cx="670" cy="352" r="22" fill="#56a552"/>

        <circle cx="711" cy="352" r="22" fill="#56a552"/>

      </g>



      <g fill="#6fbe6a">

        <circle cx="36" cy="448" r="14"/>

        <circle cx="54" cy="452" r="11"/>

        <circle cx="20" cy="452" r="10"/>

        <circle cx="250" cy="450" r="13"/>

        <circle cx="266" cy="454" r="10"/>

        <circle cx="520" cy="448" r="15"/>

        <circle cx="540" cy="453" r="12"/>

        <circle cx="502" cy="452" r="10"/>

        <circle cx="762" cy="452" r="13"/>

        <circle cx="778" cy="456" r="9"/>

      </g>



      <g>

        <circle cx="92" cy="458" r="3.4" fill="#ffffff"/>

        <circle cx="92" cy="458" r="1.6" fill="#ffd75e"/>

        <circle cx="332" cy="459" r="3.4" fill="#ffffff"/>

        <circle cx="332" cy="459" r="1.6" fill="#ffd75e"/>

        <circle cx="602" cy="457" r="3.4" fill="#ffffff"/>

        <circle cx="602" cy="457" r="1.6" fill="#ffd75e"/>

      </g>



      <g stroke="#4f9e4f" stroke-width="2.5" fill="none" stroke-linecap="round">

        <path d="M 140 462 q 4 -16 8 0 M 144 462 q 4 -12 8 0"/>

        <path d="M 470 462 q 4 -16 8 0 M 474 462 q 4 -12 8 0"/>

        <path d="M 660 462 q 4 -16 8 0 M 664 462 q 4 -12 8 0"/>

      </g>

    </g>



    <line id="dashSeg" x1="0" y1="535" x2="800" y2="535" stroke="#e8edf2" stroke-width="5" stroke-dasharray="44 36"/>

  </defs>



  <!-- 天空与太阳 -->

  <rect x="0" y="0" width="800" height="600" fill="url(#sky)"/>

  <g>

    <circle cx="95" cy="92" r="44" fill="#ffd75e"/>

    <g stroke="#ffd75e" stroke-width="6" stroke-linecap="round">

      <line x1="95" y1="38" x2="95" y2="22"/>

      <line x1="95" y1="146" x2="95" y2="160"/>

      <line x1="41" y1="92" x2="25" y2="92"/>

      <line x1="149" y1="92" x2="165" y2="92"/>

      <line x1="133" y1="130" x2="146" y2="143"/>

      <line x1="57" y1="130" x2="44" y2="143"/>

      <line x1="133" y1="54" x2="146" y2="41"/>

      <line x1="57" y1="54" x2="44" y2="41"/>

    </g>

  </g>



  <!-- 缓慢漂移的云（视差） -->

  <g id="cloudsWrap">

    <use href="#clouds"/>

    <use href="#clouds" x="800"/>

  </g>



  <!-- 滚动的远景：丘陵、树木、灌木、花草 -->

  <g id="sceneryWrap">

    <use href="#scenery"/>

    <use href="#scenery" x="800"/>

  </g>



  <!-- 路面 -->

  <rect x="0" y="462" width="800" height="8" fill="#7cc06f"/>

  <rect x="0" y="470" width="800" height="130" fill="#7b8794"/>

  <rect x="0" y="470" width="800" height="5" fill="#b9c2cc"/>



  <!-- 路面虚线 -->

  <g id="roadDashes">

    <use href="#dashSeg"/>

    <use href="#dashSeg" x="800"/>

  </g>



  <!-- 自行车投影 -->

  <ellipse cx="405" cy="479" rx="170" ry="11" fill="#000000" opacity="0.12"/>



  <!-- ===== 自行车 ===== -->

  <g id="bike">

    <!-- 后轮 -->

    <circle cx="250" cy="400" r="70" stroke="#39404a" stroke-width="9" fill="none"/>

    <circle cx="250" cy="400" r="62" stroke="#cfd5dc" stroke-width="3" fill="none"/>

    <g id="spokesRear">

      <g stroke="#a7adb6" stroke-width="2">

        <line x1="250" y1="400" x2="311" y2="400"/>

        <line x1="250" y1="400" x2="281" y2="453"/>

        <line x1="250" y1="400" x2="220" y2="453"/>

        <line x1="250" y1="400" x2="189" y2="400"/>

        <line x1="250" y1="400" x2="220" y2="347"/>

        <line x1="250" y1="400" x2="281" y2="347"/>

      </g>

      <circle cx="314" cy="400" r="3" fill="#ff7a7a"/>

    </g>

    <circle cx="250" cy="400" r="7" fill="#565b63"/>



    <!-- 前轮 -->

    <circle cx="560" cy="400" r="70" stroke="#39404a" stroke-width="9" fill="none"/>

    <circle cx="560" cy="400" r="62" stroke="#cfd5dc" stroke-width="3" fill="none"/>

    <g id="spokesFront">

      <g stroke="#a7adb6" stroke-width="2">

        <line x1="560" y1="400" x2="621" y2="400"/>

        <line x1="560" y1="400" x2="591" y2="453"/>

        <line x1="560" y1="400" x2="530" y2="453"/>

        <line x1="560" y1="400" x2="499" y2="400"/>

        <line x1="560" y1="400" x2="530" y2="347"/>

        <line x1="560" y1="400" x2="591" y2="347"/>

      </g>

      <circle cx="624" cy="400" r="3" fill="#ff7a7a"/>

    </g>

    <circle cx="560" cy="400" r="7" fill="#565b63"/>



    <!-- 链条与飞轮 -->

    <line x1="395" y1="380" x2="250" y2="386" stroke="#4a5057" stroke-width="4"/>

    <line x1="395" y1="420" x2="250" y2="414" stroke="#4a5057" stroke-width="4"/>

    <circle cx="250" cy="400" r="13" fill="#666d75"/>



    <!-- 车架 -->

    <g stroke="#e05252" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" fill="none">

      <line x1="250" y1="400" x2="395" y2="400"/>

      <line x1="395" y1="400" x2="352" y2="298"/>

      <line x1="352" y1="298" x2="505" y2="290"/>

      <line x1="395" y1="400" x2="505" y2="290"/>

      <line x1="505" y1="290" x2="560" y2="400"/>

    </g>



    <!-- 车座 -->

    <line x1="352" y1="298" x2="346" y2="291" stroke="#3d434c" stroke-width="6" stroke-linecap="round"/>

    <path d="M 320 292 Q 345 282 370 292 Q 345 301 320 292 Z" fill="#3d434c"/>



    <!-- 车把与车铃 -->

    <line x1="505" y1="290" x2="499" y2="282" stroke="#33384a" stroke-width="9" stroke-linecap="round"/>

    <path d="M 499 284 C 514 272 530 270 541 276" fill="none" stroke="#33384a" stroke-width="7" stroke-linecap="round"/>

    <circle cx="501" cy="278" r="5" fill="#ffd75e" stroke="#d8a92e" stroke-width="1.5"/>



    <!-- 牙盘与曲柄 -->

    <circle cx="395" cy="400" r="20" fill="#52575f"/>

    <circle cx="395" cy="400" r="11" fill="#9aa0a8"/>

    <g id="crankGroup">

      <line x1="395" y1="400" x2="417" y2="400" stroke="#6b7079" stroke-width="6" stroke-linecap="round"/>

      <line x1="395" y1="400" x2="373" y2="400" stroke="#6b7079" stroke-width="6" stroke-linecap="round"/>

    </g>

    <rect id="pedNear" x="406" y="396" width="22" height="8" rx="3" fill="#3d434c" stroke="#2e333a" stroke-width="1.5"/>

    <rect id="pedFar"  x="362" y="396" width="22" height="8" rx="3" fill="#3d434c" stroke="#2e333a" stroke-width="1.5"/>

  </g>



  <!-- ===== 鹈鹕 ===== -->

  <g id="rider">

    <!-- 远侧腿与脚 -->

    <path id="legFar" d="M 330 295 L 330 295 L 373 400" fill="none" stroke="#d98a2a" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>

    <path id="footFar" d="M -11 1 Q -2 -8 11 -1 Q 13 5 1 6 Q -13 6 -11 1 Z" fill="#d98a2a" stroke="#b96f1c" stroke-width="1.5" transform="translate(373 400)"/>



    <!-- 脖子 -->

    <path d="M 384 216 C 412 196 406 156 380 148" fill="none" stroke="#faf6ea" stroke-width="26" stroke-linecap="round"/>



    <!-- 尾羽 -->

    <path d="M 288 240 L 252 266 L 284 279 Z" fill="#faf6ea"/>



    <!-- 身体 -->

    <ellipse cx="342" cy="255" rx="58" ry="46" fill="#faf6ea"/>

    <ellipse cx="330" cy="267" rx="38" ry="26" fill="#efe6c9"/>



    <!-- 翅膀（拍动） -->

    <g id="wingG">

      <path d="M 334 238 C 302 246 284 266 284 290 C 312 287 330 268 344 250 Z" fill="#eee4c8" stroke="#d8cfa8" stroke-width="2"/>

    </g>



    <!-- 头部：喙、喉囊、眼睛、棒球帽 -->

    <g id="headG">

      <circle cx="372" cy="136" r="22" fill="#faf6ea"/>

      <g id="pouchG">

        <path d="M 388 134 C 420 132 466 133 508 136 C 514 148 502 166 480 174 C 452 184 424 184 406 174 C 393 165 384 150 388 134 Z" fill="url(#pouchGrad)" stroke="#e08a24" stroke-width="1.5"/>

      </g>

      <path d="M 388 124 C 452 116 502 124 508 136 C 462 130 414 130 388 134 Z" fill="#f6a623" stroke="#d8871c" stroke-width="1.5"/>

      <circle cx="381" cy="129" r="3.4" fill="#2d2a26"/>

      <circle cx="382.3" cy="127.7" r="1.2" fill="#ffffff"/>

      <path d="M 352 130 C 350 108 374 102 388 116 C 381 126 366 130 352 130 Z" fill="#d94f4f"/>

      <path d="M 352 128 C 336 124 320 126 312 133 C 326 137 340 136 352 132 Z" fill="#b23a3a"/>

    </g>



    <!-- 近侧腿与脚 -->

    <path id="legNear" d="M 350 298 L 350 298 L 417 400" fill="none" stroke="#f2a13c" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>

    <path id="footNear" d="M -11 1 Q -2 -8 11 -1 Q 13 5 1 6 Q -13 6 -11 1 Z" fill="#f2a13c" stroke="#c47a20" stroke-width="1.5" transform="translate(417 400)"/>

  </g>



  <text x="16" y="588" font-size="18" fill="#f8fafc" opacity="0.8" font-family="'Segoe UI', system-ui, sans-serif">鹈鹕骑车 · Pelican Cyclist · SVG 2D 动画</text>

</svg>



<noscript><p style="color:#e2e8f0;font-family:system-ui">需要启用 JavaScript 才能看到动画。</p></noscript>



<script>

(function () {

  'use strict';

  var W = 800, BX = 395, BY = 400, CRANK = 22, RW = 70, OMEGA = 3.6;

  var H1 = { x: 350, y: 298 };   // 近侧腿髋关节

  var H2 = { x: 330, y: 295 };   // 远侧腿髋关节

  var L1 = 62, L2 = 86;          // 大腿 / 小腿长度



  var $ = function (id) { return document.getElementById(id); };

  var spokeR = $('spokesRear'), spokeF = $('spokesFront'), crankG = $('crankGroup');

  var legFar = $('legFar'), legNear = $('legNear'), footFar = $('footFar'), footNear = $('footNear');

  var pedFar = $('pedFar'), pedNear = $('pedNear');

  var rider = $('rider'), wingG = $('wingG'), headG = $('headG'), pouchG = $('pouchG');

  var sceneryWrap = $('sceneryWrap'), cloudsWrap = $('cloudsWrap'), roadDashes = $('roadDashes');



  // 两骨 IK：由髋 H 与脚 F 求膝盖，膝盖向后弯（鸟类姿态）

  function ik(H, F) {

    var dx = F.x - H.x, dy = F.y - H.y;

    var d = Math.hypot(dx, dy);

    var maxd = L1 + L2 - 0.5;

    if (d > maxd) { var s = maxd / d; dx *= s; dy *= s; d = maxd; }

    var a = (L1 * L1 - L2 * L2 + d * d) / (2 * d);

    var h = Math.sqrt(Math.max(0.01, L1 * L1 - a * a));

    var ux = dx / d, uy = dy / d;

    var px = -uy, py = ux;

    if (px > 0) { px = -px; py = -py; }

    return { x: H.x + ux * a + px * h, y: H.y + uy * a + py * h };

  }



  function setLeg(el, H, F) {

    var k = ik(H, F);

    el.setAttribute('d', 'M ' + H.x + ' ' + H.y + ' L ' + k.x.toFixed(1) + ' ' + k.y.toFixed(1) + ' L ' + F.x.toFixed(1) + ' ' + F.y.toFixed(1));

  }



  var start = null;

  function frame(t) {

    if (start === null) start = t;

    var dt = (t - start) / 1000;

    var th = OMEGA * dt;

    var deg = th * 180 / Math.PI;

    var dist = OMEGA * RW * dt;

    var off = dist % W;

    var bobY = 2.6 * Math.sin(2 * th);  // 车身/身体起伏



    // 车轮、曲柄旋转

    spokeR.setAttribute('transform', 'rotate(' + deg + ' 250 400)');

    spokeF.setAttribute('transform', 'rotate(' + deg + ' 560 400)');

    crankG.setAttribute('transform', 'rotate(' + deg + ' ' + BX + ' ' + BY + ')');



    // 踏板位置（左右 180° 相位差）

    var p1 = { x: BX + CRANK * Math.cos(th), y: BY + CRANK * Math.sin(th) };

    var p2 = { x: BX - CRANK * Math.cos(th), y: BY - CRANK * Math.sin(th) };

    var f1 = { x: p1.x, y: p1.y - bobY };

    var f2 = { x: p2.x, y: p2.y - bobY };



    // 腿跟随踏板（IK）

    setLeg(legNear, H1, f1);

    setLeg(legFar, H2, f2);



    // 蹼足：基本保持水平，轻微随踩踏摆动

    var fAng = 12 * Math.sin(th) + 6;

    footNear.setAttribute('transform', 'translate(' + f1.x.toFixed(1) + ' ' + f1.y.toFixed(1) + ') rotate(' + fAng.toFixed(1) + ')');

    footFar.setAttribute('transform', 'translate(' + f2.x.toFixed(1) + ' ' + f2.y.toFixed(1) + ') rotate(' + fAng.toFixed(1) + ')');



    // 水平踏板

    pedNear.setAttribute('x', (p1.x - 11).toFixed(1));

    pedNear.setAttribute('y', (p1.y - 4).toFixed(1));

    pedFar.setAttribute('x', (p2.x - 11).toFixed(1));

    pedFar.setAttribute('y', (p2.y - 4).toFixed(1));



    // 鹈鹕整体起伏、翅膀拍动、头部点头、喉囊摆动

    rider.setAttribute('transform', 'translate(0 ' + bobY.toFixed(2) + ')');

    wingG.setAttribute('transform', 'rotate(' + (9 * Math.sin(1.6 * th + 0.6)).toFixed(1) + ' 330 245)');

    headG.setAttribute('transform', 'rotate(' + (2.5 * Math.sin(2 * th + 1)).toFixed(1) + ' 376 155)');

    pouchG.setAttribute('transform', 'rotate(' + (2.2 * Math.sin(2 * th + 0.3)).toFixed(1) + ' 390 136)');



    // 背景滚动（远景、云、路面虚线）

    sceneryWrap.setAttribute('transform', 'translate(' + (-off).toFixed(1) + ' 0)');

    cloudsWrap.setAttribute('transform', 'translate(' + (-((dist * 0.35) % W)).toFixed(1) + ' 0)');

    roadDashes.setAttribute('transform', 'translate(' + (-off).toFixed(1) + ' 0)');



    requestAnimationFrame(frame);

  }

  requestAnimationFrame(frame);

})();

</script>

</body>

</html>

最新回复 (5)
  • 犀利的毛毛虫 08-14 10:48
    1楼



    同样的dsh + dpskv4flash-0731，为啥我的和你的不一样？ ^-^

  • Yezau 楼主 08-14 10:49
    2楼

    我是pro啊，你不是说你的是flash吗

  • 犀利的毛毛虫 08-14 10:50
    3楼

    我去，还真是！pro效果好点啊 ^-^

  • Yezau 楼主 08-14 10:50
    4楼

    好像也是抽奖的，我也不清楚了，现在还好

  • wjy 08-14 10:51
    5楼

    没啥区别啊，别挣扎了，这模型画鹈鹕就这个水平

* 帖子来源Linux.do
附近帖子
返回
飞读
随机推荐