logoChat01.ai

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

Created on: September 7, 2026

Answered using GPT-5.6 by Chat01

Question

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

Thought

我会直接生成一个可运行的单文件 HTML：用内嵌 SVG 画鹈鹕和自行车，并用 CSS/SVG 动画让车轮转动、脚踏运动、身体上下起伏。

Worked for a couple of 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>
    :root {
      --sky: #bfe9ff;
      --ground: #85c76f;
      --road: #56606b;
      --line: #263238;
      --bike: #d84a3a;
      --beak: #f0ad4e;
      --body: #f5f4ec;
      --wing: #d9d7cc;
    }

    * { box-sizing: border-box; }

    html, body {
      margin: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: var(--sky);
      font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    }

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

    .clouds {
      animation: cloudsMove 18s linear infinite;
    }

    .rider {
      transform-origin: 480px 320px;
      animation: riderBob .55s ease-in-out infinite alternate;
    }

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

    .pedal {
      transform-origin: 500px 400px;
      animation: spin .85s linear infinite;
    }

    .left-leg {
      transform-origin: 487px 352px;
      animation: legA .85s linear infinite;
    }

    .right-leg {
      transform-origin: 515px 352px;
      animation: legB .85s linear infinite;
    }

    .wing {
      transform-origin: 454px 285px;
      animation: wingFlap .7s ease-in-out infinite alternate;
    }

    .head {
      transform-origin: 485px 220px;
      animation: headNod 1.1s ease-in-out infinite alternate;
    }

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

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

    @keyframes riderBob {
      from { transform: translateY(0); }
      to { transform: translateY(-5px); }
    }

    @keyframes wingFlap {
      from { transform: rotate(4deg); }
      to { transform: rotate(-8deg); }
    }

    @keyframes headNod {
      from { transform: rotate(1deg); }
      to { transform: rotate(-4deg); }
    }

    @keyframes legA {
      from { transform: rotate(10deg); }
      50% { transform: rotate(28deg); }
      to { transform: rotate(10deg); }
    }

    @keyframes legB {
      from { transform: rotate(28deg); }
      50% { transform: rotate(10deg); }
      to { transform: rotate(28deg); }
    }

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

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

    @media (prefers-reduced-motion: reduce) {
      * { animation: none !important; }
    }
  </style>
</head>

<body>
<svg class="scene" viewBox="0 0 960 540" xmlns="http://www.w3.org/2000/svg" aria-label="鹈鹕骑自行车的二维动画">
  <defs>
    <linearGradient id="skyGradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#9fddff"/>
      <stop offset="100%" stop-color="#e8f8ff"/>
    </linearGradient>

    <filter id="softShadow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
      <feOffset dx="0" dy="5" result="off"/>
      <feColorMatrix in="off" type="matrix"
        values="0 0 0 0 0
                0 0 0 0 0
                0 0 0 0 0
                0 0 0 .22 0"/>
      <feBlend in="SourceGraphic"/>
    </filter>
  </defs>

  <!-- 背景 -->
  <rect width="960" height="540" fill="url(#skyGradient)"/>
  <circle cx="820" cy="95" r="42" fill="#ffe47a" opacity=".9"/>

  <!-- 云 -->
  <g class="clouds" fill="#fff" opacity=".78">
    <g transform="translate(120 95)">
      <ellipse cx="0" cy="10" rx="42" ry="20"/>
      <ellipse cx="35" cy="2" rx="30" ry="26"/>
      <ellipse cx="72" cy="12" rx="38" ry="18"/>
    </g>
    <g transform="translate(500 70)">
      <ellipse cx="0" cy="10" rx="50" ry="23"/>
      <ellipse cx="40" cy="0" rx="32" ry="28"/>
      <ellipse cx="82" cy="12" rx="44" ry="20"/>
    </g>
    <g transform="translate(980 100)">
      <ellipse cx="0" cy="10" rx="42" ry="20"/>
      <ellipse cx="35" cy="2" rx="30" ry="26"/>
      <ellipse cx="72" cy="12" rx="38" ry="18"/>
    </g>
    <g transform="translate(1360 75)">
      <ellipse cx="0" cy="10" rx="50" ry="23"/>
      <ellipse cx="40" cy="0" rx="32" ry="28"/>
      <ellipse cx="82" cy="12" rx="44" ry="20"/>
    </g>
  </g>

  <!-- 远景 -->
  <path d="M0 330 C120 300, 220 315, 330 295 S560 300, 700 285 S850 300, 960 280 L960 420 L0 420 Z"
        fill="#9bd58a"/>
  <path d="M0 365 C160 335, 290 355, 430 338 S760 348, 960 330 L960 430 L0 430 Z"
        fill="#78bd68"/>

  <!-- 道路 -->
  <rect x="0" y="405" width="960" height="135" fill="#59636d"/>
  <rect x="0" y="405" width="960" height="10" fill="#d6d6d6"/>
  <g class="road-dashes" fill="#f5e98c">
    <rect x="20" y="470" width="70" height="10" rx="5"/>
    <rect x="140" y="470" width="70" height="10" rx="5"/>
    <rect x="260" y="470" width="70" height="10" rx="5"/>
    <rect x="380" y="470" width="70" height="10" rx="5"/>
    <rect x="500" y="470" width="70" height="10" rx="5"/>
    <rect x="620" y="470" width="70" height="10" rx="5"/>
    <rect x="740" y="470" width="70" height="10" rx="5"/>
    <rect x="860" y="470" width="70" height="10" rx="5"/>
    <rect x="980" y="470" width="70" height="10" rx="5"/>
  </g>

  <!-- 阴影 -->
  <ellipse cx="500" cy="457" rx="165" ry="18" fill="#263238" opacity=".18"/>

  <g class="rider" filter="url(#softShadow)">
    <!-- 自行车 -->
    <g stroke="#263238" stroke-width="7" fill="none" stroke-linecap="round" stroke-linejoin="round">
      <!-- 后轮 -->
      <g class="wheel">
        <circle cx="385" cy="420" r="72" fill="#f7fbff"/>
        <circle cx="385" cy="420" r="65" stroke-width="3"/>
        <line x1="385" y1="355" x2="385" y2="485" stroke-width="2"/>
        <line x1="320" y1="420" x2="450" y2="420" stroke-width="2"/>
        <line x1="339" y1="374" x2="431" y2="466" stroke-width="2"/>
        <line x1="431" y1="374" x2="339" y2="466" stroke-width="2"/>
      </g>

      <!-- 前轮 -->
      <g class="wheel">
        <circle cx="615" cy="420" r="72" fill="#f7fbff"/>
        <circle cx="615" cy="420" r="65" stroke-width="3"/>
        <line x1="615" y1="355" x2="615" y2="485" stroke-width="2"/>
        <line x1="550" y1="420" x2="680" y2="420" stroke-width="2"/>
        <line x1="569" y1="374" x2="661" y2="466" stroke-width="2"/>
        <line x1="661" y1="374" x2="569" y2="466" stroke-width="2"/>
      </g>

      <!-- 车架 -->
      <path d="M385 420 L470 330 L510 420 Z" stroke="#d84a3a" stroke-width="10"/>
      <path d="M470 330 L565 330 L510 420" stroke="#d84a3a" stroke-width="10"/>
      <path d="M565 330 L615 420" stroke="#d84a3a" stroke-width="10"/>
      <path d="M565 330 L590 302" stroke="#263238" stroke-width="7"/>
      <path d="M572 303 L610 303" stroke="#263238" stroke-width="7"/>
      <path d="M470 330 L455 305" stroke="#263238" stroke-width="7"/>
      <path d="M438 305 L472 305" stroke="#263238" stroke-width="9"/>
      <circle cx="510" cy="420" r="11" fill="#263238"/>
    </g>

    <!-- 踏板 -->
    <g class="pedal" stroke="#263238" stroke-width="5" stroke-linecap="round">
      <line x1="500" y1="400" x2="523" y2="420"/>
      <line x1="500" y1="400" x2="477" y2="380"/>
      <line x1="517" y1="425" x2="532" y2="425"/>
      <line x1="468" y1="376" x2="483" y2="376"/>
    </g>

    <!-- 鹈鹕身体 -->
    <g>
      <ellipse cx="465" cy="285" rx="76" ry="66" fill="#f5f4ec" stroke="#263238" stroke-width="5"/>

      <!-- 翅膀 -->
      <path class="wing"
            d="M420 272 C375 286, 365 335, 415 350 C452 360, 478 325, 469 292 C455 275, 440 269, 420 272 Z"
            fill="#d9d7cc" stroke="#263238" stroke-width="5"/>

      <!-- 尾羽 -->
      <path d="M397 290 C370 282, 350 290, 335 307 C360 310, 378 318, 398 332 Z"
            fill="#efeee8" stroke="#263238" stroke-width="5"/>

      <!-- 腿 -->
      <g stroke="#e59c3a" stroke-width="10" stroke-linecap="round">
        <path class="left-leg" d="M445 334 L485 365 L480 392"/>
        <path class="right-leg" d="M482 335 L520 365 L525 392"/>
      </g>

      <!-- 脖子 -->
      <path d="M500 265 C520 248, 523 220, 513 194 C504 173, 510 151, 538 140"
            fill="none" stroke="#f5f4ec" stroke-width="34" stroke-linecap="round"/>
      <path d="M500 265 C520 248, 523 220, 513 194 C504 173, 510 151, 538 140"
            fill="none" stroke="#263238" stroke-width="5" stroke-linecap="round"/>

      <!-- 头 -->
      <g class="head">
        <ellipse cx="548" cy="137" rx="36" ry="31" fill="#f5f4ec" stroke="#263238" stroke-width="5"/>
        <circle cx="558" cy="130" r="5" fill="#263238"/>
        <path d="M575 140 C610 145, 650 160, 693 158 C662 184, 613 188, 570 167 Z"
              fill="#f0ad4e" stroke="#263238" stroke-width="5" stroke-linejoin="round"/>
        <path d="M577 158 C610 166, 651 171, 682 164 C665 184, 620 192, 584 178 Z"
              fill="#ffd088" opacity=".85"/>
      </g>

      <!-- 把手上的翅尖 -->
      <path d="M495 294 C533 286, 558 295, 584 306"
            fill="none" stroke="#d9d7cc" stroke-width="14" stroke-linecap="round"/>
      <path d="M579 303 L600 304"
            fill="none" stroke="#263238" stroke-width="7" stroke-linecap="round"/>
    </g>
  </g>

  <!-- 标题 -->
  <text x="28" y="42" font-size="24" font-weight="700" fill="#28414d">
    鹈鹕骑自行车 · SVG 2D 动画
  </text>
  <text x="30" y="70" font-size="14" fill="#375663">
    纯 HTML + SVG + CSS，无需外部图片或库
  </text>
</svg>
</body>
</html>
'''

path = Path("/mnt/data/pelican_bicycle_svg_animation.html")
path.write_text(html, encoding="utf-8")
print(f"Created: {path}")

Answer

已创建完成，是一个单文件 HTML，内含 SVG 绘制的鹈鹕、自行车、背景，以及车轮旋转、踩踏、身体起伏、翅膀摆动和道路移动动画。

下载 HTML 文件

Share this Q&A