Original Summary

应该不算降智吧，只是没审美 <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='%23ffca3a'/%3E%3Cpath d='M13 35c9-16 24-20 38-7-11 3-20 8-27 18-6-1-9-5-11-11Z' fill='%23fffdf6' stroke='%2317324d' stroke-width='4'/%3E%3C/svg%3E" /> <title>鹈鹕骑行日记 · SVG 2D 动画</title> <style> :root { --ink: #17324d; --paper: #fffdf6; --rose: #e84d6f; --yellow: #ffca3a; --blue: #2c73d2; --mint: #70d6c2; --wheel-time: 1.1s; --road-time: 1.35s; --pedal-time: 1.1s; --bounce-time: 0.55s; } { box-sizing: border-box; } html, body { width: 100%; min-height: 100%; margin: 0; } body { overflow: hidden; color: var(--ink); background: #bceef1; font-family: "Trebuchet MS", "Microsoft YaHei", system-ui, sans-serif; } main { position: relative; width: 100vw; min-height: 100dvh; overflow: hidden; isolation: isolate; } .scene { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-height: 520px; background: #bceef1; } .title-card { position: absolute; z-index: 5; top: clamp(18px, 4vw, 44px); left: clamp(18px, 5vw, 72px); max-width: min(520px, calc(100vw - 36px)); padding: 18px 22px; border: 2px solid rgba(23, 50, 77, 0.12); border-radius: 22px; background: rgba(255, 253, 246, 0.84); box-shadow: 0 18px 50px rgba(34, 88, 112, 0.14); backdrop-filter: blur(12px); } .eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; color: #166b73; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; } .eyebrow::before { width: 28px; height: 3px; border-radius: 999px; background: var(--rose); content: ""; } h1 { margin: 0; font-size: clamp(1.65rem, 4vw, 3.65rem); line-height: 1; letter-spacing: -0.045em; } .title-card p:last-child { max-width: 44ch; margin: 10px 0 0; color: #36566e; font-size: clamp(0.88rem, 1.3vw, 1.05rem); line-height: 1.55; } .controls { position: absolute; z-index: 6; right: clamp(16px, 3vw, 42px); bottom: clamp(16px, 3vw, 38px); display: flex; align-items: center; gap: 10px; padding: 8px; border: 2px solid rgba(23, 50, 77, 0.12); border-radius: 18px; background: rgba(255, 253, 246, 0.9); box-shadow: 0 14px 36px rgba(24, 67, 91, 0.16); backdrop-filter: blur(12px); } .control-button { min-width: 112px; min-height: 46px; padding: 0 18px; border: 0; border-radius: 12px; color: #fff; background: var(--ink); box-shadow: 0 5px 0 #0d2033; cursor: pointer; font: inherit; font-size: 0.92rem; font-weight: 800; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; touch-action: manipulation; } .control-button:hover { background: #225477; transform: translateY(-2px); box-shadow: 0 7px 0 #0d2033; } .control-button:active { transform: translateY(3px); box-shadow: 0 2px 0 #0d2033; } .control-button:focus-visible { outline: 4px solid var(--yellow); outline-offset: 3px; } .speed-group { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: #e9f4f3; } .speed-button { min-width: 44px; min-height: 38px; padding: 0 10px; border: 0; border-radius: 9px; color: #315269; background: transparent; cursor: pointer; font: inherit; font-size: 0.78rem; font-weight: 800; transition: color 180ms ease, background 180ms ease, transform 180ms ease; touch-action: manipulation; } .speed-button:hover { background: rgba(255, 255, 255, 0.72); } .speed-button[aria-pressed="true"] { color: #fff; background: var(--rose); box-shadow: 0 3px 8px rgba(232, 77, 111, 0.28); } .speed-button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; } / Background movement / .cloud-slow { animation: cloud-drift 24s linear infinite; } .cloud-fast { animation: cloud-drift 16s linear infinite reverse; } .birds { animation: bird-drift 18s linear infinite; } .road-stripes { animation: road-flow var(--road-time) linear infinite; } .road-texture { animation: road-flow calc(var(--road-time) 1.6) linear infinite; } / Bicycle movement / .wheel-rear { transform-origin: 390px 521px; animation: wheel-spin var(--wheel-time) linear infinite; } .wheel-front { transform-origin: 797px 521px; animation: wheel-spin var(--wheel-time) linear infinite; } .crank { transform-origin: 570px 521px; animation: wheel-spin var(--pedal-time) linear infinite; } .rider { transform-origin: 560px 395px; animation: rider-bounce var(--bounce-time) ease-in-out infinite alternate; } .head-bob { transform-origin: 605px 270px; animation: head-bob 1.1s ease-in-out infinite alternate; } .wing { transform-origin: 515px 318px; animation: wing-flap 0.9s ease-in-out infinite alternate; } .tail-feather { transform-origin: 445px 323px; animation: tail-sway 0.75s ease-in-out infinite alternate; } .scarf-tail-one { transform-origin: 554px 236px; animation: scarf-wave 0.65s ease-in-out infinite alternate; } .scarf-tail-two { transform-origin: 557px 242px; animation: scarf-wave 0.82s ease-in-out infinite alternate-reverse; } .leg-back { transform-origin: 528px 372px; animation: leg-pump-back var(--pedal-time) ease-in-out infinite; } .leg-front { transform-origin: 561px 370px; animation: leg-pump-front var(--pedal-time) ease-in-out infinite; } .pouch { transform-origin: 678px 253px; animation: pouch-wobble 0.85s ease-in-out infinite alternate; } .blink { transform-origin: center; animation: blink 4.2s ease-in-out infinite; } .basket-fish { transform-origin: 777px 408px; animation: fish-hop 1.45s ease-in-out infinite; } .bell { transform-origin: 733px 359px; animation: bell-ring 1.1s ease-in-out infinite; } .dust-one { animation: dust-pop 1.2s ease-out infinite; } .dust-two { animation: dust-pop 1.2s 0.42s ease-out infinite; } .dust-three { animation: dust-pop 1.2s 0.78s ease-out infinite; } main[data-paused="true"] , main[data-paused="true"] ::before, main[data-paused="true"] *::after { animation-play-state: paused !impo

  • 情报分类：综合情报
  • 分类依据：内容未命中明确的垂直分类规则，归入综合情报
  • 信息来源：服务器 / LINUX DO - 最新话题
  • 发布时间：2026/9/21 08:12:35