Original Summary

<!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> { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { overflow: hidden; background: #8fd0ef; font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; } .stage { position: fixed; inset: 0; } .stage svg { width: 100%; height: 100%; display: block; } / ---------- 动画 ---------- / @keyframes scroll { to { transform: translateX(-960px); } } .scroll { animation: scroll linear infinite; } #clouds { animation-duration: 48s; } #hillsFar { animation-duration: 36s; } #hillsNear { animation-duration: 24s; } #trees { animation-duration: 8s; } #ground { animation-duration: 2.26s; } / 与车速 425px/s 同步 / @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes headbob { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(2.5deg); } } @keyframes flap { 0%,84%,100% { transform: rotate(0deg); } 89% { transform: rotate(9deg); } 93% { transform: rotate(-2deg); } } @keyframes blink { 0%,93%,100% { transform: scaleY(1); } 95.5% { transform: scaleY(.08); } 98% { transform: scaleY(1); } } @keyframes chainmove { to { stroke-dashoffset: -12; } } @keyframes speedpulse{ 0% { opacity: 0; transform: translateX(16px); } 30% { opacity: .5; } 100% { opacity: 0; transform: translateX(-30px); } } #upperBody { animation: bob 1.2s ease-in-out infinite; } / 身体随踏板起伏 / #headGroup { transform-origin: 450px 250px; animation: headbob 1.2s ease-in-out .1s infinite; } #pouch { transform-origin: 464px 222px; animation: flap 3.6s ease-in-out infinite; } / 嘴囊张合 / #eye { transform-box: fill-box; transform-origin: center; animation: blink 4.2s infinite; } #chain { animation: chainmove .135s linear infinite; } .speedline { animation: speedpulse .9s linear infinite; } .speedline.d2 { animation-delay: .3s; } .speedline.d3 { animation-delay: .6s; } / ---------- UI ---------- */ .card, .controls { position: absolute; background: rgba(255,255,255,.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(23,58,82,.16); user-select: none; } .card { top: 18px; left: 18px; border-radius: 14px; padding: 10px 18px 12px; } .card h1 { font-size: 17px; font-weight: 700; color: #173a52; letter-spacing: 1px; } .card p { font-size: 11px; color: #4a6b82; margin-top: 3px; letter-spacing: .5px; } .controls { right: 18px; bottom: 18px; display: flex; align-items: center; gap: 12px; border-radius: 999px; padding: 8px 16px 8px 8px; } .controls button { width: 36px; height: 36px; border-radius: 50%; border: none; background: #173a52; color: #fff; font-size: 12px; cursor: pointer; display: grid; place-items: center; transition: transform .15s ease, background .15s ease; } .controls button:hover { transform: scale(1.08); background: #24567a; } .controls label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: #173a52; } .controls input[type="range"] { width: 110px; accent-color: #173a52; cursor: pointer; } .controls .val { font-variant-numeric: tabular-nums; min-width: 34px; color: #4a6b82; } </style> </head> <body> <div class="stage"> <svg viewBox="-40 0 960 540" preserveAspectRatio="xMidYMid slice" role="img" aria-label="一只鹈鹕骑着自行车在路上飞驰"> <defs> <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1"> <stop offset="0" stop-color="#8fd0ef"/> <stop offset="1" stop-color="#eef9ff"/> </linearGradient> <radialGradient id="sunCore"> <stop offset="0" stop-color="#fff6c9"/><stop offset="1" stop-color="#ffd94a"/> </radialGradient> <radialGradient id="sunGlow"> <stop offset="0" stop-color="#ffe98a" stop-opacity=".8"/><stop offset="1" stop-color="#ffe98a" stop-opacity="0"/> </radialGradient> <clipPath id="bodyClip"><ellipse cx="352" cy="300" rx="62" ry="48"/></clipPath> <!-- 车轮（辐条旋转） --> <g id="wheel"> <circle r="46" fill="none" stroke="#2b2d33" stroke-width="9"/> <circle r="39" fill="none" stroke="#d7dde3" stroke-width="3"/> <g stroke="#aab4bf" stroke-width="2.5"> <line x1="-39" y1="0" x2="39" y2="0"/> <line x1="0" y1="-39" x2="0" y2="39"/> <line x1="-27.6" y1="-27.6" x2="27.6" y2="27.6"/> <line x1="-27.6" y1="27.6" x2="27.6" y2="-27.6"/> <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="0.68s" repeatCount="indefinite"/> </g> <circle r="6.5" fill="#3a3f4a"/><circle r="2.5" fill="#8d99ae"/> </g> <!-- 云 --> <g id="cloud" fill="#ffffff" opacity=".95"> <ellipse rx="52" ry="19"/><ellipse cx="40" cy="-12" rx="36" ry="16"/> <ellipse cx="-38" cy="-8" rx="32" ry="14"/><ellipse cx="8" cy="-18" rx="28" ry="13"/> </g> <g id="cloudTile"> <use href="#cloud" transform="translate(150 95)"/> <use href="#cloud" transform="translate(470 62) scale(.75)"/> <use href="#cloud" transform="translate(775 140) scale(1.15)"/> </g> <!-- 远山 / 近山（首尾切线水平，可无缝循环） --> <g id="hillsFarTile"> <path fill="#c2e2cc" d="M0 400 C40 400 60 336 110 336 C160 336 180 400 220 400 L300 400 C340 400 360 312 430 312 C500 312 520 400 560 400 L620 400 C655 400 670 344 720 344 C770 344 785 400 820 400 L880 400 C900 400 905 370 920 370 C935 370 940 400 960 400 L960 484 L0 484 Z"/> </g> <g id="hillsNearTile"> <path fill="#9ccfa8" d="M0 400 C50 400 70 352 130 352 C190 352 210 400 260 400 L380 400 C420 400 440 330 510 330 C580 330 600 400 650 400 L760 400 C790 400 800 356 850 356 C900 356 910 400 960 400 L960 484 L0 484 Z"/> </g> <!-- 树 / 灌木 --> <g id="tree"> <rect x="-6" y="-30" width="12" height="30" rx="3"

  • 情报分类：技术学习与提效
  • 分类依据：内容涉及技术、AI、软件工具或工程实践
  • 信息来源：服务器 / LINUX DO - 最新话题
  • 发布时间：2026/9/16 10:13:05