2026/08/03 gpt5.6sol 鹈鹕测试
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#bdeaf3">
<title>海风骑手 · 鹈鹕自行车动画</title>
<style>
:root {
--ink: #173d4b;
--paper: #fffdf5;
--paper-shadow: #dcebed;
--beak: #f5a623;
--pouch: #ffd17a;
--coral: #ef665b;
--coral-dark: #c94d4a;
--sun: #ffd45f;
--road: #58717b;
--road-dark: #405a65;
--cycle: 1.45s;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
min-height: 100%;
}
body {
display: grid;
min-height: 100vh;
min-height: 100svh;
place-items: center;
overflow: hidden;
background:
radial-gradient(circle at 80% 14%, rgba(255, 244, 190, 0.92), transparent 32%),
linear-gradient(180deg, #bdeaf3 0%, #e6f6ef 58%, #506b76 58% 100%);
font-family: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
}
.stage {
position: relative;
width: min(100vw, calc(100vh * 12 / 7));
width: min(100vw, calc(100svh * 12 / 7));
max-width: 1680px;
overflow: hidden;
isolation: isolate;
}
.scene {
display: block;
width: 100%;
height: auto;
max-height: 100vh;
max-height: 100svh;
overflow: visible;
}
.scene .outline {
stroke: var(--ink);
stroke-linecap: round;
stroke-linejoin: round;
}
.cloud-band {
animation: cloud-drift 31s linear infinite;
}
.cloud-band--far {
animation-duration: 43s;
opacity: 0.58;
}
.wave-band {
animation: wave-drift 7s linear infinite;
}
.road-dashes {
animation: road-run 0.72s linear infinite;
}
.road-specks {
animation: speck-run 1.1s linear infinite;
}
.wind-line {
animation: wind 2.3s linear infinite;
}
.wind-line:nth-child(2) {
animation-delay: -0.8s;
}
.wind-line:nth-child(3) {
animation-delay: -1.6s;
}
.crest-feather {
transform-box: view-box;
transform-origin: 580px 112px;
animation: feather-flick 0.72s ease-in-out infinite alternate;
}
.tail-feathers {
transform-box: view-box;
transform-origin: 370px 327px;
animation: tail-flick 0.62s ease-in-out infinite alternate;
}
.scarf-tail {
transform-box: view-box;
transform-origin: 520px 232px;
animation: scarf-wave 0.88s ease-in-out infinite alternate;
}
.speed-mark {
animation: speed-pulse 1.1s ease-in-out infinite;
}
.speed-mark:nth-child(2) {
animation-delay: -0.36s;
}
.speed-mark:nth-child(3) {
animation-delay: -0.72s;
}
.motion-toggle {
position: absolute;
right: clamp(12px, 2vw, 28px);
bottom: clamp(12px, 2vw, 24px);
display: inline-flex;
align-items: center;
gap: 0.55rem;
min-height: 44px;
padding: 0.65rem 0.92rem;
border: 2px solid rgba(23, 61, 75, 0.22);
border-radius: 999px;
color: var(--ink);
background: rgba(255, 253, 245, 0.86);
box-shadow: 0 8px 24px rgba(23, 61, 75, 0.16);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
font: 700 0.875rem/1 ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
cursor: pointer;
transition: transform 160ms ease, background-color 160ms ease;
}
.motion-toggle:hover {
transform: translateY(-2px);
background: rgba(255, 253, 245, 0.98);
}
.motion-toggle:active {
transform: translateY(0);
}
.motion-toggle:focus-visible {
outline: 3px solid #fff8dd;
outline-offset: 3px;
}
.motion-toggle__icon {
display: grid;
width: 1rem;
height: 1rem;
place-items: center;
font-size: 0.9rem;
}
html.is-paused * {
animation-play-state: paused !important;
}
@keyframes cloud-drift {
from { transform: translateX(0); }
to { transform: translateX(-1200px); }
}
@keyframes wave-drift {
from { transform: translateX(0); }
to { transform: translateX(-300px); }
}
@keyframes road-run {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: -148px; }
}
@keyframes speck-run {
from { transform: translateX(0); }
to { transform: translateX(-180px); }
}
@keyframes wind {
0% { transform: translateX(120px); opacity: 0; }
24% { opacity: 0.62; }
82% { opacity: 0.62; }
100% { transform: translateX(-220px); opacity: 0; }
}
@keyframes feather-flick {
from { transform: rotate(-4deg); }
to { transform: rotate(7deg); }
}
@keyframes tail-flick {
from { transform: rotate(-3deg); }
to { transform: rotate(4deg); }
}
@keyframes scarf-wave {
from { transform: rotate(-2deg) skewX(0deg); }
to { transform: rotate(6deg) skewX(-5deg); }
}
@keyframes speed-pulse {
0%, 100% { opacity: 0.18; transform: translateX(22px); }
45% { opacity: 0.72; transform: translateX(-12px); }
}
@media (max-width: 640px) {
.motion-toggle {
padding: 0.62rem;
}
.motion-toggle__label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.outer-detail {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.scene * {
animation: none !important;
}
.motion-toggle {
display: none;
}
}
</style>
</head>
<body>
<main class="stage" aria-label="鹈鹕骑自行车动画场景">
<svg class="scene" viewBox="0 0 1200 700" preserveAspectRatio="xMidYMid meet" role="img" aria-labelledby="scene-title scene-desc">
<title id="scene-title">海岸公路上骑自行车的鹈鹕</title>
<desc id="scene-desc">一只戴着蓝色围巾的鹈鹕踩着珊瑚红自行车，沿海岸公路迎风前进。车轮、双腿、海浪和道路连续运动。</desc>
<defs>
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#bdeaf3"/>
<stop offset="0.63" stop-color="#ddf5ef"/>
<stop offset="1" stop-color="#fff0bd"/>
</linearGradient>
<linearGradient id="sea" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#68d7d2"/>
<stop offset="1" stop-color="#249eaa"/>
</linearGradient>
<linearGradient id="road" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#657f89"/>
<stop offset="1" stop-color="#435e69"/>
</linearGradient>
<linearGradient id="beak-warmth" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#ffc44d"/>
<stop offset="1" stop-color="#ee8d26"/>
</linearGradient>
<radialGradient id="sun-glow">
<stop offset="0" stop-color="#fff7ba" stop-opacity="0.92"/>
<stop offset="0.48" stop-color="#ffd760" stop-opacity="0.32"/>
<stop offset="1" stop-color="#ffd760" stop-opacity="0"/>
</radialGradient>
<filter id="soft-shadow" x="-30%" y="-80%" width="160%" height="260%">
<feGaussianBlur stdDeviation="10"/>
</filter>
<clipPath id="ocean-clip">
<rect x="0" y="330" width="1200" height="210"/>
</clipPath>
</defs>
<!-- 海岸背景 -->
<rect width="1200" height="700" fill="url(#sky)"/>
<circle cx="1015" cy="120" r="108" fill="url(#sun-glow)"/>
<circle cx="1015" cy="120" r="47" fill="#ffd45f"/>
<path d="M0 338 C140 290 278 318 392 336 C528 357 668 318 803 326 C928 334 1065 293 1200 310 L1200 381 L0 381 Z" fill="#8bc9ba" opacity="0.74"/>
<path d="M0 359 C140 325 252 353 368 366 C518 383 624 348 770 351 C918 355 1035 330 1200 343 L1200 394 L0 394 Z" fill="#68afa6" opacity="0.7"/>
<g class="cloud-band cloud-band--far" fill="#fffdf5">
<g transform="translate(70 118)">
<ellipse cx="0" cy="16" rx="55" ry="20"/>
<circle cx="-24" cy="8" r="24"/>
<circle cx="12" cy="0" r="32"/>
<circle cx="47" cy="12" r="22"/>
</g>
<g transform="translate(705 82)">
<ellipse cx="0" cy="16" rx="58" ry="19"/>
<circle cx="-27" cy="9" r="23"/>
<circle cx="8" cy="1" r="30"/>
<circle cx="44" cy="12" r="21"/>
</g>
<g transform="translate(1270 118)">
<ellipse cx="0" cy="16" rx="55" ry="20"/>
<circle cx="-24" cy="8" r="24"/>
<circle cx="12" cy="0" r="32"/>
<circle cx="47" cy="12" r="22"/>
</g>
<g transform="translate(1905 82)">
<ellipse cx="0" cy="16" rx="58" ry="19"/>
<circle cx="-27" cy="9" r="23"/>
<circle cx="8" cy="1" r="30"/>
<circle cx="44" cy="12" r="21"/>
</g>
</g>
<g class="cloud-band" fill="#fffdf5" opacity="0.9">
<g transform="translate(350 176)">
<ellipse cx="0" cy="18" rx="70" ry="22"/>
<circle cx="-36" cy="10" r="27"/>
<circle cx="2" cy="0" r="38"/>
<circle cx="47" cy="11" r="27"/>
</g>
<g transform="translate(950 205)">
<ellipse cx="0" cy="14" rx="49" ry="17"/>
<circle cx="-23" cy="7" r="21"/>
<circle cx="7" cy="0" r="28"/>
<circle cx="38" cy="9" r="19"/>
</g>
<g transform="translate(1550 176)">
<ellipse cx="0" cy="18" rx="70" ry="22"/>
<circle cx="-36" cy="10" r="27"/>
<circle cx="2" cy="0" r="38"/>
<circle cx="47" cy="11" r="27"/>
</g>
<g transform="translate(2150 205)">
<ellipse cx="0" cy="14" rx="49" ry="17"/>
<circle cx="-23" cy="7" r="21"/>
<circle cx="7" cy="0" r="28"/>
<circle cx="38" cy="9" r="19"/>
</g>
</g>
<rect y="330" width="1200" height="210" fill="url(#sea)"/>
<g clip-path="url(#ocean-clip)" fill="none" stroke="#c5fbef" stroke-width="6" stroke-linecap="round" opacity="0.7">
<g class="wave-band">
<path d="M-80 384 Q-42 365 -4 384 T72 384 T148 384 T224 384 T300 384 T376 384 T452 384 T528 384 T604 384 T680 384 T756 384 T832 384 T908 384 T984 384 T1060 384 T1136 384 T1212 384 T1288 384 T1364 384 T1440 384"/>
<path d="M-150 444 Q-112 425 -74 444 T2 444 T78 444 T154 444 T230 444 T306 444 T382 444 T458 444 T534 444 T610 444 T686 444 T762 444 T838 444 T914 444 T990 444 T1066 444 T1142 444 T1218 444 T1294 444 T1370 444 T1446 444" opacity="0.65"/>
</g>
</g>
<path d="M0 485 C172 465 316 483 471 476 C647 468 780 485 952 474 C1044 468 1125 469 1200 477 L1200 528 L0 528 Z" fill="#f4d99f"/>
<path d="M0 501 C202 489 354 501 514 493 C697 484 895 506 1200 491" fill="none" stroke="#d3b772" stroke-width="7" opacity="0.6"/>
<!-- 公路 -->
<path d="M0 515 H1200 V700 H0 Z" fill="url(#road)"/>
<path d="M0 516 H1200" fill="none" stroke="#fff0ba" stroke-width="11"/>
<path class="road-dashes" d="M-160 654 H1360" fill="none" stroke="#fff4d6" stroke-width="11" stroke-linecap="round" stroke-dasharray="82 66"/>
<g class="road-specks" fill="#314d58" opacity="0.36">
<ellipse cx="90" cy="585" rx="14" ry="4"/>
<ellipse cx="270" cy="676" rx="10" ry="3"/>
<ellipse cx="450" cy="610" rx="13" ry="3.5"/>
<ellipse cx="630" cy="684" rx="15" ry="4"/>
<ellipse cx="810" cy="580" rx="10" ry="3"/>
<ellipse cx="990" cy="672" rx="13" ry="3.5"/>
<ellipse cx="1170" cy="606" rx="12" ry="3"/>
<ellipse cx="1350" cy="684" rx="15" ry="4"/>
</g>
<!-- 骑行投影 -->
<ellipse id="ride-shadow" cx="553" cy="663" rx="260" ry="24" fill="#173d4b" opacity="0.22" filter="url(#soft-shadow)"/>
<!-- 自行车与鹈鹕 -->
<g id="ride-group">
<!-- 后轮 -->
<g aria-hidden="true">
<circle cx="385" cy="545" r="116" fill="#f4fbf8" fill-opacity="0.08" stroke="#173d4b" stroke-width="15"/>
<circle cx="385" cy="545" r="104" fill="none" stroke="#d4edf0" stroke-width="6"/>
<g id="rear-spokes" stroke="#7ea4ab" stroke-width="4" stroke-linecap="round">
<line x1="385" y1="545" x2="385" y2="441"/>
<line x1="385" y1="545" x2="458.5" y2="471.5"/>
<line x1="385" y1="545" x2="489" y2="545"/>
<line x1="385" y1="545" x2="458.5" y2="618.5"/>
<line x1="385" y1="545" x2="385" y2="649"/>
<line x1="385" y1="545" x2="311.5" y2="618.5"/>
<line x1="385" y1="545" x2="281" y2="545"/>
<line x1="385" y1="545" x2="311.5" y2="471.5"/>
<circle cx="385" cy="441" r="7" fill="#ffd45f" stroke="none"/>
</g>
<circle cx="385" cy="545" r="14" fill="#fffdf5" stroke="#173d4b" stroke-width="6"/>
</g>
<!-- 前轮 -->
<g aria-hidden="true">
<circle cx="725" cy="545" r="116" fill="#f4fbf8" fill-opacity="0.08" stroke="#173d4b" stroke-width="15"/>
<circle cx="725" cy="545" r="104" fill="none" stroke="#d4edf0" stroke-width="6"/>
<g id="front-spokes" stroke="#7ea4ab" stroke-width="4" stroke-linecap="round">
<line x1="725" y1="545" x2="725" y2="441"/>
<line x1="725" y1="545" x2="798.5" y2="471.5"/>
<line x1="725" y1="545" x2="829" y2="545"/>
<line x1="725" y1="545" x2="798.5" y2="618.5"/>
<line x1="725" y1="545" x2="725" y2="649"/>
<line x1="725" y1="545" x2="651.5" y2="618.5"/>
<line x1="725" y1="545" x2="621" y2="545"/>
<line x1="725" y1="545" x2="651.5" y2="471.5"/>
<circle cx="725" cy="441" r="7" fill="#ffd45f" stroke="none"/>
</g>
<circle cx="725" cy="545" r="14" fill="#fffdf5" stroke="#173d4b" stroke-width="6"/>
</g>
<!-- 远侧腿，位于车架之后 -->
<g aria-hidden="true">
<path id="far-leg-outline" d="M459 357 Q455 439 491 526" fill="none" stroke="#173d4b" stroke-width="24" stroke-linecap="round" stroke-linejoin="round"/>
<path id="far-leg" d="M459 357 Q455 439 491 526" fill="none" stroke="#d9984f" stroke-width="15" stroke-linecap="round" stroke-linejoin="round"/>
<line id="far-crank" x1="520" y1="535" x2="491" y2="526" stroke="#173d4b" stroke-width="8" stroke-linecap="round"/>
<g id="far-foot">
<ellipse cx="491" cy="526" rx="28" ry="12" fill="#f5a623" stroke="#173d4b" stroke-width="6"/>
</g>
</g>
<!-- 车架 -->
<g fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M385 545 L482 396 L520 535 Z M482 396 L643 410 L520 535 Z" stroke="#173d4b" stroke-width="18"/>
<path d="M385 545 L482 396 L520 535 Z M482 396 L643 410 L520 535 Z" stroke="#ef665b" stroke-width="10"/>
<path d="M643 410 L725 545 M651 408 L725 545" stroke="#173d4b" stroke-width="13"/>
<path d="M643 410 L725 545 M651 408 L725 545" stroke="#ef665b" stroke-width="6"/>
<path d="M643 411 Q654 380 652 355 Q666 359 688 350" stroke="#173d4b" stroke-width="11"/>
<path d="M643 411 Q654 380 652 355 Q666 359 688 350" stroke="#d8eef0" stroke-width="5"/>
<path d="M681 347 l18 -2" stroke="#173d4b" stroke-width="10"/>
<path d="M462 391 h50" stroke="#173d4b" stroke-width="16"/>
<path d="M467 387 h42" stroke="#394f58" stroke-width="8"/>
<path d="M385 536 Q449 504 520 526" stroke="#f4cf71" stroke-width="6"/>
<path d="M385 554 Q454 564 520 544" stroke="#f4cf71" stroke-width="6"/>
</g>
<circle cx="520" cy="535" r="27" fill="#f7c843" stroke="#173d4b" stroke-width="7"/>
<circle cx="520" cy="535" r="9" fill="#fffdf5" stroke="#173d4b" stroke-width="5"/>
<path d="M631 422 Q652 435 676 423" fill="none" stroke="#f7c843" stroke-width="8" stroke-linecap="round"/>
<circle cx="665" cy="373" r="13" fill="#f7c843" stroke="#173d4b" stroke-width="5"/>
<path d="M655 372 Q665 358 675 372" fill="none" stroke="#173d4b" stroke-width="4"/>
<!-- 尾羽 -->
<g class="tail-feathers" fill="#fffdf5" stroke="#173d4b" stroke-width="6" stroke-linejoin="round">
<path d="M384 315 C350 294 319 293 294 308 C326 318 349 328 382 341 Z"/>
<path d="M382 326 C344 326 311 341 296 361 C331 356 358 355 394 348 Z" fill="#dcebed"/>
</g>
<!-- 鹈鹕身体与脖颈 -->
<g id="pelican-body">
<path d="M387 257 C355 274 344 309 355 341 C368 381 414 402 472 393 C533 384 563 350 550 308 C537 265 497 241 445 242 C422 243 402 248 387 257 Z" fill="#fffdf5" stroke="#173d4b" stroke-width="7" stroke-linejoin="round"/>
<path d="M375 323 C392 364 444 383 500 365 C462 397 396 399 369 359 C360 346 357 331 359 316 Z" fill="#dcebed" opacity="0.88"/>
<path d="M486 341 C541 318 567 282 544 244 C518 202 531 162 567 146" fill="none" stroke="#173d4b" stroke-width="67" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M486 341 C541 318 567 282 544 244 C518 202 531 162 567 146" fill="none" stroke="#fffdf5" stroke-width="55" stroke-linecap="round" stroke-linejoin="round"/>
<ellipse cx="588" cy="151" rx="58" ry="44" fill="#fffdf5" stroke="#173d4b" stroke-width="7" transform="rotate(5 588 151)"/>
<path d="M541 177 C561 193 597 195 619 178" fill="none" stroke="#dcebed" stroke-width="10" stroke-linecap="round"/>
<g class="crest-feather" fill="#fffdf5" stroke="#173d4b" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
<path d="M568 112 Q550 87 529 94 Q547 105 556 121 Z"/>
<path d="M579 109 Q572 80 551 78 Q564 94 568 118 Z"/>
</g>
<!-- 眼睛与嘴 -->
<circle cx="607" cy="143" r="12" fill="#fffdf5" stroke="#173d4b" stroke-width="5"/>
<circle cx="610" cy="143" r="4.5" fill="#173d4b"/>
<path d="M619 151 C673 137 746 141 806 154 C819 157 820 169 806 173 C744 178 678 179 617 172 Z" fill="url(#beak-warmth)" stroke="#173d4b" stroke-width="7" stroke-linejoin="round"/>
<path d="M619 171 C673 181 746 180 806 166 C789 205 729 222 668 207 C641 200 624 187 619 171 Z" fill="#ffd17a" stroke="#173d4b" stroke-width="7" stroke-linejoin="round"/>
<path d="M649 158 Q659 153 671 157" fill="none" stroke="#9e612a" stroke-width="4" stroke-linecap="round"/>
<path d="M772 168 Q792 163 806 160" fill="none" stroke="#fff2b0" stroke-width="4" stroke-linecap="round"/>
<!-- 围巾 -->
<path d="M517 226 Q548 243 575 224" fill="none" stroke="#1d839e" stroke-width="20" stroke-linecap="round"/>
<g class="scarf-tail" fill="#279db4" stroke="#173d4b" stroke-width="5" stroke-linejoin="round">
<path d="M523 231 C491 223 457 226 427 244 C458 246 485 253 514 270 Z"/>
<path d="M515 249 C485 253 463 266 447 284 C475 278 495 280 519 292 Z" fill="#42b4c3"/>
</g>
<!-- 后翼 -->
<path d="M433 267 C384 258 359 282 365 318 C371 352 405 368 447 350 C421 339 411 318 423 302 C437 283 460 286 475 306 C478 283 461 272 433 267 Z" fill="#eef5f1" stroke="#173d4b" stroke-width="7" stroke-linejoin="round"/>
<path d="M382 321 Q407 345 439 338 M380 302 Q406 324 438 319" fill="none" stroke="#c3dcdf" stroke-width="6" stroke-linecap="round"/>
</g>
<!-- 近侧腿 -->
<g aria-hidden="true">
<path id="near-leg-outline" d="M492 365 Q520 445 548 544" fill="none" stroke="#173d4b" stroke-width="26" stroke-linecap="round" stroke-linejoin="round"/>
<path id="near-leg" d="M492 365 Q520 445 548 544" fill="none" stroke="#e9a85c" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>
<line id="near-crank" x1="520" y1="535" x2="548" y2="544" stroke="#173d4b" stroke-width="9" stroke-linecap="round"/>
<g id="near-foot">
<ellipse cx="548" cy="544" rx="30" ry="13" fill="#f5a623" stroke="#173d4b" stroke-width="6"/>
</g>
</g>
<!-- 前翼搭在车把上 -->
<g id="front-wing">
<path d="M478 280 C522 270 560 294 593 326 C616 348 633 362 654 365 C668 367 676 361 683 350 C689 364 685 381 669 387 C649 395 627 382 604 367 C560 340 531 328 499 333 C479 336 465 322 464 306 C463 295 468 286 478 280 Z" fill="#fffdf5" stroke="#173d4b" stroke-width="7" stroke-linejoin="round"/>
<path d="M518 304 Q559 306 602 345 M501 320 Q545 322 588 355" fill="none" stroke="#d1e4e5" stroke-width="7" stroke-linecap="round"/>
<path d="M650 366 Q668 359 682 349 M654 376 Q674 370 687 356" fill="none" stroke="#173d4b" stroke-width="5" stroke-linecap="round"/>
</g>
<!-- 速度线 -->
<g class="outer-detail" fill="none" stroke="#fffdf5" stroke-width="7" stroke-linecap="round">
<path class="speed-mark" d="M252 310 h-92"/>
<path class="speed-mark" d="M280 354 h-126"/>
<path class="speed-mark" d="M264 400 h-72"/>
</g>
</g>
<!-- 前景海草 -->
<g class="outer-detail" fill="none" stroke="#294f51" stroke-width="8" stroke-linecap="round" opacity="0.68">
<path d="M38 548 Q25 517 42 487 M54 547 Q72 515 63 484 M78 551 Q99 532 99 503"/>
<path d="M1132 545 Q1118 514 1135 484 M1150 548 Q1170 515 1162 478 M1176 550 Q1193 527 1191 500"/>
</g>
<g class="outer-detail" fill="none" stroke="#fffdf5" stroke-width="5" stroke-linecap="round" opacity="0.54">
<path class="wind-line" d="M868 277 h102"/>
<path class="wind-line" d="M910 312 h136"/>
<path class="wind-line" d="M875 348 h82"/>
</g>
</svg>
<button id="motion-toggle" class="motion-toggle" type="button" aria-pressed="false" aria-label="暂停动画">
<span class="motion-toggle__icon" aria-hidden="true">Ⅱ</span>
<span class="motion-toggle__label">暂停动画</span>
</button>
</main>
<script>
(() => {
const cycle = 1450;
const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
const rideGroup = document.getElementById('ride-group');
const shadow = document.getElementById('ride-shadow');
const rearSpokes = document.getElementById('rear-spokes');
const frontSpokes = document.getElementById('front-spokes');
const frontWing = document.getElementById('front-wing');
const toggle = document.getElementById('motion-toggle');
const toggleIcon = toggle.querySelector('.motion-toggle__icon');
const toggleLabel = toggle.querySelector('.motion-toggle__label');
const legs = {
near: {
hip: { x: 492, y: 365 },
phase: 0,
upper: 110,
lower: 105,
path: document.getElementById('near-leg'),
outline: document.getElementById('near-leg-outline'),
crank: document.getElementById('near-crank'),
foot: document.getElementById('near-foot')
},
far: {
hip: { x: 459, y: 357 },
phase: Math.PI,
upper: 115,
lower: 112,
path: document.getElementById('far-leg'),
outline: document.getElementById('far-leg-outline'),
crank: document.getElementById('far-crank'),
foot: document.getElementById('far-foot')
}
};
let rafId = 0;
let startedAt = performance.now();
let pausedAt = 0;
let paused = false;
function solveKnee(hip, foot, upper, lower) {
const dx = foot.x - hip.x;
const dy = foot.y - hip.y;
const rawDistance = Math.max(1, Math.hypot(dx, dy));
const distance = Math.min(rawDistance, upper + lower - 0.01);
const along = (upper * upper - lower * lower + distance * distance) / (2 * distance);
const height = Math.sqrt(Math.max(0, upper * upper - along * along));
const ux = dx / rawDistance;
const uy = dy / rawDistance;
const baseX = hip.x + along * ux;
const baseY = hip.y + along * uy;
return {
x: baseX + uy * height,
y: baseY - ux * height
};
}
function drawLeg(config, angle) {
const pedalAngle = angle + config.phase;
const foot = {
x: 520 + Math.cos(pedalAngle) * 47,
y: 535 + Math.sin(pedalAngle) * 35
};
const knee = solveKnee(config.hip, foot, config.upper, config.lower);
const path = `M ${config.hip.x} ${config.hip.y} Q ${knee.x.toFixed(2)} ${knee.y.toFixed(2)} ${foot.x.toFixed(2)} ${foot.y.toFixed(2)}`;
const footAngle = Math.sin(pedalAngle) * 9 - 2;
config.path.setAttribute('d', path);
config.outline.setAttribute('d', path);
config.crank.setAttribute('x2', foot.x.toFixed(2));
config.crank.setAttribute('y2', foot.y.toFixed(2));
config.foot.setAttribute('transform', `translate(${(foot.x - (config.phase ? 491 : 548)).toFixed(2)} ${(foot.y - (config.phase ? 526 : 544)).toFixed(2)}) rotate(${footAngle.toFixed(2)} ${config.phase ? 491 : 548} ${config.phase ? 526 : 544})`);
}
function drawScene(elapsed) {
const phase = (elapsed % cycle) / cycle;
const angle = phase * Math.PI * 2;
const degrees = phase * 360;
const bob = Math.sin(angle * 2) * 2.4;
const pitch = Math.sin(angle * 2 + 0.45) * 0.35;
const wingPitch = Math.sin(angle * 2 - 0.4) * 1.5;
rearSpokes.setAttribute('transform', `rotate(${degrees.toFixed(2)} 385 545)`);
frontSpokes.setAttribute('transform', `rotate(${degrees.toFixed(2)} 725 545)`);
rideGroup.setAttribute('transform', `translate(0 ${bob.toFixed(2)}) rotate(${pitch.toFixed(2)} 545 440)`);
frontWing.setAttribute('transform', `rotate(${wingPitch.toFixed(2)} 480 305)`);
shadow.setAttribute('transform', `translate(0 ${(-bob * 0.15).toFixed(2)}) scale(${(1 - Math.abs(bob) * 0.004).toFixed(3)} 1)`);
drawLeg(legs.near, angle);
drawLeg(legs.far, angle);
}
function frame(now) {
if (paused || motionQuery.matches) return;
drawScene(now - startedAt);
rafId = requestAnimationFrame(frame);
}
function setPaused(nextPaused) {
if (nextPaused === paused) return;
paused = nextPaused;
document.documentElement.classList.toggle('is-paused', paused);
toggle.setAttribute('aria-pressed', String(paused));
toggle.setAttribute('aria-label', paused ? '继续动画' : '暂停动画');
toggleIcon.textContent = paused ? '▶' : 'Ⅱ';
toggleLabel.textContent = paused ? '继续动画' : '暂停动画';
if (paused) {
pausedAt = performance.now() - startedAt;
cancelAnimationFrame(rafId);
} else {
startedAt = performance.now() - pausedAt;
rafId = requestAnimationFrame(frame);
}
}
function applyMotionPreference() {
cancelAnimationFrame(rafId);
if (motionQuery.matches) {
document.documentElement.classList.remove('is-paused');
drawScene(cycle * 0.12);
return;
}
startedAt = performance.now() - pausedAt;
if (!paused) rafId = requestAnimationFrame(frame);
}
toggle.addEventListener('click', () => setPaused(!paused));
motionQuery.addEventListener('change', applyMotionPreference);
drawScene(motionQuery.matches ? cycle * 0.12 : 0);
if (!motionQuery.matches) rafId = requestAnimationFrame(frame);
})();
</script>
</body>
</html>
zenyang 08-03 09:181楼
JinyuX 08-03 09:202楼
kimi 08-03 09:224楼
滑稽 08-13 09:495楼