2. Linux.do
  3. fable 5.1 鹈鹕骑自行车

fable 5.1 鹈鹕骑自行车

(˶‾᷄ ⁻̫ ‾᷅˵) 2026-09-02 02:38 1

思考程度都是 xhigh， 拉完了 ^-^




二编：我让他自己想想动作和逻辑关系，于是在经过5分钟的雷霆大思考后，总算是好点了……


看了下其他佬友的反馈，感觉过度思考很严重


<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

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

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

  <style>

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

    body { display: flex; align-items: center; justify-content: center; }

    svg { width: min(100vw, 960px); height: auto; display: block; }

  </style>

</head>

<body>

    <svg xmlns="http://www.w3.org/2000/svg"

         viewBox="0 0 800 520">

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



      <defs>

        <!-- 车轮：以原点为圆心，自带旋转动画 -->

        <g id="wheel">

          <circle r="65" fill="none" stroke="#2f2f2f" stroke-width="9"/>

          <circle r="56" fill="none" stroke="#9aa0a6" stroke-width="3"/>

          <g stroke="#9aa0a6" stroke-width="2">

            <line x1="0" y1="-56" x2="0" y2="56"/>

            <line x1="0" y1="-56" x2="0" y2="56" transform="rotate(30)"/>

            <line x1="0" y1="-56" x2="0" y2="56" transform="rotate(60)"/>

            <line x1="0" y1="-56" x2="0" y2="56" transform="rotate(90)"/>

            <line x1="0" y1="-56" x2="0" y2="56" transform="rotate(120)"/>

            <line x1="0" y1="-56" x2="0" y2="56" transform="rotate(150)"/>

          </g>

          <circle r="7" fill="#2f2f2f"/>

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

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

        </g>

        <g id="cloud" fill="#ffffff">

          <ellipse cx="0" cy="0" rx="38" ry="20"/>

          <ellipse cx="-28" cy="8" rx="26" ry="16"/>

          <ellipse cx="30" cy="8" rx="28" ry="17"/>

        </g>

      </defs>



      <!-- 背景 -->

      <rect width="800" height="520" fill="#dbeefb"/>

      <circle cx="690" cy="85" r="42" fill="#ffd45c"/>

      <use href="#cloud" x="130" y="90"/>

      <use href="#cloud" x="420" y="55"/>

      <use href="#cloud" x="590" y="160"/>

      <rect y="440" width="800" height="80" fill="#9ad08e"/>

      <path d="M0 440 H800" stroke="#5e9c58" stroke-width="4"/>

      <ellipse cx="390" cy="442" rx="235" ry="8" fill="#000" opacity="0.12"/>



      <!-- 速度线 -->

      <g stroke="#8fb9d6" stroke-width="4" stroke-linecap="round">

        <line x1="40" y1="300" x2="110" y2="300"/>

        <line x1="20" y1="340" x2="120" y2="340"/>

        <line x1="60" y1="380" x2="120" y2="380"/>

      </g>



      <!-- 远侧腿（在车架后面） -->

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

        <path d="M322 205 L322 300 L333 400"/>

      </g>

      <rect x="320" y="398" width="26" height="9" rx="3" fill="#2f2f2f"/>

      <path d="M316 406 L326 390 L352 394 L348 404 Z" fill="#d98a2b" stroke="#a6661a" stroke-width="2" stroke-linejoin="round"/>



      <!-- 车轮 -->

      <use href="#wheel" transform="translate(200 375)"/>

      <use href="#wheel" transform="translate(580 375)"/>



      <!-- 车架 -->

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

        <path d="M200 375 L360 375 L300 245 Z"/>

        <path d="M300 245 L520 240 L360 375"/>

        <path d="M520 240 L535 275"/>

      </g>

      <path d="M535 275 L580 375" fill="none" stroke="#2f2f2f" stroke-width="7" stroke-linecap="round"/>

      <!-- 座管与车座 -->

      <path d="M300 245 L296 222" stroke="#2f2f2f" stroke-width="6" stroke-linecap="round"/>

      <path d="M262 222 Q296 206 334 220 Q300 234 262 222 Z" fill="#2f2f2f"/>

      <!-- 把立与车把 -->

      <path d="M520 240 L512 212" stroke="#2f2f2f" stroke-width="6" stroke-linecap="round"/>

      <path d="M488 222 Q512 200 545 214" fill="none" stroke="#2f2f2f" stroke-width="7" stroke-linecap="round"/>

      <!-- 传动 -->

      <circle cx="200" cy="375" r="10" fill="none" stroke="#444" stroke-width="4"/>

      <line x1="200" y1="365" x2="360" y2="351" stroke="#444" stroke-width="3"/>

      <line x1="200" y1="385" x2="360" y2="399" stroke="#444" stroke-width="3"/>

      <circle cx="360" cy="375" r="24" fill="none" stroke="#444" stroke-width="5"/>

      <line x1="333" y1="402" x2="387" y2="348" stroke="#2f2f2f" stroke-width="6" stroke-linecap="round"/>

      <circle cx="360" cy="375" r="5" fill="#2f2f2f"/>

      <rect x="375" y="343" width="26" height="9" rx="3" fill="#2f2f2f"/>



      <!-- 鹈鹕 -->

      <!-- 尾羽 -->

      <path d="M236 150 L188 128 L214 164 L176 170 L226 188 Z"

            fill="#e9e9e9" stroke="#8a8f96" stroke-width="3" stroke-linejoin="round"/>

      <!-- 身体 + 脖子（一体轮廓） -->

      <path d="M225 118

               C260 98, 305 100, 343 116

               C378 104, 408 86, 448 61

               L462 89

               C422 114, 392 132, 357 144

               C372 170, 366 200, 345 215

               C320 228, 280 226, 250 210

               C225 195, 213 160, 225 118 Z"

            fill="#fbfbfb" stroke="#8a8f96" stroke-width="3" stroke-linejoin="round"/>

      <!-- 翅膀（搭在车把上） -->

      <path d="M295 128

               C340 120, 400 150, 470 195

               L503 212 L496 226

               C455 210, 400 195, 360 190

               C320 195, 285 190, 270 175

               C258 158, 268 135, 295 128 Z"

            fill="#c9d0d8" stroke="#8a8f96" stroke-width="3" stroke-linejoin="round"/>

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

        <path d="M300 150 C340 150, 380 165, 420 190"/>

        <path d="M290 168 C330 170, 360 180, 395 198"/>

      </g>

      <!-- 头 -->

      <circle cx="455" cy="75" r="27" fill="#fbfbfb" stroke="#8a8f96" stroke-width="3"/>

      <!-- 头顶冠羽 -->

      <path d="M442 50 C432 40, 436 26, 448 24 C440 34, 444 42, 452 48 Z"

            fill="#e9e9e9" stroke="#8a8f96" stroke-width="2.5" stroke-linejoin="round"/>

      <!-- 眼睛 -->

      <circle cx="466" cy="70" r="5" fill="#222"/>

      <circle cx="468" cy="68" r="1.6" fill="#fff"/>

      <!-- 嘴：上喙 -->

      <path d="M476 62 C520 66, 570 80, 612 94 L606 103 C566 95, 520 85, 478 82 Z"

            fill="#f0a030" stroke="#c47a1c" stroke-width="2.5" stroke-linejoin="round"/>

      <!-- 嘴：喉囊 -->

      <path d="M478 84 C490 132, 550 142, 605 103 Z"

            fill="#f7c15c" stroke="#c47a1c" stroke-width="2.5" stroke-linejoin="round"/>



      <!-- 近侧腿（在车架前面） -->

      <path d="M338 200 L372 272 L385 346"

            fill="none" stroke="#f0a030" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>

      <path d="M370 352 L380 336 L406 340 L402 350 Z"

            fill="#f0a030" stroke="#c47a1c" stroke-width="2" stroke-linejoin="round"/>

    </svg>

</body>

</html>
最新回复 (5)
  • purr 09-02 02:39
    1楼

    佬 话说fable的文采咋样

    有什么提升/变化么 相比上个版本



    [image]
    Hacker News 上面的第一条评论

    有套餐的佬试试看?
  • GLNCE 09-02 02:40
    2楼

    不知道有没有壕佬试一下四冲程柴油机


    效果感觉比灰度测试稍微差一点点，但是体感比Opus4.8强一些，我现在更好奇灰测到底是什么情况了。
    最重要的是全程思维链里面没有let me。
    开头是The user wants……
    [image]
    这是我在B站刷到的一个视频，然后把提示词复制过来让他做的，一轮对话全部做完。
    效果非常厉害，考虑到它没有视觉，我非常满意了。
    [image]
    [image]
    [image]
    [i…
  • 花季无言 09-02 02:49
    3楼

    我怎么还是这样？ ```

    There’s an issue with the selected model (claude-fable-5.1). It may not exist or you may not have access to it. Run /model to pick a different model.


  • 花季无言 09-02 02:58
    4楼

    我知道了，模型ID错了。。是claude-fable-5-1

  • 广 09-02 03:05
    5楼

    5.6 SOL MAX


    <!doctype html>
    
<html lang="zh-CN">
    
<head>
    
  <meta charset="utf-8">
    
  <meta name="viewport" content="width=device-width, initial-scale=1">
    
  <title>鹈鹕的海风骑行</title>
    
  <style>
    
    :root {
    
      color-scheme: light;
    
      --ink: #17384d;
    
      --navy: #123247;
    
      --sky: #bfe9ff;
    
      --cream: #fffaf0;
    
      --coral: #ff6b61;
    
      --orange: #f5a242;
    
      --aqua: #42c5c7;
    
      --cadence: 1.05s;
    
      --wheel-time: 1.05s;
    
    }
    

    
    * { box-sizing: border-box; }
    

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

    
    body {
    
      display: grid;
    
      min-height: 100vh;
    
      place-items: center;
    
      overflow: hidden;
    
      background:
    
        radial-gradient(circle at 18% 14%, rgba(255,255,255,.96), transparent 28%),
    
        linear-gradient(150deg, #dff6ff 0%, #9edcf7 52%, #77c6e8 100%);
    
      font-family: Inter, ui-rounded, "SF Pro Rounded", "Segoe UI", "Microsoft YaHei", sans-serif;
    
      color: var(--ink);
    
    }
    

    
    .stage {
    
      position: relative;
    
      width: min(96vw, 1400px);
    
      aspect-ratio: 12 / 7;
    
      overflow: hidden;
    
      border: 1px solid rgba(255,255,255,.72);
    
      border-radius: clamp(18px, 2.3vw, 34px);
    
      background: var(--sky);
    
      box-shadow:
    
        0 36px 80px rgba(24, 84, 114, .25),
    
        inset 0 1px 0 rgba(255,255,255,.85);
    
      isolation: isolate;
    
    }
    

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

    
    .title-card {
    
      position: absolute;
    
      z-index: 10;
    
      top: clamp(14px, 2vw, 28px);
    
      left: clamp(14px, 2vw, 28px);
    
      padding: clamp(11px, 1.4vw, 18px) clamp(14px, 1.8vw, 24px);
    
      border: 1px solid rgba(255,255,255,.78);
    
      border-radius: 18px;
    
      background: rgba(255,255,255,.72);
    
      box-shadow: 0 12px 30px rgba(37, 99, 128, .13);
    
      backdrop-filter: blur(12px);
    
      -webkit-backdrop-filter: blur(12px);
    
      pointer-events: none;
    
    }
    

    
    .title-card span {
    
      display: block;
    
      margin-bottom: 3px;
    
      color: #e75752;
    
      font-size: clamp(10px, .82vw, 13px);
    
      font-weight: 800;
    
      letter-spacing: .18em;
    
    }
    

    
    .title-card h1 {
    
      margin: 0;
    
      font-size: clamp(18px, 2.35vw, 34px);
    
      line-height: 1.1;
    
      letter-spacing: -.04em;
    
    }
    

    
    .title-card p {
    
      margin: 6px 0 0;
    
      color: rgba(23, 56, 77, .72);
    
      font-size: clamp(10px, .9vw, 14px);
    
    }
    

    
    .motion-toggle {
    
      position: absolute;
    
      z-index: 12;
    
      right: clamp(14px, 2vw, 28px);
    
      bottom: clamp(14px, 2vw, 28px);
    
      display: inline-flex;
    
      align-items: center;
    
      gap: 9px;
    
      min-height: 44px;
    
      padding: 0 17px;
    
      border: 1px solid rgba(255,255,255,.85);
    
      border-radius: 999px;
    
      background: rgba(18, 50, 71, .88);
    
      box-shadow: 0 12px 28px rgba(15, 56, 78, .22);
    
      color: white;
    
      font: 700 14px/1 inherit;
    
      cursor: pointer;
    
      backdrop-filter: blur(10px);
    
      transition: transform .18s ease, background .18s ease;
    
    }
    

    
    .motion-toggle:hover { transform: translateY(-2px); background: #173e56; }
    
    .motion-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
    

    
    .motion-toggle .icon {
    
      position: relative;
    
      display: inline-block;
    
      width: 14px;
    
      height: 14px;
    
    }
    

    
    .motion-toggle .icon::before,
    
    .motion-toggle .icon::after {
    
      position: absolute;
    
      top: 1px;
    
      width: 4px;
    
      height: 12px;
    
      border-radius: 2px;
    
      background: currentColor;
    
      content: "";
    
    }
    

    
    .motion-toggle .icon::before { left: 1px; }
    
    .motion-toggle .icon::after { right: 1px; }
    

    
    .paused .motion-toggle .icon::before {
    
      left: 2px;
    
      width: 0;
    
      height: 0;
    
      border-top: 7px solid transparent;
    
      border-bottom: 7px solid transparent;
    
      border-left: 11px solid currentColor;
    
      border-radius: 0;
    
      background: transparent;
    
    }
    

    
    .paused .motion-toggle .icon::after { display: none; }
    
    .paused svg * { animation-play-state: paused !important; }
    

    
    .cloud-belt { animation: cloud-drift 32s linear infinite; }
    
    .cloud-belt.far { animation-duration: 46s; opacity: .62; }
    
    .sun-rays { transform-origin: 970px 122px; animation: sun-turn 26s linear infinite; }
    
    .sea-lines { animation: sea-slide 5s linear infinite; }
    
    .road-marks { animation: road-slide .82s linear infinite; }
    
    .grass-belt { animation: grass-slide 1.4s linear infinite; }
    
    .wind-line { animation: wind 2.1s ease-in-out infinite; }
    
    .wind-line:nth-child(2) { animation-delay: -.7s; }
    
    .wind-line:nth-child(3) { animation-delay: -1.35s; }
    
    .wheel-spin { animation: wheel-spin var(--wheel-time) linear infinite; }
    
    .wheel-spin.rear { transform-origin: 360px 520px; }
    
    .wheel-spin.front { transform-origin: 820px 520px; }
    
    .crank { transform-origin: 570px 520px; animation: wheel-spin var(--cadence) linear infinite; }
    
    .rider { transform-origin: 550px 350px; animation: rider-bob var(--cadence) ease-in-out infinite; }
    
    .wing { transform-box: fill-box; transform-origin: 80% 24%; animation: wing-flap 1.7s ease-in-out infinite; }
    
    .tail-feather { transform-box: fill-box; transform-origin: right center; animation: tail-flick 1.55s ease-in-out infinite; }
    
    .tail-feather.two { animation-delay: -.45s; }
    
    .head { transform-origin: 690px 225px; animation: head-nod 2.1s ease-in-out infinite; }
    
    .scarf-tail.one { transform-origin: 670px 226px; animation: scarf-wave .76s ease-in-out infinite alternate; }
    
    .scarf-tail.two { transform-origin: 674px 231px; animation: scarf-wave .76s -.38s ease-in-out infinite alternate-reverse; }
    
    .upper-front,
    
    .upper-back,
    
    .lower-front,
    
    .lower-back { transform-box: fill-box; transform-origin: top center; }
    
    .upper-front { animation: upper-front var(--cadence) ease-in-out infinite; }
    
    .lower-front { animation: lower-front var(--cadence) ease-in-out infinite; }
    
    .upper-back { animation: upper-back var(--cadence) ease-in-out infinite; }
    
    .lower-back { animation: lower-back var(--cadence) ease-in-out infinite; }
    
    .bike-frame { transform-origin: 590px 510px; animation: frame-hum var(--cadence) ease-in-out infinite; }
    
    .shadow-pulse { transform-origin: 590px 651px; animation: shadow-pulse var(--cadence) ease-in-out infinite; }
    
    .bell { transform-origin: 807px 313px; animation: bell-jiggle 1.05s ease-in-out infinite; }
    

    
    @keyframes cloud-drift { to { transform: translateX(-1200px); } }
    
    @keyframes sea-slide { to { transform: translateX(-160px); } }
    
    @keyframes road-slide { to { transform: translateX(-180px); } }
    
    @keyframes grass-slide { to { transform: translateX(-240px); } }
    
    @keyframes sun-turn { to { transform: rotate(360deg); } }
    
    @keyframes wheel-spin { to { transform: rotate(360deg); } }
    
    @keyframes rider-bob {
    
      0%, 100% { transform: translateY(0) rotate(-.25deg); }
    
      50% { transform: translateY(-5px) rotate(.35deg); }
    
    }
    
    @keyframes frame-hum {
    
      0%, 100% { transform: translateY(0); }
    
      50% { transform: translateY(-1.5px); }
    
    }
    
    @keyframes wing-flap {
    
      0%, 100% { transform: rotate(-2deg); }
    
      50% { transform: rotate(8deg) translateY(2px); }
    
    }
    
    @keyframes tail-flick {
    
      0%, 100% { transform: rotate(-4deg); }
    
      50% { transform: rotate(7deg); }
    
    }
    
    @keyframes head-nod {
    
      0%, 100% { transform: rotate(-1deg); }
    
      50% { transform: rotate(2.4deg); }
    
    }
    
    @keyframes scarf-wave {
    
      from { transform: rotate(-7deg) skewX(-2deg); }
    
      to { transform: rotate(12deg) skewX(8deg); }
    
    }
    
    @keyframes upper-front {
    
      0%, 100% { transform: rotate(-28deg); }
    
      50% { transform: rotate(31deg); }
    
    }
    
    @keyframes lower-front {
    
      0%, 100% { transform: rotate(42deg); }
    
      50% { transform: rotate(-35deg); }
    
    }
    
    @keyframes upper-back {
    
      0%, 100% { transform: rotate(30deg); }
    
      50% { transform: rotate(-27deg); }
    
    }
    
    @keyframes lower-back {
    
      0%, 100% { transform: rotate(-33deg); }
    
      50% { transform: rotate(40deg); }
    
    }
    
    @keyframes wind {
    
      0% { transform: translateX(80px); opacity: 0; }
    
      30% { opacity: .7; }
    
      100% { transform: translateX(-150px); opacity: 0; }
    
    }
    
    @keyframes shadow-pulse {
    
      0%, 100% { transform: scaleX(1); opacity: .2; }
    
      50% { transform: scaleX(.94); opacity: .15; }
    
    }
    
    @keyframes bell-jiggle {
    
      0%, 70%, 100% { transform: rotate(0deg); }
    
      78% { transform: rotate(-10deg); }
    
      86% { transform: rotate(8deg); }
    
      94% { transform: rotate(-4deg); }
    
    }
    

    
    @media (prefers-reduced-motion: reduce) {
    
      svg * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
    
      .motion-toggle { display: none; }
    
    }
    

    
    @media (max-width: 620px) {
    
      body { background: #a5def7; }
    
      .stage { width: 100vw; height: 100vh; aspect-ratio: auto; border: 0; border-radius: 0; }
    
      .title-card p { display: none; }
    
      .motion-toggle { min-height: 40px; padding: 0 14px; font-size: 12px; }
    
    }
    
  </style>
    
</head>
    
<body>
    
  <main class="stage" aria-label="鹈鹕在海边公路骑自行车的二维动画">
    
    <div class="title-card">
    
      <span>COASTLINE LOOP</span>
    
      <h1>鹈鹕的海风骑行</h1>
    
      <p>一场用 SVG 画出来的沿海小冒险</p>
    
    </div>
    

    
    <svg viewBox="0 0 1200 700" role="img" aria-labelledby="svgTitle svgDesc" preserveAspectRatio="xMidYMid slice">
    
      <title id="svgTitle">鹈鹕骑自行车动画</title>
    
      <desc id="svgDesc">一只系着蓝绿色围巾的鹈鹕骑着珊瑚色自行车，在阳光明亮的海滨公路上前进。</desc>
    

    
      <defs>
    
        <linearGradient id="skyGradient" x1="0" y1="0" x2="0" y2="1">
    
          <stop offset="0" stop-color="#9edcf7"/>
    
          <stop offset=".54" stop-color="#d9f3ff"/>
    
          <stop offset="1" stop-color="#fff5d7"/>
    
        </linearGradient>
    
        <linearGradient id="seaGradient" x1="0" y1="0" x2="0" y2="1">
    
          <stop offset="0" stop-color="#54c9d2"/>
    
          <stop offset="1" stop-color="#208ca8"/>
    
        </linearGradient>
    
        <linearGradient id="roadGradient" x1="0" y1="0" x2="0" y2="1">
    
          <stop offset="0" stop-color="#426174"/>
    
          <stop offset="1" stop-color="#263f50"/>
    
        </linearGradient>
    
        <linearGradient id="billGradient" x1="0" y1="0" x2="1" y2="1">
    
          <stop offset="0" stop-color="#ffc862"/>
    
          <stop offset="1" stop-color="#ef8c39"/>
    
        </linearGradient>
    
        <linearGradient id="pouchGradient" x1="0" y1="0" x2="0" y2="1">
    
          <stop offset="0" stop-color="#ffbd54"/>
    
          <stop offset="1" stop-color="#f28b43"/>
    
        </linearGradient>
    
        <radialGradient id="bodyGradient" cx="36%" cy="25%" r="80%">
    
          <stop offset="0" stop-color="#ffffff"/>
    
          <stop offset=".72" stop-color="#f5f8f2"/>
    
          <stop offset="1" stop-color="#dce9e5"/>
    
        </radialGradient>
    
        <filter id="softShadow" x="-30%" y="-30%" width="160%" height="180%">
    
          <feDropShadow dx="0" dy="8" stdDeviation="8" flood-color="#17435b" flood-opacity=".2"/>
    
        </filter>
    
        <filter id="smallShadow" x="-50%" y="-50%" width="200%" height="200%">
    
          <feDropShadow dx="0" dy="3" stdDeviation="3" flood-color="#143e54" flood-opacity=".22"/>
    
        </filter>
    
        <clipPath id="sceneClip"><rect width="1200" height="700" rx="30"/></clipPath>
    
      </defs>
    

    
      <g clip-path="url(#sceneClip)">
    
        <rect width="1200" height="700" fill="url(#skyGradient)"/>
    

    
        <g opacity=".72">
    
          <g class="sun-rays">
    
            <g fill="#ffeaa0">
    
              <rect x="964" y="25" width="12" height="30" rx="6"/>
    
              <rect x="964" y="189" width="12" height="30" rx="6"/>
    
              <rect x="881" y="107" width="30" height="12" rx="6"/>
    
              <rect x="1035" y="107" width="30" height="12" rx="6"/>
    
              <rect x="905" y="51" width="12" height="30" rx="6" transform="rotate(-45 911 66)"/>
    
              <rect x="1022" y="168" width="12" height="30" rx="6" transform="rotate(-45 1028 183)"/>
    
              <rect x="905" y="168" width="12" height="30" rx="6" transform="rotate(45 911 183)"/>
    
              <rect x="1022" y="51" width="12" height="30" rx="6" transform="rotate(45 1028 66)"/>
    
            </g>
    
          </g>
    
          <circle cx="970" cy="122" r="61" fill="#ffe171"/>
    
          <circle cx="950" cy="102" r="18" fill="#fff4b5" opacity=".75"/>
    
        </g>
    

    
        <g class="cloud-belt far" fill="#fff">
    
          <g transform="translate(115 118)"><ellipse rx="54" ry="22"/><circle cx="-28" cy="-12" r="23"/><circle cx="8" cy="-19" r="31"/><circle cx="40" cy="-8" r="20"/></g>
    
          <g transform="translate(615 84)"><ellipse rx="45" ry="18"/><circle cx="-20" cy="-11" r="18"/><circle cx="9" cy="-17" r="25"/><circle cx="34" cy="-6" r="15"/></g>
    
          <g transform="translate(1315 118)"><ellipse rx="54" ry="22"/><circle cx="-28" cy="-12" r="23"/><circle cx="8" cy="-19" r="31"/><circle cx="40" cy="-8" r="20"/></g>
    
          <g transform="translate(1815 84)"><ellipse rx="45" ry="18"/><circle cx="-20" cy="-11" r="18"/><circle cx="9" cy="-17" r="25"/><circle cx="34" cy="-6" r="15"/></g>
    
        </g>
    

    
        <g class="cloud-belt" fill="#fff" opacity=".9">
    
          <g transform="translate(330 175)"><ellipse rx="63" ry="24"/><circle cx="-33" cy="-15" r="27"/><circle cx="8" cy="-25" r="35"/><circle cx="48" cy="-8" r="22"/></g>
    
          <g transform="translate(1060 205)"><ellipse rx="51" ry="20"/><circle cx="-25" cy="-13" r="22"/><circle cx="10" cy="-18" r="28"/><circle cx="39" cy="-7" r="17"/></g>
    
          <g transform="translate(1530 175)"><ellipse rx="63" ry="24"/><circle cx="-33" cy="-15" r="27"/><circle cx="8" cy="-25" r="35"/><circle cx="48" cy="-8" r="22"/></g>
    
          <g transform="translate(2260 205)"><ellipse rx="51" ry="20"/><circle cx="-25" cy="-13" r="22"/><circle cx="10" cy="-18" r="28"/><circle cx="39" cy="-7" r="17"/></g>
    
        </g>
    

    
        <path d="M0 360 C128 312 232 348 335 318 C460 281 555 352 676 315 C807 276 922 332 1200 282 L1200 450 L0 450Z" fill="#83c6a1" opacity=".82"/>
    
        <path d="M0 390 C158 338 268 405 430 350 C575 301 735 396 900 339 C1008 302 1110 325 1200 313 L1200 458 L0 458Z" fill="#4ca88a" opacity=".9"/>
    

    
        <path d="M0 386 Q265 374 530 391 T1060 386 T1590 391 V547 H0Z" fill="url(#seaGradient)"/>
    
        <g class="sea-lines" fill="none" stroke="#c9fbf7" stroke-linecap="round" opacity=".65">
    
          <path d="M-170 418 Q-125 401 -80 418 T10 418 T100 418 T190 418 T280 418 T370 418 T460 418 T550 418 T640 418 T730 418 T820 418 T910 418 T1000 418 T1090 418 T1180 418 T1270 418 T1360 418" stroke-width="5"/>
    
          <path d="M-120 463 Q-80 448 -40 463 T40 463 T120 463 T200 463 T280 463 T360 463 T440 463 T520 463 T600 463 T680 463 T760 463 T840 463 T920 463 T1000 463 T1080 463 T1160 463 T1240 463 T1320 463" stroke-width="3"/>
    
          <path d="M-180 496 Q-145 484 -110 496 T-40 496 T30 496 T100 496 T170 496 T240 496 T310 496 T380 496 T450 496 T520 496 T590 496 T660 496 T730 496 T800 496 T870 496 T940 496 T1010 496 T1080 496 T1150 496 T1220 496 T1290 496" stroke-width="4"/>
    
        </g>
    

    
        <path d="M0 507 C180 473 358 491 522 477 C747 458 936 478 1200 447 L1200 557 L0 557Z" fill="#f2d991"/>
    
        <path d="M0 534 C206 510 370 528 556 507 C770 483 967 508 1200 481 L1200 582 L0 582Z" fill="#e5bf67" opacity=".75"/>
    

    
        <rect y="540" width="1200" height="160" fill="url(#roadGradient)"/>
    
        <rect y="540" width="1200" height="9" fill="#f6e6bc"/>
    
        <rect y="654" width="1200" height="5" fill="#7290a0" opacity=".5"/>
    
        <g class="road-marks" fill="#ffe181">
    
          <rect x="-155" y="619" width="100" height="10" rx="5"/>
    
          <rect x="25" y="619" width="100" height="10" rx="5"/>
    
          <rect x="205" y="619" width="100" height="10" rx="5"/>
    
          <rect x="385" y="619" width="100" height="10" rx="5"/>
    
          <rect x="565" y="619" width="100" height="10" rx="5"/>
    
          <rect x="745" y="619" width="100" height="10" rx="5"/>
    
          <rect x="925" y="619" width="100" height="10" rx="5"/>
    
          <rect x="1105" y="619" width="100" height="10" rx="5"/>
    
          <rect x="1285" y="619" width="100" height="10" rx="5"/>
    
        </g>
    

    
        <g opacity=".62" fill="none" stroke="#fff" stroke-linecap="round">
    
          <path class="wind-line" d="M275 285 H382" stroke-width="6"/>
    
          <path class="wind-line" d="M206 322 H330" stroke-width="4"/>
    
          <path class="wind-line" d="M303 360 H395" stroke-width="5"/>
    
        </g>
    

    
        <ellipse class="shadow-pulse" cx="590" cy="659" rx="350" ry="18" fill="#102f41" opacity=".18"/>
    

    
        <g aria-hidden="true">
    
          <g class="wheel-spin rear">
    
            <circle cx="360" cy="520" r="141" fill="#f8fbfa" fill-opacity=".08" stroke="#17384d" stroke-width="18"/>
    
            <circle cx="360" cy="520" r="128" fill="none" stroke="#d8e5e7" stroke-width="5"/>
    
            <g stroke="#a9bdc4" stroke-width="3" opacity=".88">
    
              <line x1="360" y1="520" x2="360" y2="392"/><line x1="360" y1="520" x2="451" y2="429"/>
    
              <line x1="360" y1="520" x2="488" y2="520"/><line x1="360" y1="520" x2="451" y2="611"/>
    
              <line x1="360" y1="520" x2="360" y2="648"/><line x1="360" y1="520" x2="269" y2="611"/>
    
              <line x1="360" y1="520" x2="232" y2="520"/><line x1="360" y1="520" x2="269" y2="429"/>
    
            </g>
    
            <circle cx="360" cy="520" r="16" fill="#f9c54f" stroke="#17384d" stroke-width="6"/>
    
            <rect x="352" y="398" width="16" height="10" rx="5" fill="#ff695f"/>
    
          </g>
    

    
          <g class="wheel-spin front">
    
            <circle cx="820" cy="520" r="141" fill="#f8fbfa" fill-opacity=".08" stroke="#17384d" stroke-width="18"/>
    
            <circle cx="820" cy="520" r="128" fill="none" stroke="#d8e5e7" stroke-width="5"/>
    
            <g stroke="#a9bdc4" stroke-width="3" opacity=".88">
    
              <line x1="820" y1="520" x2="820" y2="392"/><line x1="820" y1="520" x2="911" y2="429"/>
    
              <line x1="820" y1="520" x2="948" y2="520"/><line x1="820" y1="520" x2="911" y2="611"/>
    
              <line x1="820" y1="520" x2="820" y2="648"/><line x1="820" y1="520" x2="729" y2="611"/>
    
              <line x1="820" y1="520" x2="692" y2="520"/><line x1="820" y1="520" x2="729" y2="429"/>
    
            </g>
    
            <circle cx="820" cy="520" r="16" fill="#f9c54f" stroke="#17384d" stroke-width="6"/>
    
            <rect x="812" y="398" width="16" height="10" rx="5" fill="#ff695f"/>
    
          </g>
    

    
          <g class="bike-frame" filter="url(#smallShadow)" stroke-linecap="round" stroke-linejoin="round">
    
            <path d="M360 520 L507 361 L570 520 Z" fill="none" stroke="#ff6b61" stroke-width="17"/>
    
            <path d="M507 361 L735 389 L570 520" fill="none" stroke="#ff6b61" stroke-width="17"/>
    
            <path d="M735 389 L820 520" fill="none" stroke="#41c4c7" stroke-width="17"/>
    
            <path d="M507 361 L476 317" fill="none" stroke="#17384d" stroke-width="11"/>
    
            <path d="M735 389 L764 311 Q775 296 796 304 L819 311" fill="none" stroke="#17384d" stroke-width="10"/>
    
            <path d="M465 318 Q497 306 530 320" fill="none" stroke="#17384d" stroke-width="17"/>
    
            <path d="M350 510 L567 502" fill="none" stroke="#f5c34f" stroke-width="5"/>
    
            <path d="M350 530 L567 538" fill="none" stroke="#f5c34f" stroke-width="5"/>
    
            <circle cx="570" cy="520" r="29" fill="#fff8dc" stroke="#17384d" stroke-width="7"/>
    
            <g class="crank" stroke="#17384d" stroke-width="7">
    
              <line x1="510" y1="520" x2="630" y2="520"/>
    
              <rect x="492" y="513" width="35" height="12" rx="6" fill="#f5c34f" stroke="none"/>
    
              <rect x="613" y="513" width="35" height="12" rx="6" fill="#f5c34f" stroke="none"/>
    
            </g>
    
            <g class="bell">
    
              <circle cx="807" cy="313" r="13" fill="#ffd45f" stroke="#17384d" stroke-width="5"/>
    
              <circle cx="813" cy="310" r="3" fill="#fff6bd" stroke="none"/>
    
            </g>
    
          </g>
    
        </g>
    

    
        <g class="rider" filter="url(#softShadow)">
    
          <g opacity=".82" stroke="#d78336" stroke-width="17" stroke-linecap="round" stroke-linejoin="round">
    
            <g transform="translate(518 339)">
    
              <g class="upper-back">
    
                <path d="M0 0 Q-5 44 3 88" fill="none"/>
    
                <g transform="translate(3 82)">
    
                  <g class="lower-back">
    
                    <path d="M0 0 Q18 45 0 98" fill="none"/>
    
                    <path d="M-6 98 Q14 111 36 101" fill="none" stroke-width="12"/>
    
                  </g>
    
                </g>
    
              </g>
    
            </g>
    
          </g>
    

    
          <g>
    
            <path class="tail-feather" d="M426 291 Q368 269 325 295 Q374 315 432 320Z" fill="#edf5f2" stroke="#c9dcd7" stroke-width="5"/>
    
            <path class="tail-feather two" d="M427 310 Q366 310 330 342 Q390 346 446 329Z" fill="#f7fbf8" stroke="#d6e6e2" stroke-width="5"/>
    

    
            <path d="M428 264 C462 227 534 216 596 245 C641 266 650 324 614 358 C581 390 494 392 447 361 C414 339 404 293 428 264Z" fill="url(#bodyGradient)" stroke="#cbdeda" stroke-width="6"/>
    
            <path class="wing" d="M461 281 C501 247 568 254 602 286 C566 289 535 314 527 354 C486 350 453 326 461 281Z" fill="#dfece8" stroke="#bfd4d0" stroke-width="5"/>
    
            <path d="M480 283 Q522 265 566 286" fill="none" stroke="#f7fbf8" stroke-width="8" stroke-linecap="round" opacity=".8"/>
    
            <path d="M468 320 Q500 340 526 348" fill="none" stroke="#c7dad6" stroke-width="5" stroke-linecap="round" opacity=".8"/>
    
            <ellipse cx="455" cy="316" rx="19" ry="14" fill="#fff" opacity=".7"/>
    

    
            <path d="M591 279 C618 269 635 242 637 211 C640 174 659 148 690 133" fill="none" stroke="#c9dcd7" stroke-width="80" stroke-linecap="round"/>
    
            <path d="M591 275 C621 265 636 240 639 210 C642 176 660 151 691 137" fill="none" stroke="#f7fbf4" stroke-width="68" stroke-linecap="round"/>
    

    
            <g class="head">
    
              <ellipse cx="704" cy="128" rx="65" ry="56" fill="url(#bodyGradient)" stroke="#cbdeda" stroke-width="6"/>
    
              <path d="M683 87 Q709 70 735 87" fill="none" stroke="#fff" stroke-width="9" stroke-linecap="round" opacity=".8"/>
    
              <path d="M700 119 C757 106 848 113 928 143 C850 151 769 153 704 145Z" fill="url(#billGradient)" stroke="#d97831" stroke-width="5" stroke-linejoin="round"/>
    
              <path d="M705 144 C769 152 853 151 928 143 C907 187 839 205 775 177 C742 163 717 152 705 144Z" fill="url(#pouchGradient)" stroke="#d97831" stroke-width="5" stroke-linejoin="round"/>
    
              <path d="M780 163 Q838 180 895 157" fill="none" stroke="#ef9b50" stroke-width="4" stroke-linecap="round" opacity=".7"/>
    
              <circle cx="720" cy="111" r="13" fill="#17384d"/>
    
              <circle cx="724" cy="106" r="4" fill="#fff"/>
    
              <path d="M696 96 Q717 83 738 97" fill="none" stroke="#b9cfcb" stroke-width="6" stroke-linecap="round"/>
    
            </g>
    

    
            <path d="M631 225 Q654 243 681 224" fill="none" stroke="#1caeb4" stroke-width="18" stroke-linecap="round"/>
    
            <path class="scarf-tail one" d="M671 226 Q624 235 578 217 Q601 250 658 258Z" fill="#19afb5" stroke="#158e9a" stroke-width="4"/>
    
            <path class="scarf-tail two" d="M674 232 Q629 259 588 261 Q624 285 675 264Z" fill="#57d5cd" stroke="#158e9a" stroke-width="4"/>
    
          </g>
    

    
          <g stroke="#ed963d" stroke-width="18" stroke-linecap="round" stroke-linejoin="round">
    
            <g transform="translate(548 340)">
    
              <g class="upper-front">
    
                <path d="M0 0 Q6 46 0 91" fill="none"/>
    
                <circle cx="0" cy="88" r="10" fill="#ffd26b" stroke="none"/>
    
                <g transform="translate(0 84)">
    
                  <g class="lower-front">
    
                    <path d="M0 0 Q-16 47 2 100" fill="none"/>
    
                    <path d="M-4 100 Q18 114 42 101" fill="none" stroke-width="13"/>
    
                  </g>
    
                </g>
    
              </g>
    
            </g>
    
          </g>
    

    
          <path d="M481 352 Q520 342 557 353" fill="none" stroke="#17384d" stroke-width="9" stroke-linecap="round" opacity=".92"/>
    
        </g>
    

    
        <g class="grass-belt" fill="#f5d16a" opacity=".8">
    
          <path d="M-30 690 Q-8 654 4 692 Q14 652 31 690Z"/>
    
          <path d="M190 690 Q208 661 221 691 Q232 653 247 690Z"/>
    
          <path d="M430 690 Q447 650 460 691 Q474 662 488 690Z"/>
    
          <path d="M670 690 Q689 656 702 692 Q716 649 731 690Z"/>
    
          <path d="M910 690 Q930 658 943 691 Q957 651 971 690Z"/>
    
          <path d="M1150 690 Q1168 657 1183 691 Q1196 649 1211 690Z"/>
    
          <path d="M1390 690 Q1408 661 1421 691 Q1432 653 1447 690Z"/>
    
        </g>
    
      </g>
    
    </svg>
    

    
    <button class="motion-toggle" type="button" aria-pressed="false" aria-label="暂停动画">
    
      <span class="icon" aria-hidden="true"></span>
    
      <span class="label">暂停动画</span>
    
    </button>
    
  </main>
    

    
  <script>
    
    const stage = document.querySelector('.stage');
    
    const toggle = document.querySelector('.motion-toggle');
    
    const label = toggle.querySelector('.label');
    

    
    toggle.addEventListener('click', () => {
    
      const paused = stage.classList.toggle('paused');
    
      toggle.setAttribute('aria-pressed', String(paused));
    
      toggle.setAttribute('aria-label', paused ? '继续动画' : '暂停动画');
    
      label.textContent = paused ? '继续动画' : '暂停动画';
    
    });
    
  </script>
    
</body>
    
</html>

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