可观测宇宙内最抽象的鹈鹕骑自行车

OctoberSama 2026-09-12 17:39 1

没错鹈鹕没了自行车也没了直接无实物表演就几朵云搁那飘

GPT-6-Astra xhigh 在codex cli跑的耗时3m 51s

提示词:

创建一个 HTML，内容是 SVG 绘制一个鹈鹕骑自行车的 2D 动画 不需要测试

HTML:

<!doctype html>

<html lang="zh-CN">

<head>

  <meta charset="utf-8" />

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

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

  <style>

    :root { color-scheme: light; }

    * { box-sizing: border-box; }

    body {

      margin: 0;

      min-height: 100vh;

      display: grid;

      place-items: center;

      overflow: hidden;

      background: #c8f3f4;

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

    }

    .scene {

      width: min(100vw, 1100px);

      aspect-ratio: 5 / 3;

      position: relative;

      border-radius: 24px;

      overflow: hidden;

      box-shadow: 0 24px 60px rgba(21, 79, 96, .22);

      background: #9ee8ec;

    }

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

    .cloud { animation: drift 18s linear infinite; }

    .cloud.slow { animation-duration: 26s; animation-delay: -8s; }

    .road-mark { animation: road 1.4s linear infinite; }

    .road-mark.delay { animation-delay: -.7s; }

    #bike-group { animation: bob .9s ease-in-out infinite; transform-origin: 500px 350px; }

    .wheel { transform-box: fill-box; transform-origin: center; animation: spin 1.6s linear infinite; }

    #pedal { transform-box: fill-box; transform-origin: center; animation: spin 1.1s linear infinite reverse; }

    #leg-a { transform-box: fill-box; transform-origin: 478px 308px; animation: pedalLeg 1.1s ease-in-out infinite; }

    #leg-b { transform-box: fill-box; transform-origin: 478px 308px; animation: pedalLeg 1.1s ease-in-out infinite reverse; }

    #wing { transform-box: fill-box; transform-origin: 463px 238px; animation: flap 1.5s ease-in-out infinite; }

    #scarf-tail { transform-box: fill-box; transform-origin: 442px 205px; animation: flutter .8s ease-in-out infinite alternate; }

    #eye { animation: blink 4.8s ease-in-out infinite; transform-origin: center; }

    .pause-toggle {

      position: absolute; right: 18px; bottom: 16px;

      border: 0; border-radius: 999px; padding: 9px 16px;

      color: #164d56; background: rgba(255,255,255,.82);

      font: 600 14px inherit; cursor: pointer;

      box-shadow: 0 4px 14px rgba(16, 75, 83, .18);

    }

    .paused * { animation-play-state: paused !important; }

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

    @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

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

    @keyframes flutter { from { transform: rotate(-5deg) skewX(0); } to { transform: rotate(7deg) skewX(-5deg); } }

    @keyframes pedalLeg { 0%,100% { transform: rotate(-18deg); } 50% { transform: rotate(22deg); } }

    @keyframes blink { 0%,44%,48%,100% { transform: scaleY(1); } 46% { transform: scaleY(.08); } }

    @keyframes drift { from { transform: translateX(-180px); } to { transform: translateX(980px); } }

    @keyframes road { from { transform: translateX(0); } to { transform: translateX(-170px); } }

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

      *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }

    }

  </style>

</head>

<body>

  <main class="scene" id="scene" aria-label="一只鹈鹕骑着自行车穿过海边道路的二维动画">

    <svg viewBox="0 0 1000 600" role="img" aria-labelledby="title desc">

      <title id="title">鹈鹕骑自行车</title>

      <desc id="desc">一只戴着红围巾的鹈鹕坐在蓝色自行车上，车轮转动，沿着海边道路前进。</desc>

      <defs>

        <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1"><stop stop-color="#8edfe9"/><stop offset="1" stop-color="#d9f8ef"/></linearGradient>

        <linearGradient id="sea" x1="0" y1="0" x2="1" y2="0"><stop stop-color="#56c7d0"/><stop offset="1" stop-color="#9de5d8"/></linearGradient>

        <linearGradient id="road" x1="0" y1="0" x2="0" y2="1"><stop stop-color="#708b91"/><stop offset="1" stop-color="#4f6c73"/></linearGradient>

        <filter id="soft"><feGaussianBlur stdDeviation="10"/></filter>

      </defs>

      <rect width="1000" height="600" fill="url(#sky)"/>

      <circle cx="820" cy="112" r="58" fill="#fff1a8" opacity=".9"/>

      <g class="cloud" fill="#fff" opacity=".72">

        <ellipse cx="150" cy="124" rx="74" ry="22"/><ellipse cx="105" cy="120" rx="34" ry="29/><ellipse cx="186" cy="111" rx="42" ry="34/>

      </g>

      <g class="cloud slow" fill="#fff" opacity=".58">

        <ellipse cx="640" cy="176" rx="72" ry="19"/><ellipse cx="603" cy="171" rx="31" ry="27/><ellipse cx="674" cy="165" rx="38" ry="30/>

      </g>

      <path d="M0 300 Q150 240 300 300 T600 290 T1000 285 V420 H0Z" fill="#74c9a8"/>

      <path d="M0 334 Q190 286 375 335 T760 326 T1000 318 V430 H0Z" fill="#4fa488" opacity=".8"/>

      <path d="M0 375 Q240 335 500 375 T1000 368 V480 H0Z" fill="url(#sea)"/>

      <path d="M0 410 Q180 380 370 410 T730 402 T1000 407" fill="none" stroke="#d4faf0" stroke-width="8" opacity=".7"/>

      <path d="M0 430 H1000 V600 H0Z" fill="url(#road)"/>

      <path d="M0 438 H1000" stroke="#bdd3c9" stroke-width="8" opacity=".8"/>

      <g fill="#f8eaa6" opacity=".9">

        <rect class="road-mark" x="50" y="510" width="105" height="12" rx="6"/>

        <rect class="road-mark delay" x="390" y="510" width="105" height="12" rx="6"/>

        <rect class="road-mark" x="730" y="510" width="105" height="12" rx="6"/>

      </g>

      <g id="bike-group">

        <!-- bicycle -->

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

          <path d="M370 438 L475 438 L552 350 L435 350 Z" fill="#3e91b1"/>

          <path d="M475 438 L435 350"/><path d="M552 350 L595 437"/><path d="M552 350 L574 318"/>

          <path d="M560 318 L600 318"/><path d="M418 350 L397 326"/><path d="M382 326 L420 326"/>

        </g>

        <g class="wheel" stroke="#173f58" stroke-width="7" fill="#bfe8e8">

          <circle cx="370" cy="438" r="74"/><circle cx="595" cy="437" r="74"/>

          <g stroke-width="3" opacity=".75"><path d="M370 364V512 M296 438H444 M318 386L422 490 M318 490L422 386"/><path d="M595 363V511 M521 437H669 M543 385L647 489 M543 489L647 385"/></g>

        </g>

        <g stroke="#173f58" stroke-width="7" fill="none"><circle cx="475" cy="438" r="19"/><g id="pedal"><path d="M475 438 L508 411 M475 438 L443 465"/><path d="M503 406h23 M438 460h-23" stroke-width="5"/></g></g>

        <!-- pelican rider -->

        <g>

          <ellipse cx="468" cy="254" rx="72" ry="60" fill="#f7f3e7" stroke="#2d5960" stroke-width="5"/>

          <path d="M420 255 Q441 285 480 295 Q523 302 538 273 Q514 320 463 316 Q423 306 404 280Z" fill="#d7e6df" opacity=".9"/>

          <g id="wing"><path d="M449 233 Q407 237 397 279 Q421 270 454 263 Q468 256 475 242Z" fill="#e5eee7" stroke="#2d5960" stroke-width="5"/><path d="M419 259 Q439 251 457 246" stroke="#abcac5" stroke-width="4" fill="none"/></g>

          <path d="M425 209 Q430 170 467 157 Q512 143 541 177 Q555 198 540 222 Q524 244 484 239 Q453 235 425 209Z" fill="#fbf7ed" stroke="#2d5960" stroke-width="5"/>

          <path d="M512 185 Q573 176 628 198 Q575 219 515 208Z" fill="#f2a34c" stroke="#2d5960" stroke-width="5"/>

          <path d="M619 198 Q645 200 654 209 Q640 218 619 214Z" fill="#e9873c"/>

          <ellipse id="eye" cx="503" cy="182" rx="7" ry="9" fill="#173f58"/><circle cx="505" cy="179" r="2.5" fill="#fff"/>

          <path d="M457 214 Q481 230 513 217" fill="none" stroke="#d98268" stroke-width="4" stroke-linecap="round"/>

          <path d="M439 205 Q421 224 425 247" fill="none" stroke="#e14f50" stroke-width="12"/>

          <path id="scarf-tail" d="M438 207 Q398 220 382 247 Q411 242 443 231Z" fill="#e14f50" stroke="#b63e4b" stroke-width="3"/>

          <!-- legs and feet -->

          <g fill="none" stroke="#d98245" stroke-width="9" stroke-linecap="round">

            <path id="leg-a" d="M478 296 L470 350 L489 411"/><path id="leg-b" d="M501 297 L515 350 L489 411"/>

          </g>

          <g fill="#e58d43" stroke="#b86738" stroke-width="3"><ellipse cx="489" cy="414" rx="20" ry="8"/><path d="M475 414l-16 8m23-8-11 12m21-12-4 12" fill="none" stroke-width="4"/></g>

          <path d="M447 285 Q472 301 502 292" fill="none" stroke="#2d5960" stroke-width="5"/>

        </g>

      </g>

      <g fill="#fff" opacity=".75" font-size="22" font-weight="600"><text x="42" y="68">海风骑行日</text></g>

    </svg>

    <button class="pause-toggle" type="button" aria-pressed="false">暂停动画</button>

  </main>

  <script>

    const scene = document.getElementById('scene');

    const button = document.querySelector('.pause-toggle');

    button.addEventListener('click', () => {

      const paused = scene.classList.toggle('paused');

      button.textContent = paused ? '继续动画' : '暂停动画';

      button.setAttribute('aria-pressed', String(paused));

    });

    document.addEventListener('visibilitychange', () => {

      if (document.hidden) scene.classList.add('paused');

    });

  </script>

</body>

</html>

最新回复 (5)

OctoberSama 楼主 09-12 17:41

1楼

哦对了补充一下是菲区20x 三人车

刚刚重置完第一次表现正常过几分钟重测就这样了

菲区独享20x挂到同一个服务器的sub2里目前没有降智
OctoberSama 楼主 09-12 17:44

2楼

修复一轮后变成了鹈鹕踩风火轮

导致错误的原因是html标签里少写了引号…

等会申诉看看能不能恢复不行退款了
baitaowulong 09-12 17:47

3楼

这个和我用qwen 3 4b q4做出来的差不多 ^-^
duoduo 09-12 18:00

4楼
Taosu 09-12 18:06

5楼

不如豆包，这下没法说路由到豆包了 ^-^

* 帖子来源Linux.do

附近帖子

↑公司发deepseek的token用不完，怎么办
↑kimi 199的套餐蹬了半天不消耗额度是怎么回事。。
↑【快跑AI】 deepseek-v4.1-flash-特价已上线低至官网 2 折！！注册送10$
↑deepseek-v4.1-flash 的反代
↑限时免费获取 Epic 游戏 Luftrausers
📍 可观测宇宙内最抽象的鹈鹕骑自行车
↓鹈鹕疲劳，猴子推磨太难？我再出一个简单题：大象吹气球
↓哪个风格的妹妹是你的菜多图警告史上最全类型
↓gpt降智规律
↓好痛苦，两个自用plus被风控了
↓zcode使用卡顿如何解决