牛来在 pi 中的效果测试鹈鹕黑洞

Ziphyrien 2026-08-21 20:09 1

模型配置

{

  "providers": {

    "OR": {

      "baseUrl": "https://openrouter.ai/api/v1",

      "apiKey": "sk-or-v1-",

      "models": [

        {

          "id": "stealth/ox-alpha",

          "name": "Ox Alpha",

          "api": "openai-responses",

          "reasoning": true,

          "thinkingLevelMap": {

            "off": "none",

            "xhigh": "xhigh",

            "max": "max"

          },

          "input": [

            "text",

            "image"

          ],

          "contextWindow": 1048576,

          "maxTokens": 131072

        }

      ]

    }

  }

}

来源 OpenRouter stealth/ox-alpha 推理等级 Max

普通问题下，速度显著快于 GPT 5.6 Sol • Max

给我的最大印象是表述能力太差

HTML 效果测试中都触发了雷霆思考

提示词

用 HTML 创建一个鹈鹕骑自行车的 SVG 动画

用 Web 技术创建一个图形化预览黑洞效果的网页，要求外观和样式要类似于电影《星际穿越》里面的黑洞卡冈图雅。黑洞背景要有其他星星，黑洞要有跟电影里类似的吸积盘效果和引力透镜效应。用户可以用鼠标旋转观察，并且在侧边栏可以调整相关参数体现不同参数黑洞的不同效果。你可以使用你认为必要的技术来实现这个网页，既要保证性能也要完成必要的效果。可以引入你觉得必要的第三方图形库比如three.js等等之类。

编写一个 HTML 的超级马里奥高还原度小游戏

源码

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

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

<title>鹈鹕骑自行车 · SVG 动画</title>

<style>

  * { margin:0; padding:0; box-sizing:border-box; }

  body {

    min-height:100vh; display:flex; flex-direction:column;

    align-items:center; justify-content:center; gap:16px; padding:24px;

    background:linear-gradient(160deg,#0e2f3f,#1d5266 55%,#2a7286);

    font-family:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;

  }

  h1 { color:#eaf7fc; font-size:clamp(20px,3.2vw,30px); font-weight:600;

    letter-spacing:.14em; text-shadow:0 2px 12px rgba(0,0,0,.4); }

  .scene { width:min(920px,96vw); border-radius:20px; overflow:hidden;

    box-shadow:0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08); }

  svg { display:block; width:100%; height:auto; }

  .caption { color:#a8d4e2; font-size:13px; letter-spacing:.3em; }



  /* ===== 关键帧 ===== */

  @keyframes spin      { to { transform:rotate(360deg); } }

  @keyframes bob       { from { transform:translateY(0); } to { transform:translateY(3px); } }

  @keyframes drift     { from { transform:translateX(760px); } to { transform:translateX(-360px); } }

  @keyframes scroll    { to { transform:translateX(-800px); } }

  @keyframes dashL     { to { stroke-dashoffset:76; } }

  @keyframes dashL2    { to { stroke-dashoffset:120; } }

  @keyframes chainmove { to { stroke-dashoffset:-24; } }

  @keyframes headbob   { 0%,100% { transform:rotate(0); } 30% { transform:rotate(1.8deg); } 70% { transform:rotate(-1.4deg); } }

  @keyframes wobble    { 0%,100% { transform:rotate(0); } 30% { transform:rotate(2.6deg); } 70% { transform:rotate(-1.8deg); } }

  @keyframes flap      { 0%,100% { transform:rotate(0); } 50% { transform:rotate(2.4deg); } }

  @keyframes blink     { 0%,91%,100% { transform:scaleY(.06); } 94% { transform:scaleY(1); } 97% { transform:scaleY(.06); } }



  /* ===== 应用动画 ===== */

  #rig      { animation:bob .4s ease-in-out infinite alternate; } /* 车身起伏 */

  #wheel-r  { animation:spin 1.1s linear infinite; transform-origin:280px 375px; }

  #wheel-f  { animation:spin 1.1s linear infinite; transform-origin:520px 375px; }

  .rays     { animation:spin 26s linear infinite; transform-origin:690px 84px; }

  .drift    { animation:drift linear infinite; }

  .d1 { animation-duration:44s; animation-delay:-16s; }

  .d2 { animation-duration:60s; animation-delay:-38s; }

  .d3 { animation-duration:34s; animation-delay:-7s; }

  .scroll    { animation:scroll 5s linear infinite; }   /* 草丛无缝滚动 */

  .road-dash { animation:dashL .45s linear infinite; }  /* 公路虚线 */

  .zoom      { stroke-dasharray:64 56; animation:dashL2 .55s linear infinite; }

  .z2 { animation-duration:.72s; animation-delay:-.2s; }

  .z3 { animation-duration:.46s; animation-delay:-.36s; }

  .chain path { stroke-dasharray:7 5; animation:chainmove .45s linear infinite; }

  .headbob      { animation:headbob 1.6s ease-in-out infinite; transform-origin:408px 124px; }

  .pouch-wobble { animation:wobble 1.6s ease-in-out infinite; transform-origin:431px 108px; }

  .wing         { animation:flap 1.6s ease-in-out infinite; transform-origin:352px 180px; }

  #eyelid       { animation:blink 4.6s infinite; transform-origin:426px 93px; }



  @media (prefers-reduced-motion:reduce) {

    * { animation:none !important; }

    #eyelid { transform:scaleY(.06); }

  }

</style>

</head>

<body>

<h1>鹈鹕骑自行车</h1>

<div class="scene">

<svg viewBox="0 0 800 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="一只戴红帽子的鹈鹕在乡间公路上骑自行车">

  <title>鹈鹕骑自行车</title>

  <defs>

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

      <stop offset="0" stop-color="#8ed3f0"/>

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

    </linearGradient>

    <radialGradient id="glow">

      <stop offset="0" stop-color="#ffe98a" stop-opacity=".85"/>

      <stop offset="1" stop-color="#ffe98a" stop-opacity="0"/>

    </radialGradient>

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

      <stop offset="0" stop-color="#5b6472"/>

      <stop offset="1" stop-color="#434b57"/>

    </linearGradient>

    <g id="cloudShape">

      <ellipse cx="0" cy="0" rx="44" ry="20" fill="#ffffff"/>

      <ellipse cx="32" cy="-10" rx="30" ry="16" fill="#ffffff"/>

      <ellipse cx="-34" cy="-6" rx="26" ry="14" fill="#ffffff"/>

      <ellipse cx="2" cy="-16" rx="24" ry="14" fill="#ffffff"/>

    </g>

    <path id="tuft" d="M0 0C-3 -7 -7 -9 -7 -15M0 0C0 -9 1 -12 2 -17M0 0C3 -6 7 -8 9 -12"/>

    <g id="flower">

      <path d="M0 0L0 -8" stroke="#5ea34a" stroke-width="2"/>

      <circle cy="-11" r="4" fill="#ff9db4"/>

      <circle cy="-11" r="1.6" fill="#fff3c4"/>

    </g>

  </defs>



  <!-- 天空 / 太阳 / 云 -->

  <rect width="800" height="500" fill="url(#sky)"/>

  <circle cx="690" cy="84" r="74" fill="url(#glow)"/>

  <g class="rays" stroke="#ffd93b" stroke-width="5" stroke-linecap="round">

    <line x1="734" y1="84" x2="748" y2="84"/>

    <line x1="721.1" y1="115.1" x2="731" y2="125"/>

    <line x1="690" y1="128" x2="690" y2="142"/>

    <line x1="658.9" y1="115.1" x2="649" y2="125"/>

    <line x1="646" y1="84" x2="632" y2="84"/>

    <line x1="658.9" y1="52.9" x2="649" y2="43"/>

    <line x1="690" y1="40" x2="690" y2="26"/>

    <line x1="721.1" y1="52.9" x2="731" y2="43"/>

  </g>

  <circle cx="690" cy="84" r="32" fill="#ffd93b"/>

  <g transform="translate(120,84)"><g class="drift d1"><use href="#cloudShape"/></g></g>

  <g transform="translate(430,52) scale(.72)"><g class="drift d2"><use href="#cloudShape"/></g></g>

  <g transform="translate(620,150) scale(.5)"><g class="drift d3"><use href="#cloudShape"/></g></g>



  <!-- 远山 / 草地 / 公路 -->

  <path d="M-60 437Q150 352 360 437Z" fill="#c4e6a4"/>

  <path d="M240 437Q480 336 720 437Z" fill="#b3dd92"/>

  <rect y="437" width="800" height="32" fill="#8fce6f"/>

  <rect y="437" width="800" height="4" fill="#7cbb5d"/>

  <g class="scroll" stroke="#5ea34a" stroke-width="3" fill="none" stroke-linecap="round">

    <g id="tuftRow">

      <use href="#tuft" x="40" y="456"/>

      <use href="#tuft" x="150" y="457"/>

      <use href="#flower" x="205" y="458"/>

      <use href="#tuft" x="262" y="456"/>

      <use href="#tuft" x="380" y="457"/>

      <use href="#tuft" x="500" y="456"/>

      <use href="#flower" x="555" y="458"/>

      <use href="#tuft" x="612" y="457"/>

      <use href="#flower" x="680" y="458"/>

      <use href="#tuft" x="722" y="456"/>

    </g>

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

  </g>

  <rect y="465" width="800" height="35" fill="url(#roadGrad)"/>

  <rect y="465" width="800" height="3" fill="#39404b"/>

  <line class="road-dash" x1="0" y1="483" x2="800" y2="483" stroke="#f2f6f9" stroke-width="5" stroke-dasharray="42 34"/>



  <!-- 速度线 / 投影 -->

  <g stroke="#ffffff" stroke-width="5" stroke-linecap="round" opacity=".55">

    <line class="zoom z1" x1="70" y1="205" x2="190" y2="205"/>

    <line class="zoom z2" x1="28" y1="258" x2="150" y2="258"/>

    <line class="zoom z3" x1="88" y1="312" x2="214" y2="312"/>

  </g>

  <ellipse cx="400" cy="443" rx="165" ry="7" fill="rgba(20,60,30,.14)"/>



  <g id="rig">

    <!-- 远侧腿 + 远侧曲柄（画在车架后面） -->

    <g id="far-side">

      <line id="crank-far" x1="390" y1="375" x2="390" y2="409" stroke="#3f444b" stroke-width="7" stroke-linecap="round"/>

      <rect id="pedal-far" x="-16" y="-3.5" width="32" height="7" rx="2.5" fill="#2e3238" transform="translate(390 409)"/>

      <path id="leg-far" d="M338 242L370 300L390 409" fill="none" stroke="#dd9048" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/>

      <ellipse id="foot-far" cx="0" cy="-6" rx="13" ry="6.5" fill="#dd9048" transform="translate(390 409)"/>

    </g>



    <!-- 车轮 -->

    <g id="wheel-r">

      <circle cx="280" cy="375" r="60" fill="none" stroke="#2b2d33" stroke-width="9"/>

      <circle cx="280" cy="375" r="52" fill="none" stroke="#d7dade" stroke-width="3"/>

      <g stroke="#b9bec8" stroke-width="2.5">

        <line x1="230" y1="375" x2="330" y2="375"/>

        <line x1="236.7" y1="350" x2="323.3" y2="400"/>

        <line x1="255" y1="331.7" x2="305" y2="418.3"/>

        <line x1="280" y1="325" x2="280" y2="425"/>

        <line x1="305" y1="331.7" x2="255" y2="418.3"/>

        <line x1="323.3" y1="350" x2="236.7" y2="400"/>

      </g>

      <circle cx="280" cy="375" r="7" fill="#8a8f99"/>

    </g>

    <g id="wheel-f">

      <circle cx="520" cy="375" r="60" fill="none" stroke="#2b2d33" stroke-width="9"/>

      <circle cx="520" cy="375" r="52" fill="none" stroke="#d7dade" stroke-width="3"/>

      <g stroke="#b9bec8" stroke-width="2.5">

        <line x1="470" y1="375" x2="570" y2="375"/>

        <line x1="476.7" y1="350" x2="563.3" y2="400"/>

        <line x1="495" y1="331.7" x2="545" y2="418.3"/>

        <line x1="520" y1="325" x2="520" y2="425"/>

        <line x1="545" y1="331.7" x2="495" y2="418.3"/>

        <line x1="563.3" y1="350" x2="476.7" y2="400"/>

      </g>

      <circle cx="520" cy="375" r="7" fill="#8a8f99"/>

    </g>



    <!-- 车架 / 车把 / 车座 -->

    <g stroke="#2a9d8f" stroke-width="8" stroke-linecap="round" fill="none">

      <path d="M280 375L390 375"/>

      <path d="M280 375L350 256"/>

      <path d="M390 375L348 250"/>

      <path d="M390 375L528 270"/>

      <path d="M352 258L520 264"/>

      <path d="M524 256L534 292"/>

      <path d="M532 290L520 375"/>

    </g>

    <path d="M524 256L538 238" stroke="#3a3f45" stroke-width="7" stroke-linecap="round"/>

    <path d="M538 238C552 232 560 242 550 252" stroke="#3a3f45" stroke-width="7" fill="none" stroke-linecap="round"/>

    <path d="M348 250L342 234" stroke="#3a3f45" stroke-width="7" stroke-linecap="round"/>

    <path d="M318 236C328 226 360 226 368 236C356 243 328 243 318 236Z" fill="#4a3728"/>



    <!-- 传动：飞轮 / 链条 / 牙盘 -->

    <circle cx="280" cy="375" r="10" fill="none" stroke="#565b63" stroke-width="4"/>

    <g class="chain" stroke="#565b63" stroke-width="3" fill="none">

      <path d="M280 365L390 352"/>

      <path d="M390 398L280 385"/>

    </g>

    <circle cx="390" cy="375" r="23" fill="none" stroke="#565b63" stroke-width="5"/>

    <g id="chainring-marks" stroke="#565b63" stroke-width="3" stroke-linecap="round">

      <line x1="390" y1="357" x2="390" y2="393"/>

      <line x1="372" y1="375" x2="408" y2="375"/>

    </g>



    <!-- 鹈鹕 -->

    <path d="M270 184L232 162L252 190L226 194L254 206L236 224L272 212Z" fill="#fbf7ee" stroke="#d8cfbc" stroke-width="2.5" stroke-linejoin="round"/>

    <ellipse cx="322" cy="198" rx="60" ry="43" transform="rotate(-10 322 198)" fill="#fbf7ee" stroke="#d8cfbc" stroke-width="2.5"/>

    <path d="M272 214Q322 252 374 206" stroke="#e7dfcd" stroke-width="6" fill="none" stroke-linecap="round"/>

    <path class="wing" d="M350 178C420 158 505 196 546 236C550 242 544 248 536 244C496 216 424 198 354 202C346 196 344 186 350 178Z" fill="#efe8d8" stroke="#d8cfbc" stroke-width="2.5" stroke-linejoin="round"/>

    <path d="M358 176C376 188 400 162 408 124" stroke="#d8cfbc" stroke-width="21" fill="none" stroke-linecap="round"/>

    <path d="M358 176C376 188 400 162 408 124" stroke="#fbf7ee" stroke-width="16" fill="none" stroke-linecap="round"/>

    <g class="headbob">

      <circle cx="420" cy="103" r="18" fill="#fbf7ee" stroke="#d8cfbc" stroke-width="2.5"/>

      <g class="pouch-wobble">

        <path d="M431 108C468 113 512 124 542 131C536 158 486 164 452 146C438 138 431 122 431 108Z" fill="#f6b28b" stroke="#e29566" stroke-width="2.5" stroke-linejoin="round"/>

        <path d="M430 94C470 95 520 110 549 129C520 122 468 109 429 105Z" fill="#f49b42" stroke="#e0842f" stroke-width="2.5" stroke-linejoin="round"/>

      </g>

      <circle cx="426" cy="99" r="4.4" fill="#26221f"/>

      <circle cx="427.4" cy="97.6" r="1.5" fill="#ffffff"/>

      <circle id="eyelid" cx="426" cy="99" r="5.8" fill="#fbf7ee"/>

      <g transform="rotate(-10 420 90)">

        <path d="M403 93A17 17 0 0 1 437 93Z" fill="#e63946"/>

        <rect x="399" y="90" width="40" height="7" rx="3.5" fill="#b02633"/>

        <circle cx="420" cy="77" r="6.5" fill="#ffffff"/>

      </g>

    </g>



    <!-- 近侧腿 + 近侧曲柄（画在最前面） -->

    <g id="near-side">

      <line id="crank-near" x1="390" y1="375" x2="390" y2="341" stroke="#565b63" stroke-width="7" stroke-linecap="round"/>

      <rect id="pedal-near" x="-16" y="-3.5" width="32" height="7" rx="2.5" fill="#3a3f45" transform="translate(390 341)"/>

      <path id="leg-near" d="M346 238L400 300L390 341" fill="none" stroke="#f4a259" stroke-width="15" stroke-linecap="round" stroke-linejoin="round"/>

      <ellipse id="foot-near" cx="0" cy="-6" rx="13" ry="6.5" fill="#f4a259" transform="translate(390 341)"/>

    </g>

  </g>

</svg>

</div>

<p class="caption">SVG + CSS 动画 · 双腿实时两骨 IK 踩踏</p>



<script>

(() => {

  const $ = id => document.getElementById(id);

  const legN = $('leg-near'),   legF = $('leg-far');

  const crN  = $('crank-near'), crF  = $('crank-far');

  const pdN  = $('pedal-near'), pdF  = $('pedal-far');

  const ftN  = $('foot-near'),  ftF  = $('foot-far');

  const marks = $('chainring-marks');



  const C  = { x:390, y:375 };   // 中轴（曲柄中心）

  const R  = 34;                 // 曲柄长度

  const HN = { x:346, y:238 };   // 近侧髋关节

  const HF = { x:338, y:242 };   // 远侧髋关节

  const L1 = 90, L2 = 90;        // 大腿 / 小腿长度

  const PERIOD = 1.6;            // 踩踏一圈用时（秒）



  // 两骨 IK：已知髋与脚踏位置，反解膝盖（膝盖朝前弯）

  function knee(H, P){

    let dx = P.x - H.x, dy = P.y - H.y, d = Math.hypot(dx, dy);

    const max = L1 + L2 - .6;

    if (d > max){ dx *= max/d; dy *= max/d; d = max; P = { x:H.x+dx, y:H.y+dy }; }

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

    const h = Math.sqrt(Math.max(0, L1*L1 - a*a));

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

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

  }



  function pose(leg, crank, pedal, foot, H, th){

    const P = { x: C.x + R*Math.cos(th), y: C.y + R*Math.sin(th) };

    const K = knee(H, P);

    leg.setAttribute('d', `M ${H.x} ${H.y} L ${K.x.toFixed(1)} ${K.y.toFixed(1)} L ${K.P.x.toFixed(1)} ${K.P.y.toFixed(1)}`);

    crank.setAttribute('x2', K.P.x.toFixed(1));

    crank.setAttribute('y2', K.P.y.toFixed(1));

    pedal.setAttribute('transform', `translate(${K.P.x.toFixed(1)} ${K.P.y.toFixed(1)})`);

    foot.setAttribute('transform', `translate(${K.P.x.toFixed(1)} ${K.P.y.toFixed(1)}) rotate(${(10*Math.sin(th)).toFixed(1)})`);

  }



  const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;

  if (reduce){

    pose(legN, crN, pdN, ftN, HN, 2.1);

    pose(legF, crF, pdF, ftF, HF, 2.1 + Math.PI);

    marks.setAttribute('transform', 'rotate(120 390 375)');

    return;

  }

  const frame = now => {

    const th = (now/1000) / PERIOD * Math.PI * 2;

    pose(legN, crN, pdN, ftN, HN, th);

    pose(legF, crF, pdF, ftF, HF, th + Math.PI);

    marks.setAttribute('transform', `rotate(${((th*180/Math.PI)%360).toFixed(1)} 390 375)`);

    requestAnimationFrame(frame);

  };

  requestAnimationFrame(frame);

})();

</script>

</body>

</html>

效果不错

最新回复 (4)

半口小希 08-21 20:14

1楼

鹈鹕代码

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8" />

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

  <title>鹈鹕骑自行车 SVG 动画</title>

  <style>

    html, body {

      margin: 0;

      padding: 0;

      width: 100%;

      height: 100%;

      overflow: hidden;

      background: #87CEEB;

    }

    svg {

      display: block;

      width: 100%;

      height: 100%;

    }

  </style>

</head>

<body>



<svg viewBox="0 0 800 500" preserveAspectRatio="xMidYMid slice">

  <defs>

    <!-- 天空渐变 -->

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

      <stop offset="0%" stop-color="#BDE0FE" />

      <stop offset="100%" stop-color="#87CEEB" />

    </linearGradient>



    <!-- 太阳光晕 -->

    <radialGradient id="sunGlow" cx="0.5" cy="0.5" r="0.5">

      <stop offset="0%" stop-color="#FFF7D1" stop-opacity="1" />

      <stop offset="100%" stop-color="#FFF7D1" stop-opacity="0" />

    </radialGradient>



    <!-- 简单云朵 -->

    <g id="cloud">

      <ellipse cx="0" cy="0" rx="35" ry="18" fill="#FFFFFF" opacity="0.9"/>

      <ellipse cx="25" cy="-6" rx="28" ry="20" fill="#FFFFFF" opacity="0.9"/>

      <ellipse cx="50" cy="0" rx="30" ry="18" fill="#FFFFFF" opacity="0.9"/>

      <ellipse cx="25" cy="8" rx="22" ry="12" fill="#FFFFFF" opacity="0.9"/>

    </g>

  </defs>



  <!-- 背景 -->

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



  <!-- 太阳 -->

  <g transform="translate(700, 80)">

    <circle r="45" fill="url(#sunGlow)" opacity="0.6" />

    <circle r="20" fill="#FFE082" />

  </g>



  <!-- 移动的云朵 -->

  <g>

    <use href="#cloud" transform="translate(0,0)">

      <animateTransform attributeName="transform" type="translate"

        from="900,80" to="-160,80" dur="13s" repeatCount="indefinite"/>

    </use>

    <use href="#cloud" transform="translate(0,0)">

      <animateTransform attributeName="transform" type="translate"

        from="950,160" to="-150,160" dur="18s" repeatCount="indefinite"/>

    </use>

    <use href="#cloud" transform="translate(0,0)">

      <animateTransform attributeName="transform" type="translate"

        from="1050,110" to="-100,110" dur="15s" repeatCount="indefinite"/>

    </use>

  </g>



  <!-- 道路 -->

  <rect x="0" y="380" width="800" height="120" fill="#555" />

  <rect x="0" y="375" width="800" height="8" fill="#333" />

  <!-- 路面虚线，向左移动 -->

  <g>

    <rect x="0" y="435" width="80" height="10" rx="5" fill="#DDD" />

    <rect x="160" y="435" width="80" height="10" rx="5" fill="#DDD" />

    <rect x="320" y="435" width="80" height="10" rx="5" fill="#DDD" />

    <rect x="480" y="435" width="80" height="10" rx="5" fill="#DDD" />

    <rect x="640" y="435" width="80" height="10" rx="5" fill="#DDD" />

    <rect x="800" y="435" width="80" height="10" rx="5" fill="#DDD" />

    <animateTransform attributeName="transform" type="translate"

      from="0,0" to="-160,0" dur="0.63s" repeatCount="indefinite"/>

  </g>



  <!-- 车速线 -->

  <g stroke="#FFF" stroke-width="2" opacity="0.3">

    <line x1="820" y1="400" x2="760" y2="400">

      <animateTransform attributeName="transform" type="translate"

        from="0,0" to="-240,0" dur="0.8s" repeatCount="indefinite"/>

    </line>

    <line x1="840" y1="460" x2="780" y2="460">

      <animateTransform attributeName="transform" type="translate"

        from="0,0" to="-240,0" dur="0.9s" repeatCount="indefinite"/>

    </line>

  </g>



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

  <!-- 后轮 -->

  <g transform="translate(300,380)">

    <circle r="60" fill="none" stroke="#2C3E50" stroke-width="8" />

    <circle r="52" fill="none" stroke="#95A5A6" stroke-width="2" />

    <g>

      <line x1="0" y1="-52" x2="0" y2="52" stroke="#BDC3C7" stroke-width="3" />

      <line x1="-52" y1="0" x2="52" y2="0" stroke="#BDC3C7" stroke-width="3" />

      <line x1="-37" y1="-37" x2="37" y2="37" stroke="#BDC3C7" stroke-width="2" />

      <line x1="-37" y1="37" x2="37" y2="-37" stroke="#BDC3C7" stroke-width="2" />

      <animateTransform attributeName="transform" type="rotate"

        from="0" to="360" dur="1.5s" repeatCount="indefinite"/>

    </g>

  </g>



  <!-- 前轮 -->

  <g transform="translate(500,380)">

    <circle r="60" fill="none" stroke="#2C3E50" stroke-width="8" />

    <circle r="52" fill="none" stroke="#95A5A6" stroke-width="2" />

    <g>

      <line x1="0" y1="-52" x2="0" y2="52" stroke="#BDC3C7" stroke-width="3" />

      <line x1="-52" y1="0" x2="52" y2="0" stroke="#BDC3C7" stroke-width="3" />

      <line x1="-37" y1="-37" x2="37" y2="37" stroke="#BDC3C7" stroke-width="2" />

      <line x1="-37" y1="37" x2="37" y2="-37" stroke="#BDC3C7" stroke-width="2" />

      <animateTransform attributeName="transform" type="rotate"

        from="0" to="360" dur="1.5s" repeatCount="indefinite"/>

    </g>

  </g>



  <!-- 远端那条腿（在车身后面） -->

  <g>

    <path fill="none" stroke="#DC7633" stroke-width="7" stroke-linecap="round" stroke-linejoin="round">

      <animate attributeName="d" dur="1.5s" repeatCount="indefinite" calcMode="linear"

        keyTimes="0;0.125;0.25;0.375;0.5;0.625;0.75;0.875;1"

        values="

          M350,305 Q393.6,330.7 382,380;

          M350,305 Q394.4,320.7 387.3,367.3;

          M350,305 Q397.6,313.7 400,362;

          M350,305 Q402.5,314.9 412.7,367.3;

          M350,305 Q406.2,322.3 418,380;

          M350,305 Q405.8,331.4 412.7,392.7;

          M350,305 Q401.4,337.3 400,398;

          M350,305 Q396.3,337.1 387.3,392.7;

          M350,305 Q393.6,330.7 382,380

        "/>

    </path>

  </g>



  <!-- 车架 -->

  <g stroke="#E74C3C" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" fill="none">

    <line x1="330" y1="295" x2="470" y2="270" />   <!-- 上管 -->

    <line x1="470" y1="270" x2="500" y2="380" />    <!-- 前叉 -->

    <line x1="330" y1="295" x2="400" y2="380" />     <!-- 立管 -->

    <line x1="400" y1="380" x2="500" y2="380" />     <!-- 下管 -->

    <line x1="330" y1="295" x2="300" y2="380" />     <!-- 座撑 -->

    <line x1="300" y1="380" x2="400" y2="380" />     <!-- 链撑 -->

  </g>



  <!-- 车座 -->

  <path d="M315,295 Q330,285 350,295 L345,302 Z" fill="#2C3E50" stroke="none" />



  <!-- 车把 -->

  <g stroke="#2C3E50" stroke-width="6" stroke-linecap="round" fill="none">

    <line x1="470" y1="270" x2="490" y2="250" />

    <path d="M485,250 Q500,240 510,255" />

  </g>



  <!-- 曲柄与脚踏板（旋转） -->

  <g transform="translate(400,380)">

    <circle r="18" fill="none" stroke="#555" stroke-width="4" />

    <g>

      <line x1="0" y1="-18" x2="0" y2="18" stroke="#444" stroke-width="5" stroke-linecap="round" />

      <rect x="-8" y="-22" width="16" height="8" rx="2" fill="#222" />

      <rect x="-8" y="14" width="16" height="8" rx="2" fill="#222" />

      <animateTransform attributeName="transform" type="rotate"

        from="0" to="360" dur="1.5s" repeatCount="indefinite"/>

    </g>

  </g>



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



  <!-- 近端那条腿 -->

  <g>

    <path fill="none" stroke="#FF9F43" stroke-width="10" stroke-linecap="round" stroke-linejoin="round">

      <animate attributeName="d" dur="1.5s" repeatCount="indefinite" calcMode="linear"

        keyTimes="0;0.125;0.25;0.375;0.5;0.625;0.75;0.875;1"

        values="

          M350,305 Q406.2,322.3 418,380;

          M350,305 Q405.8,331.4 412.7,392.7;

          M350,305 Q401.4,337.3 400,398;

          M350,305 Q396.3,337.1 387.3,392.7;

          M350,305 Q393.6,330.7 382,380;

          M350,305 Q394.4,320.7 387.3,367.3;

          M350,305 Q397.6,313.7 400,362;

          M350,305 Q402.5,314.9 412.7,367.3;

          M350,305 Q406.2,322.3 418,380

        "/>

    </path>

  </g>



  <!-- 身体主体 -->

  <g>

    <!-- 尾巴 -->

    <path d="M280,250 L245,230 L250,270 Z" fill="#FFF" stroke="#2C3E50" stroke-width="2" />

    <!-- 躯干 -->

    <ellipse cx="340" cy="255" rx="70" ry="55" fill="#FDFEFE" stroke="#2C3E50" stroke-width="2" />

    <!-- 阴影 -->

    <ellipse cx="340" cy="285" rx="50" ry="15" fill="#E6EEF7" opacity="0.6" />



    <!-- 翅膀（会轻微扇动） -->

    <g>

      <animateTransform attributeName="transform" type="rotate"

        values="-5 330 245; 8 330 245; -5 330 245"

        keyTimes="0;0.5;1" dur="0.8s" repeatCount="indefinite"/>

      <path d="M330,245 Q290,260 270,285 Q310,285 340,265 Z"

            fill="#95A5A6" stroke="#2C3E50" stroke-width="2" />

    </g>



    <!-- 脖子和头（会轻微摆动） -->

    <g>

      <animateTransform attributeName="transform" type="rotate"

        values="-3 365 235; 3 365 235; -3 365 235"

        keyTimes="0;0.5;1" dur="3s" repeatCount="indefinite"/>

      <!-- 脖子 -->

      <path d="M365,235 Q385,260 390,225 T420,210" fill="none" stroke="#FFF" stroke-width="22" stroke-linecap="round" />

      <path d="M365,235 Q385,260 390,225 T420,210" fill="none" stroke="#2C3E50" stroke-width="24" stroke-linecap="round" opacity="0.15" />

      <path d="M365,235 Q385,260 390,225 T420,210" fill="none" stroke="#FDFEFE" stroke-width="20" stroke-linecap="round" />

      <!-- 头 -->

      <circle cx="390" cy="215" r="28" fill="#FDFEFE" stroke="#2C3E50" stroke-width="2" />

      <!-- 喙 -->

      <path d="M410,208 Q470,210 500,235 Q455,260 405,245 Z"

            fill="#FF9F43" stroke="#E67E22" stroke-width="2" />

      <path d="M410,208 L500,235 L405,240 Z"

            fill="#FFB84D" opacity="0.5" />

      <!-- 眼睛 -->

      <circle cx="400" cy="205" r="5" fill="#FFF" stroke="#2C3E50" stroke-width="1" />

      <circle cx="401" cy="205" r="2" fill="#000" />

      <!-- 头顶几根毛 -->

      <path d="M392,190 Q395,175 402,188" fill="none" stroke="#2C3E50" stroke-width="2" />

    </g>

  </g>



</svg>



</body>

</html>

Ziphyrien 楼主 08-21 20:16

2楼

这是在哪个 harness 里面跑的，好抽象啊~

思考等级开到最高了吗
半口小希 08-21 20:17

3楼

就随便问kimi写的，在cherry里面生成的
Ziphyrien 楼主 08-21 21:13

4楼

黑洞测试

* 帖子来源Linux.do

附近帖子

飞读

Ziphyrien

主题数
1

帖子数
1

注册排名
3

随机推荐

牛来在 pi 中的效果测试 鹈鹕 黑洞

Ziphyrien

牛来在 pi 中的效果测试鹈鹕黑洞