<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>鹈鹕骑单车 · Pelican on a Bicycle</title> <style> html, body { margin: 0; height: 100%; background: radial-gradient(circle at 50% 30%, #16222e, #0b111a 70%); display: grid; place-items: center; font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif; } .stage { width: min(94vw, 960px); aspect-ratio: 8 / 5; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06); } svg { width: 100%; height: 100%; display: block; } / ---- background motion ---- / .clouds { animation: drift 34s linear infinite; } .hills { animation: drift 9s linear infinite; } @keyframes drift { from { transform: translateX(0); } to { transform: translateX(-800px); } } .roadmove { animation: rd 0.2667s linear infinite; } @keyframes rd { from { transform: translateX(0); } to { transform: translateX(-160px); } } .rays { transform-box: fill-box; transform-origin: center; animation: spin 26s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .zip { animation: zip 0.62s linear infinite; opacity: 0; } .zip.d2 { animation-delay: .2s; } .zip.d3 { animation-delay: .4s; } @keyframes zip { 0% { transform: translateX(90px); opacity: 0; } 25% { opacity: .85; } 100% { transform: translateX(-150px); opacity: 0; } } .puff { transform-box: fill-box; transform-origin: center; animation: puff 1s ease-out infinite; opacity: 0; } .puff.p2 { animation-delay: .5s; } @keyframes puff { 0% { transform: translate(0,0) scale(.4); opacity: .55; } 100% { transform: translate(-46px,-26px) scale(1.5); opacity: 0; } } / ---- pelican life ---- / .wing { transform-box: fill-box; transform-origin: 88% 18%; animation: flap 1.15s ease-in-out infinite alternate; } @keyframes flap { from { transform: rotate(-2.5deg); } to { transform: rotate(3.5deg); } } .pouch { transform-box: fill-box; transform-origin: 50% 0%; animation: pouch 1.3s ease-in-out infinite alternate; } @keyframes pouch { from { transform: scaleY(1); } to { transform: scaleY(1.08); } } .blink { transform-box: fill-box; transform-origin: center; animation: blink 3.8s infinite; } @keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5%, 97% { transform: scaleY(.08); } } .caption-hint { position: fixed; bottom: 14px; width: 100%; text-align: center; color: #4d6a80; font-size: 13px; letter-spacing: 2px; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0s !important; } } </style> </head> <body> <div class="stage"> <svg viewBox="0 0 800 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="一只鹈鹕骑着单车"> <defs> <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1"> <stop offset="0" stop-color="#aee0f6"/> <stop offset="1" stop-color="#e8f7fd"/> </linearGradient> <linearGradient id="road" x1="0" y1="0" x2="0" y2="1"> <stop offset="0" stop-color="#787d89"/> <stop offset="1" stop-color="#5d616c"/> </linearGradient> <radialGradient id="sunGlow"> <stop offset="0" stop-color="#ffe89a" stop-opacity=".95"/> <stop offset="1" stop-color="#ffe89a" stop-opacity="0"/> </radialGradient> </defs> <!-- sky --> <rect x="0" y="0" width="800" height="500" fill="url(#sky)"/> <!-- sun --> <circle cx="700" cy="82" r="78" fill="url(#sunGlow)"/> <circle cx="700" cy="82" r="42" fill="#ffd45e"/> <g class="rays" stroke="#ffd45e" stroke-width="5" stroke-linecap="round" opacity=".85"> <line x1="700" y1="14" x2="700" y2="26"/> <line x1="700" y1="138" x2="700" y2="150"/> <line x1="632" y1="82" x2="644" y2="82"/> <line x1="756" y1="82" x2="768" y2="82"/> <line x1="652" y1="34" x2="660" y2="42"/> <line x1="740" y1="122" x2="748" y2="130"/> <line x1="652" y1="130" x2="660" y2="122"/> <line x1="740" y1="42" x2="748" y2="34"/> </g> <!-- clouds (two copies for a seamless loop) --> <g class="clouds" fill="#ffffff" opacity=".92"> <g> <ellipse cx="120" cy="96" rx="46" ry="24"/> <ellipse cx="156" cy="84" rx="34" ry="26"/> <ellipse cx="94" cy="82" rx="26" ry="20"/> <ellipse cx="430" cy="140" rx="52" ry="24"/> <ellipse cx="470" cy="128" rx="32" ry="24"/> <ellipse cx="400" cy="126" rx="26" ry="18"/> <ellipse cx="660" cy="70" rx="40" ry="20"/> <ellipse cx="690" cy="60" rx="26" ry="18"/> </g> <g transform="translate(800,0)"> <ellipse cx="120" cy="96" rx="46" ry="24"/> <ellipse cx="156" cy="84" rx="34" ry="26"/> <ellipse cx="94" cy="82" rx="26" ry="20"/> <ellipse cx="430" cy="140" rx="52" ry="24"/> <ellipse cx="470" cy="128" rx="32" ry="24"/> <ellipse cx="400" cy="126" rx="26" ry="18"/> <ellipse cx="660" cy="70" rx="40" ry="20"/> <ellipse cx="690" cy="60" rx="26" ry="18"/> </g> </g> <!-- distant hills + trees (slower parallax) --> <g class="hills"> <g> <path d="M0,380 Q120,318 240,380 Z" fill="#8fc98a"/> <path d="M200,380 Q340,300 480,380 Z" fill="#7bbf7c"/> <path d="M440,380 Q560,330 680,380 Z" fill="#8fc98a"/> <path d="M640,380 Q740,322 840,380 Z" fill="#7bbf7c"/> <g> <rect x="150" y="352" width="9" height="30" fill="#8a6a4a"/> <circle cx="154" cy="344" r="24" fill="#59a85c"/> <rect x="560" y="356" width="8" height="26" fill="#8a6a4a"/> <circle cx="564" cy="348" r="20" fill="#59a85c"/> <rect x="742" y="350" width="9" height="32" fill="#8a6a4a"/> <circle cx="746" cy="340" r="26" fill="#4f9d55"/> </g> </g> <g transform="translate(800,0)"> <path d="M0,380 Q120,318 240,380 Z" fill="#8fc98a"/> <path d="M200,380 Q340,300 480,380 Z" fill="#7bbf7c"/> <path d="M440,380 Q560,330 680,380 Z" fill="#8fc98a"/&g

  • 情报分类：技术学习与提效
  • 分类依据：用mimo2.6f模型生成鹈鹕骑单车SVG动画，属模型编码能力测试。
  • 信息来源：服务器 / LINUX DO - 最新话题
  • 发布时间：2026/9/22 17:05:44