Original Summary

代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>海滨漫游：骑自行车的鹈鹕 | Pelican on a Bicycle</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet"> <style> :root { --anim-speed: 1; } body { font-family: 'Fredoka', 'Noto Sans SC', sans-serif; user-select: none; overflow-x: hidden; } / 车轮与曲柄旋转动画 / @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } / 脚踏板反向旋转，保持踏板水平 / @keyframes counter-spin { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } / 身体与车架轻微颠簸 / @keyframes body-bob { 0%, 100% { transform: translateY(0px) rotate(0deg); } 25% { transform: translateY(-5px) rotate(-0.8deg); } 50% { transform: translateY(1px) rotate(0.4deg); } 75% { transform: translateY(-4px) rotate(-0.4deg); } } / 头部与大嘴喉囊弹性晃动（带相位差） / @keyframes head-bob { 0%, 100% { transform: rotate(0deg) translateY(0); } 25% { transform: rotate(2.5deg) translateY(-2px); } 50% { transform: rotate(-1.5deg) translateY(2px); } 75% { transform: rotate(2deg) translateY(-1px); } } @keyframes pouch-jiggle { 0%, 100% { transform: scaleY(1) rotate(0deg); } 30% { transform: scaleY(1.05) rotate(1.8deg); } 60% { transform: scaleY(0.96) rotate(-1.2deg); } 85% { transform: scaleY(1.03) rotate(1deg); } } / 喉囊里的小鱼探头 / @keyframes fish-bounce { 0%, 100% { transform: translateY(0) rotate(-12deg); } 35% { transform: translateY(-14px) rotate(8deg); } 65% { transform: translateY(3px) rotate(-18deg); } } / 围巾与尾羽随风飘动 / @keyframes scarf-wave { 0%, 100% { transform: rotate(0deg) skewX(0deg); } 50% { transform: rotate(10deg) skewX(-8deg) scaleY(0.95); } } @keyframes tail-wag { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-7deg); } } / 水手帽轻微跳动 / @keyframes hat-hop { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-6px) rotate(-5deg); } 55% { transform: translateY(0) rotate(2deg); } } / 背景地面滚动 / @keyframes road-scroll { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -240; } } / 云朵缓慢移动 / @keyframes cloud-drift-slow { from { transform: translateX(1050px); } to { transform: translateX(-300px); } } / 海鸥扇动翅膀 / @keyframes gull-flap { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-8px) scaleY(0.6); } } / 地面阴影呼吸缩放 / @keyframes shadow-pulse { 0%, 100% { transform: scaleX(1); opacity: 0.25; } 25%, 75% { transform: scaleX(0.95); opacity: 0.18; } } / 铃铛摇晃 / @keyframes bell-ring { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(18deg); } 40% { transform: rotate(-18deg); } 60% { transform: rotate(14deg); } 80% { transform: rotate(-14deg); } } / 应用动画类 / .anim-wheel { animation: spin calc(1.3s / var(--anim-speed)) linear infinite; transform-box: fill-box; transform-origin: center; } .anim-body { animation: body-bob calc(1.3s / var(--anim-speed)) ease-in-out infinite; } .anim-head { animation: head-bob calc(1.3s / var(--anim-speed)) ease-in-out infinite; transform-origin: 485px 210px; } .anim-pouch { animation: pouch-jiggle calc(1.3s / var(--anim-speed)) ease-in-out infinite; transform-origin: 515px 195px; } .anim-fish { animation: fish-bounce calc(1.3s / var(--anim-speed)) ease-in-out infinite; transform-origin: 575px 225px; } .anim-scarf { animation: scarf-wave calc(0.65s / var(--anim-speed)) ease-in-out infinite; transform-origin: 465px 220px; } .anim-tail { animation: tail-wag calc(0.65s / var(--anim-speed)) ease-in-out infinite; transform-origin: 335px 315px; } .anim-hat { animation: hat-hop calc(1.3s / var(--anim-speed)) ease-in-out infinite; transform-origin: 475px 145px; } .anim-road { animation: road-scroll calc(0.9s / var(--anim-speed)) linear infinite; } .anim-cloud-1 { animation: cloud-drift-slow calc(36s / var(--anim-speed)) linear infinite; } .anim-cloud-2 { animation: cloud-drift-slow calc(50s / var(--anim-speed)) linear infinite; animation-delay: -22s; } .anim-gull { animation: gull-flap 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .anim-shadow { animation: shadow-pulse calc(1.3s / var(--anim-speed)) ease-in-out infinite; transform-origin: 495px 535px; } .ringing { animation: bell-ring 0.35s ease-in-out 2; transform-origin: 572px 262px; } / 昼夜平滑过渡 / .scene-transition { transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); } </style> </head> <body class="bg-slate-900 min-h-screen flex flex-col items-center justify-center p-3 sm:p-6 selection:bg-amber-300 selection:text-slate-900"> <!-- 主容器卡片 --> <div class="w-full max-w-5xl bg-white/95 dark:bg-slate-800/95 backdrop-blur-md rounded-3xl shadow-2xl overflow-hidden border border-slate-200/80 dark:border-slate-700 flex flex-col"> <!-- 顶部标题与状态栏 --> <header class="px-6 py-4 bg-gradient-to-r from-sky-50 to-amber-50 dark:from-slate-800 dark:to-slate-800 border-b border-slate-200/70 dark:border-slate-700 flex flex-wrap items-center justify-between gap-4"> <div class="flex items-center gap-3"> <div class="w-10 h-10 rounded-2xl bg-amber-400 flex items-center justify-center text-slate-900 shadow-sm font-bold text-xl"> 🚲 </div> <div> <h1 class="text-lg sm:text-xl font-bold text-slate-800 dark:text-white tracking-tight flex items-center gap-2"> 皮特船长的海滨骑行 <span class="text-xs font-semibold px-2.5 py-0.5 rounded-full bg-sky-100 text-sky-700 dark:bg-sky-900/50 dark:text-sky-300">SVG 运动学动画</span> </h1> <p class="text-xs text-slate-500 dark:text-slate-400">Pelican Riding a Vintage Bicycle — 纯矢量绘制与实时逆向运动学脚踏联动</p> </div> </div> <!-- 快捷提示 --> <div class="flex items-center gap-2 text-xs font-medium text-slate-600 dark:text-slate-300 bg-white/80 dark:bg-slate-700/70 px-3.5 py-2 rounded-xl b

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