logoChat01.ai

“创建一个 HTML，内容是 SVG 绘制一个鹈鹕骑自行车的 2D 动画

बनाया गया: 7 सितंबर 2026

का उपयोग करके उत्तर दिया गया GPT-5.6 Thinking द्वारा Chat01

प्रश्न

“创建一个 HTML，内容是 SVG 绘制一个鹈鹕骑自行车的 2D 动画

विचार

我会直接做成一个可打开运行的单文件 HTML：用内联 SVG 绘制鹈鹕和自行车，并加上车轮旋转、身体起伏、脚踏运动与背景滚动动画。

Worked for a few seconds

Python

python
from pathlib import Path

html = r'''<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>鹈鹕骑自行车 - SVG 2D 动画</title>
<style>
  html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(#9edcff 0 68%, #dff5ff 68% 100%);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  }

  .stage {
    width: 100vw;
    height: 100vh;
    display: block;
  }

  .cloud {
    animation: cloudMove 14s linear infinite;
  }
  .cloud.c2 {
    animation-duration: 20s;
    animation-delay: -8s;
  }
  .cloud.c3 {
    animation-duration: 17s;
    animation-delay: -4s;
  }

  .bike {
    animation: bounce 0.55s ease-in-out infinite alternate;
    transform-origin: 500px 360px;
  }

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

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

  .leg-left, .leg-right {
    transform-box: fill-box;
    transform-origin: top center;
  }
  .leg-left { animation: legA 0.9s ease-in-out infinite; }
  .leg-right { animation: legB 0.9s ease-in-out infinite; }

  .wing {
    transform-box: fill-box;
    transform-origin: left center;
    animation: wingBob 0.7s ease-in-out infinite alternate;
  }

  .head {
    transform-box: fill-box;
    transform-origin: bottom center;
    animation: headBob 0.55s ease-in-out infinite alternate;
  }

  .road-dash {
    animation: roadMove 1.1s linear infinite;
  }

  .hill {
    animation: hillMove 9s linear infinite;
  }

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

  @keyframes bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-7px); }
  }

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

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

  @keyframes wingBob {
    from { transform: rotate(5deg); }
    to { transform: rotate(-9deg); }
  }

  @keyframes headBob {
    from { transform: rotate(2deg); }
    to { transform: rotate(-4deg); }
  }

  @keyframes cloudMove {
    from { transform: translateX(-220px); }
    to { transform: translateX(1220px); }
  }

  @keyframes roadMove {
    from { transform: translateX(0); }
    to { transform: translateX(-120px); }
  }

  @keyframes hillMove {
    from { transform: translateX(0); }
    to { transform: translateX(-900px); }
  }

  @media (prefers-reduced-motion: reduce) {
    * { animation-play-state: paused !important; }
  }
</style>
</head>
<body>
<svg class="stage" viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg" aria-label="鹈鹕骑自行车的二维动画">

  <defs>
    <linearGradient id="roadGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#656b73"/>
      <stop offset="100%" stop-color="#3d4248"/>
    </linearGradient>
    <linearGradient id="bodyGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#fff7d6"/>
      <stop offset="100%" stop-color="#e7d7a6"/>
    </linearGradient>
    <linearGradient id="billGrad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#ffca55"/>
      <stop offset="100%" stop-color="#f2972d"/>
    </linearGradient>
  </defs>

  <!-- Sun -->
  <circle cx="850" cy="105" r="48" fill="#ffd85a" opacity="0.95"/>

  <!-- Clouds -->
  <g class="cloud" transform="translate(40 90)" fill="#fff" opacity="0.9">
    <ellipse cx="0" cy="20" rx="44" ry="22"/>
    <ellipse cx="40" cy="10" rx="35" ry="28"/>
    <ellipse cx="78" cy="23" rx="45" ry="21"/>
  </g>
  <g class="cloud c2" transform="translate(420 135)" fill="#fff" opacity="0.75">
    <ellipse cx="0" cy="20" rx="38" ry="18"/>
    <ellipse cx="35" cy="8" rx="29" ry="24"/>
    <ellipse cx="70" cy="20" rx="40" ry="18"/>
  </g>
  <g class="cloud c3" transform="translate(760 70)" fill="#fff" opacity="0.7">
    <ellipse cx="0" cy="20" rx="33" ry="16"/>
    <ellipse cx="31" cy="10" rx="26" ry="22"/>
    <ellipse cx="63" cy="20" rx="34" ry="16"/>
  </g>

  <!-- Scrolling hills -->
  <g class="hill">
    <path d="M0 385 Q150 285 300 380 T600 370 T900 380 T1200 365 T1500 380 T1800 370 L1800 460 L0 460 Z"
          fill="#8bcf7a"/>
    <path d="M0 415 Q180 340 360 420 T720 410 T1080 415 T1440 410 T1800 420 L1800 470 L0 470 Z"
          fill="#68b964" opacity="0.9"/>
  </g>

  <!-- Road -->
  <rect x="0" y="455" width="1000" height="145" fill="url(#roadGrad)"/>
  <rect x="0" y="455" width="1000" height="8" fill="#d9e2e8"/>
  <g class="road-dash">
    <g fill="#f8f4ca">
      <rect x="0" y="520" width="70" height="9" rx="4.5"/>
      <rect x="120" y="520" width="70" height="9" rx="4.5"/>
      <rect x="240" y="520" width="70" height="9" rx="4.5"/>
      <rect x="360" y="520" width="70" height="9" rx="4.5"/>
      <rect x="480" y="520" width="70" height="9" rx="4.5"/>
      <rect x="600" y="520" width="70" height="9" rx="4.5"/>
      <rect x="720" y="520" width="70" height="9" rx="4.5"/>
      <rect x="840" y="520" width="70" height="9" rx="4.5"/>
      <rect x="960" y="520" width="70" height="9" rx="4.5"/>
      <rect x="1080" y="520" width="70" height="9" rx="4.5"/>
    </g>
  </g>

  <!-- Pelican + Bicycle -->
  <g class="bike">
    <!-- Wheels -->
    <g class="wheel">
      <circle cx="365" cy="438" r="78" fill="none" stroke="#20242b" stroke-width="12"/>
      <circle cx="365" cy="438" r="62" fill="none" stroke="#cbd4dc" stroke-width="2"/>
      <g stroke="#aeb8c1" stroke-width="2">
        <line x1="365" y1="376" x2="365" y2="500"/>
        <line x1="303" y1="438" x2="427" y2="438"/>
        <line x1="321" y1="394" x2="409" y2="482"/>
        <line x1="409" y1="394" x2="321" y2="482"/>
      </g>
      <circle cx="365" cy="438" r="7" fill="#444"/>
    </g>

    <g class="wheel">
      <circle cx="645" cy="438" r="78" fill="none" stroke="#20242b" stroke-width="12"/>
      <circle cx="645" cy="438" r="62" fill="none" stroke="#cbd4dc" stroke-width="2"/>
      <g stroke="#aeb8c1" stroke-width="2">
        <line x1="645" y1="376" x2="645" y2="500"/>
        <line x1="583" y1="438" x2="707" y2="438"/>
        <line x1="601" y1="394" x2="689" y2="482"/>
        <line x1="689" y1="394" x2="601" y2="482"/>
      </g>
      <circle cx="645" cy="438" r="7" fill="#444"/>
    </g>

    <!-- Frame -->
    <g fill="none" stroke-linecap="round" stroke-linejoin="round">
      <path d="M365 438 L455 345 L520 438 Z" stroke="#d84747" stroke-width="11"/>
      <path d="M455 345 L580 345 L520 438" stroke="#d84747" stroke-width="11"/>
      <path d="M580 345 L645 438" stroke="#d84747" stroke-width="11"/>
      <path d="M580 345 L595 310" stroke="#333" stroke-width="7"/>
      <path d="M575 308 L625 308" stroke="#333" stroke-width="7"/>
      <path d="M450 345 L430 315" stroke="#333" stroke-width="7"/>
      <path d="M409 312 L449 312" stroke="#333" stroke-width="9"/>
    </g>

    <!-- Crank -->
    <g class="pedal">
      <circle cx="520" cy="438" r="13" fill="#333"/>
      <line x1="520" y1="438" x2="553" y2="438" stroke="#333" stroke-width="7" stroke-linecap="round"/>
      <circle cx="558" cy="438" r="7" fill="#111"/>
    </g>

    <!-- Pelican body -->
    <ellipse cx="500" cy="285" rx="88" ry="92" fill="url(#bodyGrad)" stroke="#b9aa79" stroke-width="3"/>

    <!-- Tail -->
    <path d="M430 298 Q385 318 393 342 Q424 332 452 314 Z" fill="#f2e6bd"/>

    <!-- Wing -->
    <g class="wing">
      <path d="M455 264 Q392 280 411 340 Q462 332 496 288 Q482 262 455 264 Z"
            fill="#d9c68f" stroke="#b9aa79" stroke-width="3"/>
      <path d="M431 311 Q452 291 478 287" fill="none" stroke="#b2a06f" stroke-width="3"/>
    </g>

    <!-- Legs -->
    <g class="leg-left">
      <path d="M475 344 Q485 382 523 421" fill="none" stroke="#e29138" stroke-width="12" stroke-linecap="round"/>
      <ellipse cx="532" cy="427" rx="18" ry="8" fill="#e29138"/>
    </g>
    <g class="leg-right">
      <path d="M521 344 Q525 386 545 422" fill="none" stroke="#d67f2e" stroke-width="12" stroke-linecap="round"/>
      <ellipse cx="552" cy="428" rx="18" ry="8" fill="#d67f2e"/>
    </g>

    <!-- Neck and head -->
    <g class="head">
      <path d="M515 224 Q533 175 575 155 Q615 137 647 158 Q616 182 596 210 Q573 240 548 262 Z"
            fill="url(#bodyGrad)" stroke="#b9aa79" stroke-width="3"/>
      <ellipse cx="606" cy="150" rx="48" ry="42" fill="#fff4ce" stroke="#b9aa79" stroke-width="3"/>

      <!-- Eye -->
      <circle cx="621" cy="141" r="7" fill="#222"/>
      <circle cx="623" cy="139" r="2.2" fill="#fff"/>

      <!-- Bill -->
      <path d="M637 154 Q727 145 790 161 Q722 179 645 173 Z"
            fill="url(#billGrad)" stroke="#c47c28" stroke-width="3"/>
      <path d="M645 173 Q709 186 765 166 Q727 199 664 194 Q650 188 645 173 Z"
            fill="#f2a33d" stroke="#c47c28" stroke-width="3"/>

      <!-- Smile -->
      <path d="M677 169 Q704 173 727 168" fill="none" stroke="#8d5820" stroke-width="2" stroke-linecap="round"/>
    </g>

    <!-- Wing to handlebar -->
    <path d="M554 278 Q587 285 610 311" fill="none" stroke="#d1bc83" stroke-width="13" stroke-linecap="round"/>
    <path d="M606 309 Q617 304 625 308" fill="none" stroke="#e29138" stroke-width="8" stroke-linecap="round"/>

    <!-- Scarf -->
    <path d="M563 191 Q532 205 520 236 Q548 244 570 226 Z" fill="#4f78d8"/>
    <path d="M535 225 Q505 243 491 275 Q516 272 539 251 Z" fill="#4f78d8"/>
  </g>

  <!-- Caption -->
  <g transform="translate(36 48)">
    <rect x="0" y="0" width="260" height="56" rx="18" fill="#ffffff" opacity="0.82"/>
    <text x="20" y="36" font-size="28" font-weight="700" fill="#30424d">鹈鹕骑行中 🚲</text>
  </g>

</svg>
</body>
</html>
'''

out = Path("/mnt/data/pelican_bicycle_svg_animation.html")
out.write_text(html, encoding="utf-8")
print(f"已创建: {out}")

उत्तर

已创建完成。这个单文件 HTML 使用 SVG 绘制，并包含车轮旋转、踩踏、鹈鹕身体起伏、头部/翅膀动作、云朵和道路滚动等 2D 动画。

下载 HTML 文件

इस प्रश्नोत्तर को साझा करें