2. Linux.do
  3. 实测Qwen3.8-27B-Q4_K_M.gguf（RTX3090部署） 。鹈鹕骑自行车

实测Qwen3.8-27B-Q4_K_M.gguf（RTX3090部署） 。鹈鹕骑自行车

996 2026-08-15 00:57 1

Qwen3.8-27B-Q4_K_M.gguf


来自 unsloth/Qwen3.8-27B-GGUF at main


完全通过对话一句话生成html（无harness或agent）：





代码：


<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

<title>鹈鹕骑行 · Pelican Ride</title>

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">

<style>

*{box-sizing:border-box}

html,body{height:100%;margin:0;overflow:hidden}

body{

  font-family:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;

  background:linear-gradient(180deg,#6fc7ea,#e9f6e6);

  -webkit-user-select:none;user-select:none;

}

#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}

body.sprinting #scene{cursor:grabbing}



/* ---------- HUD ---------- */

.hud{position:fixed;z-index:10}

.card{

  background:#fffdf8;border:3px solid #173142;border-radius:16px;

  box-shadow:5px 6px 0 rgba(23,49,66,.20);

  transition:transform .25s ease,box-shadow .25s ease;

}

.card:hover{transform:translateY(-3px);box-shadow:7px 10px 0 rgba(23,49,66,.24)}

.title-card{top:20px;left:20px;padding:10px 18px 12px;transform:rotate(-2deg)}

.title-card:hover{transform:rotate(-2deg) translateY(-3px)}

.title-card h1{margin:0;font-family:'ZCOOL KuaiLe','Noto Sans SC',sans-serif;font-weight:400;

  font-size:clamp(20px,3vw,27px);letter-spacing:3px;color:#173142;line-height:1.15}

.title-card .sub{margin:3px 0 0;font-size:10px;letter-spacing:4px;font-weight:700;color:#ff6b4a}

.speed-card{top:20px;right:20px;padding:10px 18px;display:flex;align-items:center;gap:12px;transform:rotate(1.6deg)}

.speed-card:hover{transform:rotate(1.6deg) translateY(-3px)}

.speed-card .label{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#5b7186;letter-spacing:2px}

.dot{width:9px;height:9px;border-radius:50%;background:#4e9d5b;animation:dotPulse 1.8s ease-in-out infinite;transition:background .3s}

@keyframes dotPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.55}}

body.sprinting .dot{background:#ff6b4a;animation-duration:.45s}

.speed{display:flex;align-items:baseline;gap:4px}

.speed b{font-family:'ZCOOL KuaiLe','Noto Sans SC',sans-serif;font-weight:400;

  font-size:clamp(26px,3.4vw,36px);color:#ff6b4a;line-height:1;display:inline-block;transition:transform .25s ease}

body.sprinting .speed b{transform:scale(1.14)}

.speed i{font-style:normal;font-size:11px;font-weight:700;color:#5b7186}

.hint{bottom:18px;left:50%;transform:translateX(-50%);

  background:#173142;color:#eaf2f7;border-radius:999px;padding:9px 20px;

  font-size:13px;letter-spacing:1px;display:flex;gap:12px;align-items:center;

  box-shadow:5px 6px 0 rgba(23,49,66,.20);white-space:nowrap}

.hint .sep{opacity:.4}

kbd{background:#fffdf8;color:#173142;border:2px solid #2c4a63;border-bottom-width:3px;border-radius:7px;

  padding:1px 8px;font-family:inherit;font-size:12px;font-weight:700}

@media (max-width:640px){

  .hint{font-size:11px;padding:7px 14px;flex-wrap:wrap;justify-content:center;max-width:92vw;white-space:normal;text-align:center}

}



/* ---------- SVG 动画 ---------- */

.eyelid{transform-box:fill-box;transform-origin:center;transform:scaleY(.05);animation:blink 4.6s infinite}

@keyframes blink{0%,90.5%,96.5%,100%{transform:scaleY(.05)}92.5%,94.5%{transform:scaleY(1)}}

.gullMove{animation:cross linear infinite}

.g1{animation-duration:17s}

.g2{animation-duration:26s;animation-delay:-11s}

@keyframes cross{from{transform:translateX(-150px)}to{transform:translateX(1430px)}}

.gullFlap{transform-box:fill-box;transform-origin:center;animation:flap .55s ease-in-out infinite}

.g2 .gullFlap{animation-duration:.75s}

@keyframes flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.35)}}

.puffA{fill:#d5dcd6;transform-box:fill-box;transform-origin:center;animation:puffA .95s linear infinite}

.puffB{fill:#c8d2cc;transform-box:fill-box;transform-origin:center;animation:puffB 1.2s linear infinite}

@keyframes puffA{0%{opacity:.55;transform:translate(0,0) scale(.4)}100%{opacity:0;transform:translate(-115px,20px) scale(1.9)}}

@keyframes puffB{0%{opacity:.5;transform:translate(0,0) scale(.5)}100%{opacity:0;transform:translate(-135px,-12px) scale(2.1)}}

.w{animation:wind .55s linear infinite}

@keyframes wind{0%{opacity:0;transform:translateX(45px)}30%{opacity:.9}100%{opacity:0;transform:translateX(-95px)}}

.tail{transform-box:fill-box;transform-origin:0% 50%;animation:tailWag .8s ease-in-out infinite alternate}

@keyframes tailWag{from{transform:rotate(-24deg)}to{transform:rotate(24deg)}}

.sway{transform-box:fill-box;transform-origin:50% 100%;animation:sway 3s ease-in-out infinite alternate}

@keyframes sway{from{transform:rotate(-1.8deg)}to{transform:rotate(1.8deg)}}

.rays{transform-box:fill-box;transform-origin:center;animation:spin 46s linear infinite}

@keyframes spin{to{transform:rotate(360deg)}}

.sunPulse{transform-box:fill-box;transform-origin:center;animation:sunPulse 5s ease-in-out infinite alternate}

@keyframes sunPulse{from{transform:scale(1)}to{transform:scale(1.06)}}

.lamp{animation:lamp 2.4s ease-in-out infinite}

@keyframes lamp{0%,100%{opacity:.35}50%{opacity:1}}

#bubble{transform-box:fill-box;transform-origin:50% 100%;transform:scale(.25);opacity:0;

  transition:transform .24s cubic-bezier(.34,1.56,.64,1),opacity .16s ease}

#bubble.show{transform:scale(1);opacity:1}

@media (prefers-reduced-motion:reduce){

  .puffA,.puffB,.w,.gullMove,.gullFlap,.tail,.sway,.rays,.sunPulse,.lamp,.dot,.eyelid{animation:none}

}

</style>

</head>

<body>



<svg id="scene" viewBox="0 0 1280 640" preserveAspectRatio="xMidYMid slice" role="img" aria-label="一只鹈鹕骑着自行车沿海岸公路飞驰">

  <title>鹈鹕骑自行车</title>

  <defs>

    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">

      <stop offset="0" stop-color="#6fc7ea"/><stop offset=".55" stop-color="#a8e2f2"/><stop offset="1" stop-color="#e9f6e6"/>

    </linearGradient>

    <radialGradient id="sunGlow">

      <stop offset="0" stop-color="#fff3c4" stop-opacity=".95"/><stop offset="1" stop-color="#fff3c4" stop-opacity="0"/>

    </radialGradient>

    <linearGradient id="road" x1="0" y1="0" x2="0" y2="1">

      <stop offset="0" stop-color="#7b8b98"/><stop offset="1" stop-color="#5c6c79"/>

    </linearGradient>

    <radialGradient id="vig" cx=".5" cy=".45" r=".75">

      <stop offset=".62" stop-color="#0e2a3d" stop-opacity="0"/><stop offset="1" stop-color="#0e2a3d" stop-opacity=".16"/>

    </radialGradient>



    <g id="cloud">

      <ellipse cx="0" cy="0" rx="46" ry="19" fill="#fff"/>

      <ellipse cx="-30" cy="-9" rx="26" ry="14" fill="#fff"/>

      <ellipse cx="30" cy="-12" rx="28" ry="16" fill="#fff"/>

      <ellipse cx="4" cy="-20" rx="24" ry="14" fill="#fff"/>

    </g>

    <g id="treeA">

      <rect x="-4" y="-26" width="8" height="26" rx="3" fill="#8a6a4a"/>

      <circle cx="-12" cy="-34" r="16" fill="#5fae6b"/><circle cx="12" cy="-36" r="15" fill="#6fbf78"/><circle cx="0" cy="-48" r="17" fill="#7cc987"/>

    </g>

    <g id="treeB">

      <rect x="-3.5" y="-24" width="7" height="24" rx="3" fill="#96754f"/>

      <ellipse cx="0" cy="-44" rx="20" ry="24" fill="#4e9d5b"/><ellipse cx="0" cy="-50" rx="13" ry="15" fill="#5fae6b"/>

    </g>

    <g id="tuft" stroke="#4e9d5b" stroke-width="3" stroke-linecap="round" fill="none">

      <path d="M0 0 C-2 -8 -6 -12 -9 -14"/><path d="M0 0 C0 -10 1 -14 0 -18"/><path d="M0 0 C2 -8 6 -11 9 -13"/>

    </g>

    <g id="flower">

      <line x1="0" y1="0" x2="0" y2="-12" stroke="#4e9d5b" stroke-width="2.5"/>

      <circle cx="0" cy="-15" r="4.5" fill="#ff6b4a"/><circle cx="0" cy="-15" r="1.8" fill="#ffd75e"/>

    </g>

    <g id="flower2">

      <line x1="0" y1="0" x2="0" y2="-12" stroke="#4e9d5b" stroke-width="2.5"/>

      <circle cx="0" cy="-15" r="4.5" fill="#ffc247"/><circle cx="0" cy="-15" r="1.8" fill="#fffdf6"/>

    </g>

    <g id="boat">

      <path d="M-12 0 L12 0 L7 6 L-8 6 Z" fill="#8a5a3a"/>

      <path d="M2 -2 L2 -22 L14 -2 Z" fill="#fff"/><path d="M0 -2 L0 -18 L-10 -2 Z" fill="#f2e9d8"/>

    </g>



    <!-- 远景层（海 + 岬角） -->

    <g id="tileFar">

      <rect x="0" y="470" width="1280" height="50" fill="#8fd4e4"/>

      <rect x="0" y="470" width="1280" height="5" fill="#d6f2f6"/>

      <path d="M0 470 V436 Q100 402 220 430 T470 428 T720 424 T960 432 T1180 426 T1280 436 V470 Z" fill="#b7d9e6"/>

      <path d="M0 470 V448 Q160 428 330 446 T700 444 T1050 448 T1280 448 V470 Z" fill="#9cc9da" opacity=".8"/>

      <g stroke="#cdeef4" stroke-width="3" stroke-linecap="round" opacity=".9">

        <line x1="120" y1="492" x2="180" y2="492"/><line x1="420" y1="506" x2="470" y2="506"/>

        <line x1="760" y1="490" x2="830" y2="490"/><line x1="1080" y1="504" x2="1130" y2="504"/>

      </g>

      <use href="#boat" x="560" y="488"/>

      <use href="#boat" transform="translate(950,498) scale(.7)"/>

    </g>



    <!-- 中景层（树 / 灯塔 / 路牌） -->

    <g id="tileMid">

      <clipPath id="lhC"><path d="M120 520 L132 432 H152 L164 520 Z"/></clipPath>

      <path d="M120 520 L132 432 H152 L164 520 Z" fill="#fdfaf2"/>

      <g clip-path="url(#lhC)">

        <rect x="112" y="494" width="60" height="24" fill="#ff6b5a"/>

        <rect x="112" y="446" width="60" height="24" fill="#ff6b5a"/>

      </g>

      <rect x="128" y="420" width="28" height="12" fill="#2c4a63"/>

      <path d="M126 420 L142 404 L158 420 Z" fill="#ff6b5a"/>

      <circle class="lamp" cx="142" cy="426" r="4" fill="#ffd75e"/>

      <use href="#treeA" transform="translate(340,520)"/>

      <use href="#treeB" transform="translate(520,520) scale(.85)"/>

      <use href="#treeA" transform="translate(980,520) scale(1.12)"/>

      <use href="#treeB" transform="translate(1180,520) scale(.7)"/>

      <ellipse cx="260" cy="514" rx="26" ry="12" fill="#8fcf98"/>

      <ellipse cx="660" cy="515" rx="20" ry="10" fill="#83c48d"/>

      <ellipse cx="880" cy="514" rx="24" ry="11" fill="#8fcf98"/>

      <ellipse cx="430" cy="516" rx="14" ry="7" fill="#d8e2dc"/>

      <ellipse cx="770" cy="517" rx="10" ry="5" fill="#cfdad4"/>

      <g class="sway">

        <rect x="698" y="472" width="6" height="48" fill="#7a5c3e"/>

        <rect x="652" y="440" width="98" height="34" rx="8" fill="#fffdf6" stroke="#2c4a63" stroke-width="3"/>

        <text x="701" y="463" text-anchor="middle" font-size="17" fill="#2c4a63" font-family="'ZCOOL KuaiLe','Noto Sans SC',sans-serif">海岸线 →</text>

      </g>

    </g>



    <!-- 近景层（路边草 + 花 + 石子） -->

    <g id="tileNear">

      <rect x="0" y="512" width="1280" height="8" fill="#85c98b"/>

      <rect x="0" y="512" width="1280" height="2.5" fill="#a5dba8"/>

      <use href="#tuft" transform="translate(80,520)"/>

      <use href="#tuft" transform="translate(300,520) scale(-1,1)"/>

      <use href="#tuft" transform="translate(540,520)"/>

      <use href="#tuft" transform="translate(760,520) scale(-1,1)"/>

      <use href="#tuft" transform="translate(990,520)"/>

      <use href="#tuft" transform="translate(1230,520) scale(-1,1)"/>

      <use href="#flower" transform="translate(180,519)"/>

      <use href="#flower2" transform="translate(430,519)"/>

      <use href="#flower" transform="translate(680,519) scale(.9)"/>

      <use href="#flower2" transform="translate(900,519)"/>

      <use href="#flower" transform="translate(1150,519)"/>

      <ellipse cx="240" cy="592" rx="7" ry="3" fill="#b9c4c9" opacity=".5"/>

      <ellipse cx="620" cy="612" rx="9" ry="3.5" fill="#b9c4c9" opacity=".45"/>

      <ellipse cx="1010" cy="586" rx="6" ry="2.5" fill="#b9c4c9" opacity=".5"/>

    </g>



    <g id="tileC1">

      <use href="#cloud" transform="translate(180,110) scale(.8)"/>

      <use href="#cloud" transform="translate(640,72) scale(.55)"/>

      <use href="#cloud" transform="translate(1020,150) scale(.9)"/>

    </g>

    <g id="tileC2">

      <use href="#cloud" transform="translate(420,196) scale(1.2)"/>

      <use href="#cloud" transform="translate(90,120)"/>

    </g>

  </defs>



  <!-- 天空 / 太阳 -->

  <rect width="1280" height="640" fill="url(#sky)"/>

  <g transform="translate(1050,135)">

    <circle r="74" fill="url(#sunGlow)"/>

    <g class="rays" stroke="#ffd75e" stroke-width="5" stroke-linecap="round" opacity=".85">

      <line x1="46" y1="0" x2="60" y2="0"/><line x1="-46" y1="0" x2="-60" y2="0"/>

      <line x1="0" y1="46" x2="0" y2="60"/><line x1="0" y1="-46" x2="0" y2="-60"/>

      <line x1="32.5" y1="32.5" x2="42.4" y2="42.4"/><line x1="-32.5" y1="32.5" x2="-42.4" y2="42.4"/>

      <line x1="32.5" y1="-32.5" x2="42.4" y2="-42.4"/><line x1="-32.5" y1="-32.5" x2="-42.4" y2="-42.4"/>

    </g>

    <circle class="sunPulse" r="34" fill="#ffd75e"/>

    <circle r="34" fill="none" stroke="#ffc247" stroke-width="3" opacity=".6"/>

  </g>



  <!-- 云（两层视差） -->

  <g id="clouds1" opacity=".85"><use href="#tileC1"/><use href="#tileC1" x="1280"/></g>

  <g id="clouds2" opacity=".95"><use href="#tileC2"/><use href="#tileC2" x="1280"/></g>



  <!-- 海鸥 -->

  <g transform="translate(0,150)"><g class="gullMove g1">

    <g class="gullFlap"><path d="M0 0 Q9 -9 18 -1 Q27 -9 36 0" fill="none" stroke="#4a6b80" stroke-width="3.5" stroke-linecap="round"/></g>

  </g></g>

  <g transform="translate(0,25)"><g class="gullMove g2"><g transform="scale(.7)">

    <g class="gullFlap"><path d="M0 0 Q9 -9 18 -1 Q27 -9 36 0" fill="none" stroke="#5b7f96" stroke-width="4" stroke-linecap="round"/></g>

  </g></g></g>



  <!-- 视差层 -->

  <g id="layerFar"><use href="#tileFar"/><use href="#tileFar" x="1280"/></g>

  <g id="layerMid"><use href="#tileMid"/><use href="#tileMid" x="1280"/></g>



  <!-- 公路 -->

  <rect x="0" y="520" width="1280" height="120" fill="url(#road)"/>

  <line id="dashes" x1="-40" y1="578" x2="1320" y2="578" stroke="#f4f7f5" stroke-width="7" stroke-dasharray="46 54" opacity=".85"/>

 <g id="layerNear"><use href="#tileNear"/><use href="#tileNear" x="1280"/></g>



  <!-- ============ 鹈鹕 + 自行车 ============ -->

  <g id="bikeWorld" transform="translate(560,462)">

    <ellipse cx="92" cy="57" rx="152" ry="9" fill="#12303f" opacity=".15"/>



    <!-- 扬尘 -->

    <g id="dust" opacity=".35">

      <circle class="puffA" cx="-54" cy="46" r="7"/>

      <circle class="puffB" cx="-60" cy="52" r="9" style="animation-delay:-.3s"/>

      <circle class="puffA" cx="-48" cy="50" r="5" style="animation-delay:-.55s"/>

      <circle class="puffB" cx="-58" cy="42" r="6" style="animation-delay:-.8s"/>

    </g>



    <!-- 远侧脚踏 / 远腿 -->

    <g id="pedalF" transform="translate(50,-20)">

      <rect x="-10" y="-1" width="20" height="5" rx="2" fill="#2a3540"/>

      <path d="M-8 -1 C-8 -7 3 -8 9 -5 L15 -2 C16 -1 16 0 15 1 L8 3 C2 5 -8 4 -8 -1 Z" fill="#d97f22"/>

      <path d="M4 -6 L5 -1 M9 -4 L9 1" stroke="#b5641c" stroke-width="1.4"/>

    </g>

    <line id="thighF" x1="46" y1="-102" x2="92.7" y2="-67.7" stroke="#7f8a2e" stroke-width="10" stroke-linecap="round"/>

    <line id="shinF"  x1="92.7" y1="-67.7" x2="50" y2="-20" stroke="#8a9433" stroke-width="8" stroke-linecap="round"/>



    <!-- 远侧翅膀（扶把） -->

    <g id="wingF">

      <path d="M76 -142 C108 -152 148 -144 172 -127 C178 -123 176 -16 168 -18 C146 -124 12 -126 78 -124 Z" fill="#e6dcc6"/>

    </g>



    <!-- 车轮 -->

    <g>

      <circle r="58" fill="none" stroke="#2f3b46" stroke-width="10"/>

      <circle r="49" fill="none" stroke="#e8ef2" stroke-width="4"/>

      <g id="spinR">

        <g stroke="#a9b8c4" stroke-width="3" stroke-linecap="round">

          <line x1="0" y1="-46" x2="0" y2="46"/><line x1="-46" y1="0" x2="46" y2="0"/>

          <line x1="-32.5" y1="-32.5" x2="32.5" y2="32.5"/><line x1="-32.5" y1="32.5" x2="32.5" y2="-32.5"/>

        </g>

        <circle cx="0" cy="-46" r="2.6" fill="#5b6c7a"/>

        <circle r="7" fill="#3c4a57"/><circle r="2.6" fill="#dfe7ec"/>

      </g>

    </g>

    <g transform="translate(178,0)">

      <circle r="58" fill="none" stroke="#2f3b46" stroke-width="10"/>

      <circle r="49" fill="none" stroke="#e8eef2" stroke-width="4"/>

      <g id="spinF">

        <g stroke="#a9b8c4" stroke-width="3" stroke-linecap="round">

          <line x1="0" y1="-46" x2="0" y2="46"/><line x1="-46" y1="0" x2="46" y2="0"/>

          <line x1="-32.5" y1="-32.5" x2="32.5" y2="32.5"/><line x1="-32.5" y1="32.5" x2="32.5" y2="-32.5"/>

        </g>

        <circle cx="0" cy="-46" r="2.6" fill="#5b6c7a"/>

        <circle r="7" fill="#3c4a57"/><circle r="2.6" fill="#dfe7ec"/>

      </g>

    </g>



    <!-- 车架 -->

    <g stroke="#128a8a" stroke-width="7" stroke-linecap="round" fill="none">

      <path d="M82 -20 L0 0"/><path d="M42 -98 L0 0"/><path d="M82 -20 L42 -102"/>

      <path d="M82 -20 L164 -92"/><path d="M46 -100 L162 -96"/><path d="M178 0 Q170 -52 162 -98"/>

    </g>

    <circle cx="0" cy="0" r="9" fill="none" stroke="#3c4a57" stroke-width="3"/>

    <path id="chain" d="M82 -39 L0 -9 A9 9 0 0 0 0 9 L82 -1 A19 19 0 0 0 82 -39" fill="none"

          stroke="#4a5866" stroke-width="4" stroke-dasharray="7 5"/>

    <g id="gCrank" transform="translate(82,-20)">

      <circle r="19" fill="none" stroke="#3c4a57" stroke-width="4"/>

      <g fill="#3c4a57">

        <circle cx="12" cy="0" r="2.2"/><circle cx="-12" cy="0" r="2.2"/>

        <circle cx="0" cy="12" r="2.2"/><circle cx="0" cy="-12" r="2.2"/>

      </g>

      <line x1="0" y1="0" x2="-32" y2="0" stroke="#2a3540" stroke-width="6" stroke-linecap="round"/>

      <line x1="0" y1="0" x2="32" y2="0" stroke="#3404c" stroke-width="6" stroke-linecap="round"/>

      <circle r="4.5" fill="#3404c"/>

    </g>



    <!-- 座管 / 车座 / 车把 / 车铃 -->

    <line x1="42" y1="-102" x2="36" y2="-118" stroke="#33404c" stroke-width="5" stroke-linecap="round"/>

    <path d="M16 -118 Q34 -128 58 -117 Q38 -10 16 -118 Z" fill="#33404c"/>

    <line x1="162" y1="-98" x2="158" y2="-14" stroke="#3404c" stroke-width="6" stroke-linecap="round"/>

    <path d="M158 -114 Q172 -128 184 -120" fill="none" stroke="#33404c" stroke-width="6" stroke-linecap="round"/>

    <circle cx="184" cy="-120" r="4" fill="#22303c"/>

    <circle cx="157" cy="-18" r="3.5" fill="#ffc247" stroke="#e8a13c" stroke-width="1.2"/>



    <!-- 前车筐 + 小鱼 -->

    <path d="M156 -96 L198 -96 L192 -72 L162 -72 Z" fill="#c98a4b"/>

    <g transform="translate(176,-84)">

      <g transform="translate(9,0)"><g class="tail"><path d="M0 0 L8 -6 L8 6 Z" fill="#4a7fa5"/></g></g>

      <ellipse cx="0" cy="0" rx="10" ry="5.5" fill="#5b8fb8"/>

      <path d="M-3 -5 L0 -9 L3 -5 Z" fill="#4a7fa5"/>

      <circle cx="-6" cy="-1" r="1.3" fill="#1d2c38"/>

    </g>

    <path d="M156 -84 L198 -84 L192 -72 L162 -72 Z" fill="#b97c40"/>

    <path d="M158 -8 L196 -88 M160 -80 L194 -80" stroke="#a06a35" stroke-width="1.5" opacity=".7"/>



    <!-- 鹈鹕身体（整体上下起伏） -->

    <g id="bodyG">

      <path d="M8 -140 L-16 -152 L2 -132 Z" fill="#f3ead9"/>

      <path d="M10 -130 L-14 -140 L6 -120 Z" fill="#eadfc8"/>

      <path d="M2 -126 C-8 -152 24 -172 60 -166 C94 -160 114 -146 112 -126 C111 -108 92 -94 66 -92 C40 -90 10 -100 2 -126 Z"

            fill="#fdf9f1" stroke="#e2d9c8" stroke-width="2"/>

      <ellipse cx="64" cy="-110" rx="36" ry="17" fill="#f4ecdc" opacity=".8"/>

      <path d="M98 -146 C106 -158 110 -174 118 -190" stroke="#fdf9f1" stroke-width="15" stroke-linecap="round" fill="none"/>

      <path d="M106 -206 Q96 -218 88 -216 Q98 -210 104 -202 Z" fill="#f3ead9"/>

      <path d="M100 -198 Q90 -206 84 -205 Q92 -20 98 -194 Z" fill="#eadfc8"/>

      <circle cx="120" cy="-196" r="15" fill="#fdf9f1"/>

      <circle cx="110" cy="-190" r="4" fill="#ffb3a0" opacity=".55"/>

      <g id="pouch">

        <path d="M130 -186 C148 -164 190 -160 214 -179 C192 -152 152 -154 130 -186 Z" fill="#ff8a4d"/>

        <path d="M136 -182 C156 -166 188 -162 208 -176" stroke="#ef7038" stroke-width="2" fill="none"/>

      </g>

      <path d="M128 -204 C162 -200 198 -190 217 -181 C219 -179 218 -177 215 -178 C192 -181 158 -185 129 -187 Z"

            fill="#ffc247" stroke="#eaa63c" stroke-width="1.5"/>

      <path d="M146 -196 L158 -193" stroke="#eaa63c" stroke-width="2" stroke-linecap="round"/>

      <circle cx="124" cy="-20" r="5.5" fill="#fff" stroke="#d8cfc0" stroke-width="1"/>

      <circle cx="126" cy="-200" r="2.8" fill="#2303c"/>

      <circle cx="127.2" cy="-201.4" r="1" fill="#fff"/>

      <ellipse class="eyelid" cx="124" cy="-200" rx="6" ry="6.5" fill="#fdf9f1"/>

    </g>



    <!-- 近侧翅膀（扶把） -->

    <g id="wingN">

      <path d="M64 -148 C98 -162 14 -154 178 -130 C186 -124 184 -116 174 -119 C158 -124 146 -127 132 -128 C108 -130 82 -130 64 -136 Z"

            fill="#f8f1e3" stroke="#e0d5c0" stroke-width="2"/>

      <path d="M16 -140 C138 -138 156 -132 168 -125 M100 -146 C124 -146 148 -140 162 -132" stroke="#e6dcc8" stroke-width="2" fill="none"/>

    </g>



    <!-- 近侧腿 + 脚踏 -->

    <line id="thighN" x1="38" y1="-100" x2="92.5" y2="-80.3" stroke="#a4ad3b" stroke-width="11" stroke-linecap="round"/>

    <line id="shinN"  x1="92.5" y1="-80.3" x2="114" y2="-20" stroke="#b3bc45" stroke-width="9" stroke-linecap="round"/>

    <g id="pedalN" transform="translate(114,-20)">

      <rect x="-10" y="-1" width="20" height="5.5" rx="2" fill="#33404c"/>

      <path d="M-8 -1 C-8 -8 3 -9 9 -6 L15 -3 C16 -2 16 -1 15 0 L8 2 C2 4 -8 4 -8 -1 Z" fill="#ffa032"/>

      <path d="M4 -7 L5 -2 M9 -5 L9 0" stroke="#d97f22" stroke-width="1.5"/>

    </g>



    <!-- 风线 -->

    <g id="wind" opacity=".15" stroke="#ffffff" stroke-width="5" stroke-linecap="round">

      <line class="w" x1="-30" y1="-158" x2="-88" y2="-158"/>

      <line class="w" x1="-12" y1="-124" x2="-80" y2="-124" style="animation-delay:-.18s"/>

      <line class="w" x1="-26" y1="-96"  x2="-72" y2="-96"  style="animation-delay:-.36s"/>

    </g>



    <!-- 叫声气泡 -->

    <g transform="translate(150,-252)">

      <g id="bubble">

        <path d="M-8 8 L0 30 L16 8 Z" fill="#fffdf6" stroke="#173142" stroke-width="3"/>

        <rect x="-62" y="-38" width="124" height="48" rx="14" fill="#fffdf6" stroke="#173142" stroke-width="3"/>

        <path d="M-8 8 L0 30 L16 8 Z" fill="#fffdf6"/>

        <text x="0" y="-4" text-anchor="middle" font-size="26" fill="#ff6b4a"

              font-family="'ZCOOL KuaiLe','Noto Sans SC',sans-serif">嘎嘎!</text>

      </g>

    </g>

  </g>



  <rect width="1280" height="640" fill="url(#vig)" pointer-events="none"/>

</svg>



<!-- HUD -->

<header class="hud card title-card">

  <h1>鹈鹕骑行</h1>

  <p class="sub">PELICAN RIDE · 2D SVG</p>

</header>

<div class="hud card speed-card" id="speedCard">

  <span class="label"><span class="dot"></span>时速</span>

  <span class="speed"><b id="kmh">14</b><i>km/h</i></span>

</div>

<div class="hud hint">

  <span><kbd>空格</kbd> 或按住画面 → 冲刺</span>

  <span class="sep">·</span>

 <span>点一下鹈鹕，它会叫</span>

</div>



<script>

(function(){

  const $=id=>document.getElementById(id);

  const BASE=260, SPRINT=640, TILE=1280, R2D=180/Math.PI;

  let speed=BASE, sprinting=false;

  let crank=0, wheelA=0, chainOff=0, dashOff=0;

  let offF=0, offM=0, offN=0, offC1=0, offC2=0;



  const el={

    far:$('layerFar'),mid:$('layerMid'),near:$('layerNear'),c1:$('clouds1'),c2:$('clouds2'),

    dash:$('dashes'),spinR:$('spinR'),spinF:$('spinF'),crank:$('gCrank'),chain:$('chain'),

    pedN:$('pedalN'),pedF:$('pedalF'),

    thN:$('thighN'),shN:$('shinN'),thF:$('thighF'),shF:$('shinF'),

    body:$('bodyG'),wingN:$('wingN'),wingF:$('wingF'),pouch:$('pouch'),

    bike:$('bikeWorld'),wind:$('wind'),dust:$('dust'),kmh:$('kmh'),bubble:$('bubble')

  };



  // 曲柄中心 / 曲柄长 / 腿长

  const B={x:82,y:-20}, CR=32, L1=58, L2=64;

  const hipN={x:38,y:-100}, hipF={x:46,y:-102};



  const ped=a=>({x:B.x+CR*Math.cos(a), y:B.y+CR*Math.sin(a)});

  // 两骨 IK：髋 → 膝 → 脚

  function ik(h,f){

    let dx=f.x-h.x, dy=f.y-h.y, d=Math.hypot(dx,dy);

    const mn=Math.abs(L1-L2)+1, mx=L1+L2-1;

    if(d<mn)d=mn; if(d>mx)d=mx;

    const a=Math.atan2(dy,dx);

    const t=Math.acos(Math.max(-1,Math.min(1,(L1*L1+d*d-L2*L2)/(2*L1*d))));

    const ka=a-t; // 膝盖朝前弯曲

    return {x:h.x+L1*Math.cos(ka), y:h.y+L1*Math.sin(ka)};

  }

  function line(e,x1,y1,x2,y2){

    e.setAttribute('x1',x1.toFixed(1)); e.setAttribute('y1',y1.toFixed(1));

    e.setAttribute('x2',x2.toFixed(1)); e.setAttribute('y2',y2.toFixed(1));

  }



  let last=performance.now();

  function tick(now){

    const dt=Math.min(.05,(now-last)/1000); last=now;

    const tgt=sprinting?SPRINT:BASE;

    speed+=(tgt-speed)*Math.min(1,dt*(sprinting?2.4:1.5));

    const sf=Math.max(0,Math.min(1,(speed-BASE)/(SPRINT-BASE)));



    // 驱动量

    crank+=speed/58*1.9*dt;          // 曲柄角速度（带齿比）

    wheelA+=speed/58*dt;             // 车轮与路面速度严格一致

    chainOff-=speed*.62*dt;

    dashOff=(dashOff+speed*dt)%100;



    // 视差滚动

    offF=(offF+speed*.12*dt)%TILE;  offM=(offM+speed*.42*dt)%TILE;  offN=(offN+speed*dt)%TILE;

    offC1=(offC1+(14+speed*.045)*dt)%TILE; offC2=(offC2+(26+speed*.085)*dt)%TILE;

    el.far .setAttribute('transform','translate('+(-offF)+',0)');

    el.mid .setAttribute('transform','translate('+(-offM)+',0)');

    el.near.setAttribute('transform','translate('+(-offN)+',0)');

    el.c1  .setAttribute('transform','translate('+(-offC1)+',0)');

    el.c2  .setAttribute('transform','translate('+(-offC2)+',0)');

    el.dash .setAttribute('stroke-dashoffset',dashOff.toFixed(1));

    el.chain.setAttribute('stroke-dashoffset',chainOff.toFixed(1));



    // 车轮 / 牙盘

    const wd=(wheelA*R2D)%360, cd=(crank*R2D)%360;

    el.spinR.setAttribute('transform','rotate('+wd.toFixed(2)+')');

    el.spinF.setAttribute('transform','rotate('+wd.toFixed(2)+')');

    el.crank.setAttribute('transform','translate(82,-20) rotate('+cd.toFixed(2)+')');



    // 脚踏位置 + 双腿 IK

    const pN=ped(crank), pF=ped(crank+Math.PI);

    el.pedN.setAttribute('transform','translate('+pN.x.toFixed(1)+','+pN.y.toFixed(1)+')');

    el.pedF.setAttribute('transform','translate('+pF.x.toFixed(1)+','+pF.y.toFixed(1)+')');

    const kN=ik(hipN,pN), kF=ik(hipF,pF);

    line(el.thN,hipN.x,hipN.y,kN.x,kN.y); line(el.shN,kN.x,kN.y,pN.x,pN.y);

    line(el.thF,hipF.x,hipF.y,kF.x,kF.y); line(el.shF,kF.x,kF.y,pF.x,pF.y);



    // 身体起伏 / 翅膀推把 / 喉囊摆动（幅度随速度）

    const bobY=Math.sin(crank*2)*(1.1+1.7*sf);

    const bobR=Math.sin(crank*2+.55)*(.5+.9*sf);

    el.body .setAttribute('transform','translate(0,'+bobY.toFixed(2)+') rotate('+bobR.toFixed(2)+' 40 -106)');

    const wr=Math.sin(crank-.45)*(2.6+2.6*sf);

    el.wingN.setAttribute('transform','rotate('+wr.toFixed(2)+' 66 -138)');

    el.wingF.setAttribute('transform','rotate('+(-wr*.8).toFixed(2)+' 76 -132)');

    el.pouch.setAttribute('transform','rotate('+(Math.sin(crank+.9)*(1.4+1.6*sf)).toFixed(2)+' 130 -188)');



    // 冲刺时车身前倾

    el.bike.setAttribute('transform','translate(560,462) rotate('+(-1.5*sf).toFixed(2)+' 178 58)');

    el.wind.setAttribute('opacity',(0.12+0.88*sf).toFixed(2));

    el.dust.setAttribute('opacity',(0.25+0.6*sf).toFixed(2));



    el.kmh.textContent=Math.round(speed*.055);

    document.body.classList.toggle('sprinting',sf>.55);

    requestAnimationFrame(tick);

  }

  requestAnimationFrame(tick);



  // ---------- 交互 ----------

  let holding=false, holdT=0, holdX=0, holdY=0;

  const svg=$('scene');

  const setSprint=v=>{sprinting=v;};

  svg.addEventListener('pointerdown',e=>{

    holding=true; holdT=performance.now(); holdX=e.clientX; holdY=e.clientY; setSprint(true);

  });

  window.addEventListener('pointerup',e=>{

    if(holding){

      const d=performance.now()-holdT;

      if(d<260 && Math.hypot(e.clientX-holdX,e.clientY-holdY)<12) quack();

    }

    holding=false; setSprint(false);

  });

  window.addEventListener('pointercancel',()=>{holding=false;setSprint(false);});

  window.addEventListener('keydown',e=>{

    if(e.code==='Space'&&!e.repeat){e.preventDefault();setSprint(true);}

  });

  window.addEventListener('keyup',e=>{if(e.code==='Space')setSprint(false);});

  svg.addEventListener('contextmenu',e=>e.preventDefault());



  let qt;

  function quack(){

    el.bubble.classList.add('show');

    clearTimeout(qt);

    qt=setTimeout(()=>el.bubble.classList.remove('show'),1200);

  }

})();

</script>

</body>

</html>

Qwen3.8-27B-Q4_K_M.gguf，部署在RTX3090 24G，


启动参数：


~/llama.cpp/build/bin/llama-server \

    -m  /root/models/Qwen3.8-27B-Q4_K_M.gguf \

    -ngl 99 \

    -ctk q4_1 -ctv q4_1 \

    --spec-type draft-mtp --spec-draft-n-max 1 \

    --reasoning-preserve \

    -c 150000 --jinja -fa on \

    --host 0.0.0.0 \

    --port 49444

内存占用如下：




实际速度：


最新回复 (13)
  • 野菜大冒险 08-15 00:59
    1楼

    s试试别的?骑摩托车?骑北极熊，，，看看是不是专门刷过的，，，

  • zhe 08-15 00:59
    2楼

    看起来感觉不错呢，这是个小模型吧？

  • 赤足行进 08-15 01:00
    3楼

    怎么感觉一个27b在这题上把ds4f按在地上摩擦呢

  • pttsrd 08-15 01:03
    4楼

    来点秦王绕柱，秦始皇骑北极熊 ^-^

  • AdventCirno 08-15 01:04
    5楼

    嘿，还真有模有样，不会是特地训练了这个吧

  • kooo13579 08-15 01:05
    6楼

    摩托车骑北极熊???/?

  • pony 08-15 01:06
    7楼

    做的有模有样的啊，这小模型真的假的

  • dawnsail 08-15 01:08
    8楼

    期待有一天，小模型全面能力都跟这个鹈鹕页面一样…那差不多就token自由了

  • 996 楼主 08-15 01:18
    9楼

    佬们我最多再测一个“鹈鹕骑摩托车”，因为这个qwen3.8-27B感觉思考特别久，我40-60t/s，要等好几分钟才写出来。


    以下为刚刚跑的“鹈鹕骑摩托车”：




    代码：


    <!DOCTYPE html>
    
<html lang="zh-CN">
    
<head>
    
<meta charset="UTF-8">
    
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    
<title>海风骑士 · 鹈鹕骑摩托</title>
    
<link rel="preconnect" href="https://fonts.googleapis.com">
    
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
    
<style>
    
:root{
    
  --ink:#eaf6f5; --mut:#9cc4c8; --bg:#0c323b; --panel:#0f3d47;
    
  --amber:#ffd23f; --orange:#ff6b35; --red:#e8442e; --teal:#35d0ba;
    
  --disp:'ZCOOL KuaiLe','Noto Sans SC',sans-serif;
    
  --body:'Noto Sans SC',sans-serif;
    
}
    
*{margin:0;padding:0;box-sizing:border-box}
    
html{scroll-behavior:smooth}
    
body{
    
  font-family:var(--body); color:var(--ink); min-height:100vh;
    
  background:
    
    radial-gradient(900px 520px at 88% -10%, rgba(255,210,63,.12), transparent 60%),
    
    radial-gradient(820px 620px at -8% 12%, rgba(53,208,186,.12), transparent 60%),
    
    var(--bg);
    
  overflow-x:hidden;
    
}
    
body::before{
    
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
    
  background-image:radial-gradient(rgba(234,246,245,.055) 1.5px, transparent 1.5px);
    
  background-size:26px 26px;
    
}
    
.wrap{position:relative; z-index:1; max-width:1120px; margin:0 auto; padding:0 22px 60px}
    

    
/* ---------- 顶栏 ---------- */
    
header{
    
 display:flex; align-items:center; justify-content:space-between; gap:14px;
    
  padding:18px 4px 14px; border-bottom:1px dashed rgba(234,246,245,.22);
    
}
    
.brand{display:flex; align-items:center; gap:12px}
    
.brand svg{width:40px; height:40px; filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}
    
.brand b{font-family:var(--disp); font-size:22px; letter-spacing:2px; font-weight:400}
    
.brand span{font-size:11px; letter-spacing:3px; color:var(--mut); display:block; margin-top:2px}
    
.badge{
    
  font-size:12px; letter-spacing:2px; color:var(--amber);
    
  border:1px solid rgba(255,210,63,.45); padding:6px 12px; border-radius:999px;
    
  background:rgba(255,210,63,.06); white-space:nowrap;
    
}
    

    
/* ---------- 标题区 ---------- */
    
.title-row{
    
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;
    
  padding:34px 4px 22px;
    
}
    
h1{
    
 font-family:var(--disp); font-weight:400; line-height:.95;
    
  font-size:clamp(46px,7.5vw,82px); letter-spacing:4px;
    
  text-shadow:0 5px 0 rgba(4,20,24,.55);
    
}
    
h1 em{font-style:normal; color:var(--amber)}
    
.sub{max-width:420px; color:var(--mut); font-size:15px; line-height:1.8; padding-bottom:8px}
    
.sub b{color:var(--teal); font-weight:700}
    
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
    
.chip{
    
  font-size:12px; color:var(--amber); border:1px solid rgba(255,210,63,.4);
    
  padding:5px 12px; border-radius:999px; background:rgba(255,210,63,.05);
    
  transition:transform .2s, background .2s;
    
}
    
.chip:hover{transform:translateY(-3px); background:rgba(255,210,63,.14)}
    

    
/* ---------- 舞台 ---------- */
    
.stage{
    
  position:relative; border:3px solid var(--amber); border-radius:16px; overflow:hidden;
    
  box-shadow:12px 12px 0 rgba(4,20,24,.55); background:#4fb7e8; user-select:none;
    
  transition:box-shadow .3s, border-color .3s;
    
}
    
.stage:hover{box-shadow:16px 16px 0 rgba(4,20,24,.55)}
    
#scene{display:block; width:100%; height:auto}
    
.hud{
    
  position:absolute; font-size:11px; letter-spacing:2px; color:#fff;
    
  background:rgba(8,26,32,.55); padding:6px 12px; border-radius:8px;
    
  backdrop-filter:blur(2px); pointer-events:none;
    
}
    
.hud-live{top:14px; left:14px; display:flex; align-items:center; gap:8px}
    
.hud-live i{width:9px; height:9px; border-radius:50%; background:#ff3b30; animation:pulse 1.2s ease-in-out infinite}
    
.hud-fps{bottom:14px; right:14px; color:var(--amber)}
    
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}
    

    
/* ---------- 控制台 ---------- */
    
.deck{
    
  display:flex; align-items:center; gap:16px 26px; flex-wrap:wrap;
    
  margin-top:26px; padding:18px 22px;
    
  background:var(--panel); border:1px solid rgba(255,255,255,.09); border-radius:14px;
    
  box-shadow:0 10px 30px rgba(0,0,0,.3);
    
}
    
.horn{
    
  font-family:var(--disp); font-size:22px; letter-spacing:3px; color:#fff;
    
  background:var(--red); border:none; border-radius:12px; padding:14px 26px; cursor:pointer;
    
  box-shadow:0 7px 0 #7c1d10; transition:transform .08s, box-shadow .08s, filter .2s;
    
}
    
.horn:hover{filter:brightness(1.08)}
    
.horn:active{transform:translateY(5px); box-shadow:0 2px 0 #7c1d10}
    
.horn small{display:block; font-family:var(--body); font-size:10px; letter-spacing:2px; opacity:.85; margin-top:2px}
    
.ctl{display:flex; flex-direction:column; gap:8px}
    
.ctl label{font-size:12px; letter-spacing:3px; color:var(--mut)}
    
.ctl label b{color:var(--amber); font-family:var(--disp); font-weight:400; letter-spacing:1px; margin-left:6px}
    
.slider-row{display:flex; align-items:center; gap:14px}
    
input[type=range]{
    
 -webkit-appearance:none; appearance:none; width:220px; height:8px; border-radius:9px;
    
  background:linear-gradient(90deg, var(--teal), var(--amber), var(--red)); outline:none; cursor:pointer;
    
}
    
input[type=range]::-webkit-slider-thumb{
    
 -webkit-appearance:none; width:24px; height:24px; border-radius:50%;
    
  background:#fff; border:4px solid var(--red); box-shadow:0 3px 8px rgba(0,0,0,.4);
    
  transition:transform .15s;
    
}
    
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
    
input[type=range]::-moz-range-thumb{
    
  width:20px; height:20px; border-radius:50%; background:#fff; border:4px solid var(--red);
    
  box-shadow:0 3px 8px rgba(0,0,0,.4);
    
}
    
.kmh{
    
  font-family:var(--disp); font-size:20px; color:var(--amber); min-width:96px; text-align:center;
    
  background:rgba(255,210,63,.08); border:1px solid rgba(255,210,63,.4); border-radius:10px; padding:8px 6px;
    
}
    
.kmh small{font-size:11px; color:var(--mut); font-family:var(--body); letter-spacing:1px}
    
/* 昼夜开关 */
    
.switch{position:relative; display:inline-block; width:72px; height:34px; cursor:pointer}
    
.switch input{opacity:0; width:0; height:0}
    
.track{
    
  position:absolute; inset:0; border-radius:99px; background:#123c46;
    
  border:2px solid rgba(255,210,63,.5); transition:background .5s;
    
}
    
.track::before{content:"☀"; position:absolute; left:7px; top:4px; font-size:14px; color:var(--amber)}
    
.track::after{content:"☾"; position:absolute; right:8px; top:4px; font-size:13px; color:#8fa3d8}
    
.knob{
    
  position:absolute; top:3px; left:4px; width:26px; height:26px; border-radius:50%;
    
  background:var(--amber); box-shadow:0 2px 6px rgba(0,0,0,.4);
    
  transition:transform .4s cubic-bezier(.6,-0.3,.3,1.4), background .4s;
    
}
    
.switch input:checked + .track{background:#1b2a52}
    
.switch input:checked + .track .knob,
    
.switch input:checked ~ .knob{transform:translateX(38px); background:#f2efdc}
    
.hint{margin-left:auto; font-size:12px; color:var(--mut); letter-spacing:1px; line-height:1.9; text-align:right}
    
.hint kbd{
    
  font-family:var(--body); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
    
  border-bottom-width:3px; border-radius:6px; padding:2px 8px; font-size:11px;
    
}
    

    
/* ---------- 跑马灯 ---------- */
    
.marquee{
    
  margin-top:34px; background:var(--amber); color:#0c323b; border-radius:10px;
    
  border:3px solid #082228; box-shadow:8px 8px 0 rgba(4,20,24,.5);
    
  overflow:hidden; padding:10px 0;
    
}
    
.marquee-track{display:inline-flex; white-space:nowrap; animation:marq 16s linear infinite}
    
.marquee-track span{font-family:var(--disp); font-size:19px; letter-spacing:4px; padding:0 18px}
    
@keyframes marq{to{transform:translateX(-50%)}}
    

    
/* ---------- 冷知识 ---------- */
    
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:30px}
    
.fact{
    
  border-left:3px solid var(--teal); padding:6px 4px 6px 16px;
    
  transition:transform .25s, border-color .25s;
    
}
    
.fact:hover{transform:translateX(6px); border-color:var(--amber)}
    
.fact b{font-family:var(--disp); font-weight:400; font-size:26px; color:var(--amber); display:block; margin-bottom:4px}
    
.fact p{font-size:13px; color:var(--mut); line-height:1.8}
    
footer{margin-top:36px; text-align:center; font-size:12px; color:var(--mut); letter-spacing:2px}
    

    
/* ---------- 入场 ---------- */
    
.reveal{animation:rise .7s both}
    
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}.d4{animation-delay:.35s}.d5{animation-delay:.45s}
    
@keyframes rise{from{opacity:0; transform:translateY(20px)}to{opacity:1; transform:none}}
    

    
/* =============== SVG 动画 =============== */
    
#scene{
    
  --d-wheel:.5s; --d-dash:.45s; --d-palms:6s; --d-hills:12s; --d-far:16s;
    
  --d-waves:7s; --d-waves2:4.6s; --d-bob:.42s; --d-puff:1.3s; --d-lines:.55s;
    
  --d-neck:2.6s; --d-wing:1.15s; --d-tail:1.8s; --d-cloud:80s;
    
}
    
@keyframes spin{to{transform:rotate(360deg)}}
    
@keyframes scrollx{to{transform:translateX(-960px)}}
    
@keyframes dashmove{to{stroke-dashoffset:130}}
    
@keyframes bob{0%,100%{transform:translateY(0) rotate(.2deg)}50%{transform:translateY(3px) rotate(-.4deg)}}
    
@keyframes sway{0%,100%{transform:rotate(-2.4deg)}50%{transform:rotate(2.4deg)}}
    
@keyframes flap{0%,100%{transform:rotate(5deg)}50%{transform:rotate(-9deg)}}
    
@keyframes tailwag{0%,100%{transform:rotate(2.5deg)}50%{transform:rotate(-5deg)}}
    
@keyframes scarfflap{0%,100%{transform:rotate(6deg) scaleX(1.02)}50%{transform:rotate(-7deg) scaleX(.94)}}
    
@keyframes puff{
    
  0%{transform:translate(0,0) scale(.4); opacity:0}
    
  15%{opacity:.85}
    
  100%{transform:translate(-72px,-48px) scale(1.7); opacity:0}
    
}
    
@keyframes streak{
    
  0%{transform:translateX(0); opacity:0}
    
  20%{opacity:.7}
    
  100%{transform:translateX(-150px); opacity:0}
    
}
    
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
    
@keyframes pop{
    
  0%{transform:scale(.3); opacity:0}
    
  30%{transform:scale(1.08); opacity:1}
    
  60%{transform:scale(1); opacity:1}
    
  100%{transform:scale(.3); opacity:0}
    
}
    
@keyframes honkPouch{0%,100%{transform:rotate(0) scale(1)}40%{transform:rotate(11deg) scale(1.14)}}
    
@keyframes honkNeck{0%,100%{transform:rotate(0)}40%{transform:rotate(-7deg)}}
    

    
.spin-wheel{transform-box:view-box; animation:spin var(--d-wheel) linear infinite}
    
.spin-wheel.r{transform-origin:330px 493px}
    
.spin-wheel.f{transform-origin:650px 493px}
    
.sun-rays{transform-box:view-box; transform-origin:800px 120px; animation:spin 26s linear infinite}
    
.clouds{animation:scrollx var(--d-cloud) linear infinite}
    
.hills-far{animation:scrollx var(--d-far) linear infinite}
    
.hills-near{animation:scrollx var(--d-hills) linear infinite}
    
.wave1{animation:scrollx var(--d-waves) linear infinite}
    
.wave2{animation:scrollx var(--d-waves2) linear infinite}
    
.palms{animation:scrollx var(--d-palms) linear infinite}
    
.dashline{animation:dashmove var(--d-dash) linear infinite}
    
#rig{transform-box:view-box; transform-origin:490px 545px; animation:bob var(--d-bob) ease-in-out infinite}
    
.neck{transform-box:view-box; transform-origin:472px 400px; animation:sway var(--d-neck) ease-in-out infinite}
    
.wing{transform-box:view-box; transform-origin:432px 396px; animation:flap var(--d-wing) ease-in-out infinite}
    
.tail{transform-box:view-box; transform-origin:322px 420px; animation:tailwag var(--d-tail) ease-in-out infinite}
    
.scarf{transform-box:view-box; transform-origin:552px 322px; animation:scarfflap var(--d-wing) ease-in-out infinite}
    
.puff{transform-box:fill-box; transform-origin:center; animation:puff var(--d-puff) linear infinite}
    
.sline{animation:streak var(--d-lines) linear infinite}
    
.star{animation:twinkle 2.2s ease-in-out infinite}
    

    
/* 鸣叫 */
    
.pouch{transform-box:view-box; transform-origin:584px 304px}
    
.bubble{transform-box:view-box; transform-origin:645px 252px; opacity:0}
    
#scene.honking .pouch{animation:honkPouch .5s ease-in-out 2}
    
#scene.honking .neck{animation:honkNeck .55s ease-in-out 2}
    
#scene.honking .bubble{animation:pop .52s ease-out 2}
    
#pelican{cursor:pointer}
    

    
/* 昼夜 */
    
.sky-night,.moon,.dim,.beam,.tailglow{transition:opacity 1.1s ease}
    
.sky-night{opacity:0}.moon{opacity:0}.dim{opacity:0}.beam{opacity:0}.tailglow{opacity:0}
    
.sun{transition:opacity 1.1s ease}
    
#scene.night .sky-night{opacity:1}
    
#scene.night .sun{opacity:0}
    
#scene.night .moon{opacity:1}
    
#scene.night .dim{opacity:.42}
    
#scene.night .beam{opacity:.75}
    
#scene.night .tailglow{opacity:1}
    
#scene.night .star{opacity:1}
    

    
#pelican:hover ~ .bubble{opacity:0}
    
@media (prefers-reduced-motion:reduce){
    
  .clouds,.hills-far,.hills-near,.wave1,.wave2,.palms,.sline,.marquee-track,.sun-rays{animation:none}
    
}
    
@media (max-width:640px){
    
  .hint{display:none}
    
  input[type=range]{width:150px}
    
}
    
</style>
    
</head>
    
<body>
    
<div class="wrap">
    

    
  <header class="reveal d1">
    
    <div class="brand">
    
      <svg viewBox="0 0 40 40" aria-hidden="true">
    
        <circle cx="17" cy="16" r="12" fill="#fff"/>
    
        <path d="M24 11 L40 17 L24 22 Z" fill="#ff8c1a"/>
    
        <path d="M24 20 Q32 31 19 29 L24 22 Z" fill="#ff6b35"/>
    
        <circle cx="21" cy="13" r="2.4" fill="#22303c"/>
    
        <path d="M8 26 A12 12 0 0 1 26 24 L26 28 Q17 22 9 30 Z" fill="#ffd23f"/>
    
      </svg>
    
      <div><b>鹈鹕骑士</b><span>PELICAN RIDER</span></div>
    
    </div>
    
    <div class="badge">海岸线 No.001 · 纯 SVG 2D 动画</div>
    
  </header>
    

    
  <section class="title-row reveal d2">
    
    <h1>海风<em>骑士</em></h1>
    
    <div>
    
      <p class="sub">一只< b>大白鹈鹕</b>、一台老式巡航摩托、一条永远吹着海风的公路。<br>车轮在转,浪花在追,喉囊里装着整个下午。</p>
    
      <div class="chips">
    
        <span class="chip">翼展 2.4 m</span>
    
        <span class="chip">喉囊 ≈ 13 L</span>
    
        <span class="chip">巡航 55 km/h</span>
    
        <span class="chip">安全头盔 ✓</span>
    
      </div>
    
    </div>
    
  </section>
    

    
  <section class="stage reveal d3">
    
    <svg id="scene" viewBox="0 0 960 600" role="img" aria-label="鹈鹕骑摩托车动画">
    
      <defs>
    
        <linearGradient id="skyDay" x1="0" y1="0" x2="0" y2="1">
    
          <stop offset="0" stop-color="#4fb7e8"/><stop offset=".7" stop-color="#a8e4f5"/><stop offset="1" stop-color="#ffe9a8"/>
    
        </linearGradient>
    
        <linearGradient id="skyNight" x1="0" y1="0" x2="0" y2="1">
    
          <stop offset="0" stop-color="#0e1a38"/><stop offset=".65" stop-color="#24365e"/><stop offset="1" stop-color="#4a4470"/>
    
        </linearGradient>
    
        <linearGradient id="beam" x1="0" y1="0" x2="1" y2="0">
    
          <stop offset="0" stop-color="#fff3b0" stop-opacity=".85"/><stop offset="1" stop-color="#fff3b0" stop-opacity="0"/>
    
        </linearGradient>
    
        <g id="cloud">
    
          <ellipse cx="0" cy="0" rx="46" ry="20" fill="#fff"/>
    
          <ellipse cx="36" cy="-12" rx="34" ry="17" fill="#fff"/>
    
          <ellipse cx="-34" cy="-8" rx="29" ry="14" fill="#fff"/>
    
        </g>
    
        <g id="palm">
    
          <path d="M0 0 C-5 -30 -3 -60 10 -84" stroke="#8a5a33" stroke-width="10" fill="none" stroke-linecap="round"/>
    
          <path d="M10 -84 Q-28 -98 -50 -80 Q-24 -86 10 -78 Z" fill="#1f8a5f"/>
    
          <path d="M10 -84 Q-14 -116 -40 -112 Q-12 -96 10 -80 Z" fill="#27a06b"/>
    
          <path d="M10 -84 Q26 -118 52 -112 Q26 -98 10 -80 Z" fill="#1f8a5f"/>
    
          <path d="M10 -84 Q44 -100 58 -80 Q34 -88 10 -78 Z" fill="#27a06b"/>
    
          <path d="M10 -84 Q10 -118 22 -124 Q18 -100 10 -84 Z" fill="#2fb87c"/>
    
          <circle cx="6" cy="-80" r="4" fill="#6b4423"/><circle cx="15" cy="-82" r="4" fill="#6b4423"/>
    
        </g>
    
      </defs>
    

    
      <!-- 天空 -->
    
      <rect width="960" height="400" fill="url(#skyDay)"/>
    
      <rect class="sky-night" width="960" height="400" fill="url(#skyNight)"/>
    

    
      <!-- 星星 -->
    
      <g fill="#fff">
    
        <circle class="star" cx="90" cy="70" r="2.4" style="animation-delay:-.2s"/>
    
        <circle class="star" cx="210" cy="140" r="1.8" style="animation-delay:-.9s"/>
    
        <circle class="star" cx="330" cy="58" r="2.2" style="animation-delay:-1.5s"/>
    
        <circle class="star" cx="450" cy="110" r="1.6" style="animation-delay:-.5s"/>
    
        <circle class="star" cx="560" cy="48" r="2.4" style="animation-delay:-1.9s"/>
    
        <circle class="star" cx="660" cy="150" r="1.7" style="animation-delay:-1.1s"/>
    
        <circle class="star" cx="150" cy="210" r="1.6" style="animation-delay:-2.1s"/>
    
        <circle class="star" cx="720" cy="58" r="2" style="animation-delay:-.7s"/>
    
        <circle class="star" cx="890" cy="230" r="2.2" style="animation-delay:-1.7s"/>
    
        <circle class="star" cx="60" cy="150" r="1.8" style="animation-delay:-.35s"/>
    
        <circle class="star" cx="380" cy="190" r="1.5" style="animation-delay:-2.4s"/>
    
        <circle class="star" cx="905" cy="120" r="1.7" style="animation-delay:-1.3s"/>
    
      </g>
    

    
      <!-- 太阳 / 月亮 -->
    
      <g class="sun">
    
        <g class="sun-rays" stroke="#ffd23f" stroke-width="7" stroke-linecap="round">
    
          <line x1="856" y1="120" x2="878" y2="120"/><line x1="74" y1="120" x2="722" y2="120"/>
    
          <line x1="800" y1="64"  x2="800" y2="42"/><line x1="800" y1="176" x2="800" y2="198"/>
    
          <line x1="839" y1="81"  x2="855" y2="65"/><line x1="761" y1="159" x2="745" y2="175"/>
    
          <line x1="839" y1="159" x2="85" y2="175"/><line x1="761" y1="81" x2="745" y2="65"/>
    
        </g>
    
        <circle cx="800" cy="120" r="44" fill="#ffd23f"/>
    
        <circle cx="800" cy="120" r="34" fill="#ffe27a"/>
    
      </g>
    
      <g class="moon">
    
        <circle cx="800" cy="120" r="34" fill="#f2efdc"/>
    
        <circle cx="788" cy="110" r="6" fill="#d8d3b8"/><circle cx="812" cy="128" r="4" fill="#d8d3b8"/><circle cx="802" cy="101" r="3" fill="#d8d3b8"/>
    
      </g>
    

    
      <!-- 云(两层无缝) -->
    
      <g class="clouds" opacity=".95">
    
        <use href="#cloud" x="140" y="95"/><use href="#cloud" x="500" y="165" transform="scale(1)"/>
    
        <use href="#cloud" x="730" y="70"/>
    
        <use href="#cloud" x="1100" y="95"/><use href="#cloud" x="1460" y="165"/><use href="#cloud" x="1690" y="70"/>
    
      </g>
    

    
      <!-- 远山(视差) -->
    
      <g class="hills-far" fill="#7cc9b4" opacity=".85">
    
        <path d="M0 400 L0 352 Q160 300 320 344 Q470 384 620 332 Q780 296 960 348 L960 400 Z"/>
    
        <path d="M960 400 L960 352 Q1120 300 1280 344 Q1430 384 1580 332 Q1740 296 1920 348 L1920 400 Z"/>
    
      </g>
    
      <g class="hills-near" fill="#3aa08a">
    
        <path d="M0 400 L0 372 Q200 330 400 368 Q560 398 720 356 Q860 326 960 368 L960 400 Z"/>
    
        <path d="M960 400 L960 372 Q1160 330 1360 368 Q1520 398 1680 356 Q1820 326 1920 368 L1920 400 Z"/>
    
      </g>
    

    
      <!-- 海 -->
    
      <rect y="400" width="960" height="70" fill="#1787a0"/>
    
      <g class="wave1" fill="#2fa3b8">
    
        <path d="M0 418 Q60 402 120 418 T240 418 T360 418 T480 418 T600 418 T720 418 T840 418 T960 418 T1080 418 T1200 418 T1320 418 T1440 418 T1560 418 T1680 418 T1800 418 T1920 418 L1920 470 L0 470 Z"/>
    
      </g>
    
      <g class="wave2" fill="#55c2d4">
    
        <path d="M0 436 Q60 420 120 436 T240 436 T360 436 T480 436 T600 436 T720 436 T840 436 T960 436 T1080 436 T1200 436 T1320 436 T1440 436 T1560 436 T1680 436 T1800 436 T1920 436 L1920 470 L0 470 Z"/>
    
      </g>
    

    
      <!-- 路 -->
    
      <rect y="470" width="960" height="130" fill="#454f5c"/>
    
      <rect y="470" width="960" height="8" fill="#5a6575"/>
    
      <line x1="0" y1="500" x2="960" y2="500" stroke="#e8eef2" stroke-width="3" opacity=".3"/>
    
      <line class="dashline" x1="-80" y1="585" x2="1040" y2="585" stroke="#ffd23f" stroke-width="10" stroke-dasharray="70 60"/>
    

    
      <!-- 椰子树(近景视差,骑在路远端) -->
    
      <g class="palms">
    
        <use href="#palm" x="150" y="470"/>
    
        <use href="#palm" x="640" y="470" transform="translate(640,470) scale(.8) translate(-640,-470)"/>
    
        <use href="#palm" x="1110" y="470"/>
    
        <use href="#palm" x="1600" y="470" transform="translate(1600,470) scale(.8) translate(-1600,-470)"/>
    
      </g>
    

    
      <!-- 夜暗层 -->
    
      <rect class="dim" y="400" width="960" height="200" fill="#071e26"/>
    

    
      <!-- 速度线 -->
    
      <g stroke="#fff" stroke-width="5" stroke-linecap="round" opacity=".8">
    
        <line class="sline" x1="60"  y1="245" x2="190" y2="245" style="animation-delay:0s"/>
    
        <line class="sline" x1="30"  y1="315" x2="150" y2="315" style="animation-delay:-.2s"/>
    
        <line class="sline" x1="80"  y1="375" x2="205" y2="375" style="animation-delay:-.38s"/>
    
        <line class="sline" x1="45"  y1="445" x2="165" y2="445" style="animation-delay:-.12s"/>
    
      </g>
    

    
      <!-- 车影 -->
    
      <ellipse cx="490" cy="547" rx="195" ry="12" fill="#082228" opacity=".32"/>
    

    
      <!-- 尾气 -->
    
      <g fill="#cfd8e3">
    
        <circle class="puff" cx="252" cy="504" r="7"  style="animation-delay:0s"/>
    
        <circle class="puff" cx="250" cy="508" r="9"  style="animation-delay:-.45s"/>
    
        <circle class="puff" cx="254" cy="502" r="6"  style="animation-delay:-.9s"/>
    
      </g>
    

    
      <!-- ============ 车 + 鹈鹕 ============ -->
    
      <g id="rig">
    
        <!-- 后轮 -->
    
        <g>
    
          <circle cx="330" cy="493" r="52" fill="#232a33"/>
    
          <circle cx="330" cy="493" r="36" fill="#1c232b"/>
    
          <g class="spin-wheel r" stroke="#cfd8e3" stroke-width="5" stroke-linecap="round">
    
            <line x1="330" y1="457" x2="330" y2="529"/><line x1="294" y1="493" x2="366" y2="493"/>
    
            <line x1="304" y1="467" x2="356" y2="519"/><line x1="356" y1="467" x2="304" y2="519"/>
    
          </g>
    
          <circle cx="330" cy="493" r="7" fill="#e8eef2"/>
    
        </g>
    

    
        <!-- 排气管 / 发动机 / 车架 -->
    
        <path d="M350 500 L465 494" stroke="#9aa7b5" stroke-width="8" stroke-linecap="round"/>
    
        <rect x="253" y="497" width="95" height="16" rx="8" fill="#9aa7b5"/>
    
        <circle cx="255" cy="505" r="8" fill="#6b7686"/>
    
        <line x1="330" y1="493" x2="455" y2="488" stroke="#22303c" stroke-width="8"/>
    
        <rect x="445" y="468" width="75" height="48" rx="10" fill="#38424f"/>
    
        <line x1="455" y1="480" x2="510" y2="480" stroke="#232a33" stroke-width="3"/>
    
        <line x1="455" y1="492" x2="510" y2="492" stroke="#232a33" stroke-width="3"/>
    
        <line x1="455" y1="504" x2="510" y2="504" stroke="#232a33" stroke-width="3"/>
    
        <circle cx="482" cy="492" r="10" fill="#9aa7b5"/>
    
        <line x1="455" y1="488" x2="540" y2="430" stroke="#22303c" stroke-width="10"/>
    
        <line x1="540" y1="430" x2="614" y2="402" stroke="#22303c" stroke-width="12"/>
    

    
        <!-- 座椅 / 油箱 / 挡泥板 -->
    
        <path d="M345 452 L435 440 Q450 438 452 450 L448 462 Q390 468 350 462 Z" fill="#22303c"/>
    
        <path d="M440 458 Q445 415 505 410 Q565 407 585 432 Q592 444 580 452 Q520 466 458 462 Q442 462 40 458 Z" fill="#e8442e"/>
    
        <path d="M470 422 Q510 412 550 422" stroke="#ff7a5c" stroke-width="6" stroke-linecap="round" fill="none" opacity=".85"/>
    
        <path d="M275.5 473 A58 58 0 0 1 384.5 473" stroke="#e8442e" stroke-width="11" fill="none" stroke-linecap="round"/>
    
        <circle cx="283" cy="466" r="5" fill="#ff3b30"/>
    
        <circle class="tailglow" cx="283" cy="466" r="11" fill="#ff3b30" opacity="0"/>
    

    
        <!-- 前叉 / 前轮 / 车把 / 大灯 -->
    
        <line x1="650" y1="493" x2="614" y2="404" stroke="#9aa7b5" stroke-width="7"/>
    
        <g>
    
          <circle cx="650" cy="493" r="52" fill="#232a33"/>
    
          <circle cx="650" cy="493" r="36" fill="#1c232b"/>
    
          <g class="spin-wheel f" stroke="#cfd8e3" stroke-width="5" stroke-linecap="round">
    
            <line x1="650" y1="457" x2="650" y2="529"/><line x1="614" y1="493" x2="686" y2="493"/>
    
            <line x1="624" y1="467" x2="676" y2="519"/><line x1="676" y1="467" x2="624" y2="519"/>
    
          </g>
    
          <circle cx="650" cy="493" r="7" fill="#e8eef2"/>
    
        </g>
    
        <path d="M605.6 455.7 A58 58 0 0 1 704.5 473.2" stroke="#e8442e" stroke-width="11" fill="none" stroke-linecap="round"/>
    
        <path d="M614 404 Q600 380 582 372" stroke="#22303c" stroke-width="8" fill="none" stroke-linecap="round"/>
    
        <circle cx="582" cy="372" r="6" fill="#22303c"/>
    
        <line x1="588" y1="374" x2="578" y2="352" stroke="#22303c" stroke-width="3"/>
    
        <ellipse cx="576" cy="348" rx="7" ry="5" fill="#cfd8e3"/>
    
        <polygon class="beam" points="654,402 960,330 960,470 654,428" fill="url(#beam)"/>
    
        <circle cx="640" cy="414" r="15" fill="#ffd23f" stroke="#22303c" stroke-width="4"/>
    

    
        <!-- ============ 鹈鹕 ============ -->
    
        <g id="pelican">
    
          <title>戳戳鹈鹕 → 鸣叫</title>
    
          <!-- 尾羽 -->
    
          <path class="tail" d="M320 438 L276 430 L318 416 L284 400 L326 408 Z" fill="#f2f7fa"/>
    
          <!-- 身体 -->
    
          <path d="M318 436 Q310 392 352 376 Q400 358 448 372 Q486 384 492 412 Q496 436 470 48 Q420 462 362 456 Q326 452 318 436 Z" fill="#fff"/>
    
          <path d="M330 448 Q400 462 468 446 Q440 458 380 456 Q344 452 330 448 Z" fill="#dfe9ee" opacity=".85"/>
    
          <!-- 翅膀 -->
    
          <path class="wing" d="M438 386 Q478 398 462 428 Q40 48 388 440 Q360 434 350 420 Q396 434 430 414 Q448 404 438 386 Z" fill="#e6eef4"/>
    
          <!-- 腿 -->
    
          <path d="M418 446 L436 484" stroke="#e09a12" stroke-width="10" stroke-linecap="round"/>
    
          <path d="M430 48 L448 486" stroke="#ffb020" stroke-width="10" stroke-linecap="round"/>
    
          <path d="M48 486 L482 490 L48 497 Z" fill="#ffb020"/>
    
          <line x1="452" y1="500" x2="492" y2="500" stroke="#2303c" stroke-width="5" stroke-linecap="round"/>
    
          <!-- 脖子 + 头 -->
    
          <g class="neck">
    
            <path d="M474 402 C516 38 542 366 550 336 C55 318 558 306 56 298" stroke="#fff" stroke-width="26" fill="none" stroke-linecap="round"/>
    
            <path d="M476 408 C514 394 536 372 544 344" stroke="#dfe9ee" stroke-width="7" fill="none" stroke-linecap="round" opacity=".7"/>
    
            <circle cx="568" cy="294" r="25" fill="#fff"/>
    
            <!-- 下喙 + 喉囊 -->
    
            <g class="pouch">
    
              <path d="M584 304 L688 310 Q660 340 612 336 Q586 332 584 304 Z" fill="#ff6b35"/>
    
            </g>
    
            <!-- 上喙 -->
    
            <path d="M584 288 L700 302 Q706 306 700 310 L590 306 Q580 300 584 288 Z" fill="#ff8c1a"/>
    
            <path d="M590 294 L694 304" stroke="#e07000" stroke-width="2"/>
    
            <!-- 眼睛 -->
    
            <circle cx="576" cy="286" r="5" fill="#22303c"/>
    
            <circle cx="578" cy="284" r="1.8" fill="#fff"/>
    
            <!-- 头盔 -->
    
            <path d="M543 292 A25 25 0 0 1 593 292 Z" fill="#ffd23f"/>
    
            <path d="M568 267 L568 291" stroke="#e8442e" stroke-width="4"/>
    
            <rect x="586" y="289" width="20" height="6" rx="3" fill="#e8442e"/>
    
            <path d="M546 300 Q556 318 574 316" stroke="#e8442e" stroke-width="3" fill="none"/>
    
          </g>
    
          <!-- 围巾 -->
    
          <path class="scarf" d="M552 318 Q520 330 492 322 Q470 316 452 326 Q470 338 496 334 Q526 332 552 332 Z" fill="#ff6b35"/>
    
        </g>
    
      </g>
    

    
      <!-- 鸣叫气泡 -->
    
      <g class="bubble">
    
        <path d="M620 250 L598 284 L648 252 Z" fill="#fff" stroke="#22303c" stroke-width="3"/>
    
        <rect x="560" y="198" width="172" height="54" rx="27" fill="#fff" stroke="#22303c" stroke-width="3"/>
    
        <text x="646" y="236" text-anchor="middle" font-family="ZCOOL KuaiLe, sans-serif" font-size="27" fill="#e8442e">HOO HOO!</text>
    
      </g>
    
    </svg>
    

    
    <div class="hud hud-live"><i></i><span id="hudTime">LIVE · 海岸公路 07:42</span></div>
    
    <div class="hud hud-fps">SVG · 纯矢量 · 60 FPS</div>
    
  </section>
    

    
  <section class="deck reveal d4">
    
    <button class="horn" id="horn">鸣叫<small>HONK · 喉囊充能</small></button>
    
    <div class="ctl">
    
      <label>车速 <b id="spdLabel">巡航</b></label>
    
      <div class="slider-row">
    
        <input type="range" id="speed" min="0.4" max="2.2" step="0.05" value="1">
    
        <div class="kmh"><span id="kmh">60</span> <small>km/h</small></div>
    
      </div>
    
    </div>
    
    <div class="ctl">
    
      <label>昼夜</label>
    
      <label class="switch">
    
        <input type="checkbox" id="nightT">
    
        <span class="track"></span><span class="knob"></span>
    
      </label>
    
    </div>
    
    <div class="hint">按 <kbd>空格</kbd> 鸣叫<br>也可以直接戳画面里的鹈鹕</div>
    
  </section>
    

    
  <div class="marquee reveal d5" aria-hidden="true">
    
    <div class="marquee-track" id="mq">
    
      <span>海风 ✦ 浪花 ✦ 引擎 ✦ 自由 ✦ PELICAN RIDER ✦ 海岸线 No.001 ✦ 保持飞翔 ✦</span>
    
      <span>海风 ✦ 浪花 ✦ 引擎 ✦ 自由 ✦ PELICAN RIDER ✦ 海岸线 No.001 ✦ 保持飞翔 ✦</span>
    
    </div>
    
  </div>
    

    
  <section class="facts reveal d5">
    
    <div class="fact"><b>13 升</b><p>鹈鹕的喉囊最多能鼓到 13 升,但它主要用来兜鱼,并不会真的把鱼"装回家"。</p></div>
    
    <div class="fact"><b>2.4 米</b><p>大白鹈鹕翼展可达 2.4~3 米,是欧洲体型最大的海鸟之一,比这台摩托还宽。</p></div>
    
    <div class="fact"><b>0 扇翅</b><p>它们会成群结队借助上升气流滑翔,有时几乎不扇动翅膀,一飞就是上百公里。</p></div>
    
  </section>
    

    
  <footer>— 海风骑士 · 单文件 SVG 动画 · 无依赖 —</footer>
    
</div>
    

    
<script>
    
const scene  = document.getElementById('scene');
    
const speed  = document.getElementById('speed');
    
const kmh    = document.getElementById('kmh');
    
const spdLb  = document.getElementById('spdLabel');
    
const nightT = document.getElementById('nightT');
    
const hudTime= document.getElementById('hudTime');
    

    
/* ---- 车速:统一驱动所有动画时长 ---- */
    
const BASE = { wheel:.5, dash:.45, palms:6, hills:12, far:16, waves:7, waves2:4.6,
    
               bob:.42, puff:1.3, lines:.55, neck:2.6, wing:1.15, tail:1.8 };
    
function setSpeed(v){
    
  const s = scene.style;
    
  for(const k in BASE) s.setProperty('--d-'+k, (BASE[k]/v).toFixed(3)+'s');
    
  s.setProperty('--d-cloud', (80/Math.sqrt(v)).toFixed(1)+'s');
    
  kmh.textContent = Math.round(15 + v*45);
    
  spdLb.textContent = v < 1 ? '慢速' : (v < 1.6 ? '巡航' : '狂飙');
    
}
    
speed.addEventListener('input', () => setSpeed(parseFloat(speed.value)));
    
setSpeed(1);
    

    
/* ---- 鸣叫(动画 + WebAudio 音效)---- */
    
let actx = null, honkTimer = null;
    
function honkSound(){
    
  try{
    
    actx = actx || new (window.AudioContext || window.webkitAudioContext)();
    
    const t = actx.currentTime;
    
    [[220,0],[174,.24]].forEach(([f,off])=>{
    
      const o = actx.createOscillator(), g = actx.createGain();
    
      o.type = 'square'; o.frequency.value = f;
    
      g.gain.setValueAtTime(.0001, t+off);
    
      g.gain.exponentialRampToValueAtTime(.16, t+off+.02);
    
      g.gain.exponentialRampToValueAtTime(.0001, t+off+.22);
    
      o.connect(g).connect(actx.destination);
    
      o.start(t+off); o.stop(t+off+.24);
    
    });
    
  }catch(e){}
    
}
    
function honk(){
    
  scene.classList.remove('honking');
    
  void scene.getBoundingClientRect();       // 强制重排,允许连续触发
    
  scene.classList.add('honking');
    
  honkSound();
    
  clearTimeout(honkTimer);
    
  honkTimer = setTimeout(()=>scene.classList.remove('honking'), 1150);
    
}
    
document.getElementById('horn').addEventListener('click', honk);
    
document.getElementById('pelican').addEventListener('click', honk);
    
window.addEventListener('keydown', e=>{
    
  if(e.code==='Space' && e.target===document.body){ e.preventDefault(); honk(); }
    
});
    

    
/* ---- 昼夜 ---- */
    
nightT.addEventListener('change', ()=>{
    
  scene.classList.toggle('night', nightT.checked);
    
  hudTime.textContent = nightT.checked ? 'LIVE · 海岸公路 19:30' : 'LIVE · 海岸公路 07:42';
    
});
    
</script>
    
</body>
    
</html>
  • 野菜大冒险 08-15 01:19
    10楼

    感觉有点，，有点绷不住阿这个出来的，，，

  • Raine 08-15 01:20
    11楼

    难不成刷题大王？这差距未免也太大了

  • 996 楼主 08-15 01:43
    12楼

    再来一个测试：这一次在oh-my-pi里测试“秦始皇骑北极熊”。



    结果：


    代码：


    <!DOCTYPE html>
    
<html lang="zh-CN">
    
<head>
    
<meta charset="UTF-8">
    
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    
<title>秦始皇骑北极熊 · SVG 动画</title>
    
<style>
    
  :root { color-scheme: dark; }
    
  body {
    
    margin: 0; min-height: 100vh; box-sizing: border-box;
    
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    
    gap: 16px; padding: 24px;
    
    background: radial-gradient(1200px 600px at 50% 0%, #1e2a44, #0d1424);
    
    font-family: "Noto Serif SC", "Source Han Serif SC", "STSong", "SimSun", "Microsoft YaHei", serif;
    
  }
    
  .card {
    
    width: min(960px, 96vw);
    
    background: #fff; padding: 10px; border-radius: 18px;
    
    box-shadow: 0 24px 60px rgba(0,0,0,.45);
    
  }
    
  svg { width: 100%; height: auto; display: block; border-radius: 12px; }
    
  svg text { font-family: "Noto Serif SC", "Source Han Serif SC", "STSong", "SimSun", "Microsoft YaHei", serif; }
    
  .bar { display: flex; gap: 14px; align-items: center; }
    
  button {
    
    background: #d4af37; border: none; color: #1d2436;
    
    font-size: 14px; font-weight: 700; padding: 8px 20px;
    
    border-radius: 999px; cursor: pointer; font-family: inherit;
    
  }
    
  button:hover { filter: brightness(1.08); }
    
  p.hint { color: #8fa1c0; font-size: 12.5px; margin: 0; letter-spacing: 1px; }
    
</style>
    
</head>
    
<body>
    

    
<div class="card">
    
<svg id="scene" viewBox="0 0 960 540" xmlns="http://www.w3.org/2000/svg" role="img"
    
     aria-label="秦始皇骑北极熊在雪原上行走的动画">
    
  <desc>秦始皇身穿玄色长袍、头戴冕冠，骑着一只白色北极熊在雪原上行走，天上有太阳与云，雪花飘落。</desc>
    

    
  <defs>
    
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
    
      <stop offset="0" stop-color="#9cc4ee"/>
    
      <stop offset="1" stop-color="#e8f2fc"/>
    
    </linearGradient>
    
    <linearGradient id="snowg" x1="0" y1="0" x2="0" y2="1">
    
      <stop offset="0" stop-color="#f7fafd"/>
    
      <stop offset="1" stop-color="#d9e6f4"/>
    
    </linearGradient>
    
  </defs>
    

    
  <!-- 天空 -->
    
  <rect width="960" height="540" fill="url(#sky)"/>
    

    
  <!-- 太阳 -->
    
  <g>
    
    <g stroke="#f2b94e" stroke-width="3" stroke-linecap="round">
    
      <animateTransform attributeName="transform" type="rotate" from="0 140 96" to="360 140 96" dur="80s" repeatCount="indefinite"/>
    
      <line x1="184" y1="96"  x2="198" y2="96"/>
    
      <line x1="171" y1="127" x2="181" y2="137"/>
    
      <line x1="140" y1="140" x2="140" y2="154"/>
    
      <line x1="109" y1="127" x2="99"  y2="137"/>
    
      <line x1="96"  y1="96"  x2="82"  y2="96"/>
    
      <line x1="109" y1="65"  x2="99"  y2="55"/>
    
      <line x1="140" y1="52"  x2="140" y2="38"/>
    
      <line x1="171" y1="65"  x2="181" y2="55"/>
    
    </g>
    
    <circle cx="140" cy="96" r="34" fill="#ffd76a"/>
    
  </g>
    

    
  <!-- 云 -->
    
  <g fill="#ffffff">
    
    <g opacity="0.95">
    
      <animateTransform attributeName="transform" type="translate" values="1020 96; -280 96" dur="26s" repeatCount="indefinite"/>
    
      <ellipse cx="0"   cy="0"   rx="56" ry="20"/>
    
      <ellipse cx="48"  cy="-12" rx="46" ry="18"/>
    
      <ellipse cx="94"  cy="2"   rx="50" ry="15"/>
    
    </g>
    
    <g opacity="0.75">
    
      <animateTransform attributeName="transform" type="translate" values="1060 168; -220 168" dur="34s" begin="-13s" repeatCount="indefinite"/>
    
      <ellipse cx="0"  cy="0"   rx="42" ry="15"/>
    
      <ellipse cx="38" cy="-9"  rx="34" ry="13"/>
    
      <ellipse cx="72" cy="3"   rx="36" ry="11"/>
    
    </g>
    
  </g>
    

    
  <!-- 远山 -->
    
  <polygon points="0,430 90,330 180,400 300,310 420,430 560,340 660,430 800,320 900,398 960,356 960,430" fill="#b9cde6"/>
    
  <polygon points="76,347 90,330 105,350"     fill="#eef5fc"/>
    
  <polygon points="282,333 300,310 319,336"   fill="#eef5fc"/>
    
  <polygon points="545,359 560,340 577,361"   fill="#eef5fc"/>
    
  <polygon points="783,342 800,320 818,344"   fill="#eef5fc"/>
    
  <!-- 近山 -->
    
  <polygon points="0,430 140,362 260,430 420,372 540,430 700,366 840,430 960,398 960,430" fill="#93b2d6"/>
    
  <polygon points="125,379 140,362 156,381"   fill="#f2f7fd"/>
    
  <polygon points="406,388 420,372 436,390"   fill="#f2f7fd"/>
    
  <polygon points="686,383 700,366 716,385"   fill="#f2f7fd"/>
    

    
  <!-- 雪原 -->
    
  <path d="M0,430 Q120,420 240,430 T480,430 T720,430 T960,430 L960,540 L0,540 Z" fill="url(#snowg)"/>
    

    
  <!-- 地面细节（滚动） -->
    
  <g>
    
    <animateTransform attributeName="transform" type="translate" values="0 0; -960 0" dur="2s" repeatCount="indefinite"/>
    
    <g stroke="#c2d4ea" stroke-width="3" stroke-linecap="round">
    
      <line x1="60"   y1="462" x2="104"  y2="462"/>
    
      <line x1="180"  y1="492" x2="232"  y2="492"/>
    
      <line x1="310"  y1="518" x2="352"  y2="518"/>
    
      <line x1="430"  y1="470" x2="470"  y2="470"/>
    
      <line x1="560"  y1="500" x2="606"  y2="500"/>
    
      <line x1="700"  y1="464" x2="742"  y2="464"/>
    
      <line x1="830"  y1="498" x2="880"  y2="498"/>
    
      <line x1="910"  y1="530" x2="946"  y2="530"/>
    
      <line x1="1020" y1="462" x2="1064" y2="462"/>
    
      <line x1="1140" y1="492" x2="1192" y2="492"/>
    
      <line x1="1270" y1="518" x2="1312" y2="518"/>
    
      <line x1="1390" y1="470" x2="1430" y2="470"/>
    
      <line x1="1520" y1="500" x2="1566" y2="500"/>
    
      <line x1="1660" y1="464" x2="1702" y2="464"/>
    
      <line x1="1790" y1="498" x2="1840" y2="498"/>
    
      <line x1="1870" y1="530" x2="1906" y2="530"/>
    
    </g>
    
    <g fill="#e6eef8">
    
      <ellipse cx="140"  cy="472" rx="30" ry="8"/>
    
      <ellipse cx="520"  cy="488" rx="42" ry="10"/>
    
      <ellipse cx="770"  cy="462" rx="26" ry="7"/>
    
      <ellipse cx="1100" cy="472" rx="30" ry="8"/>
    
      <ellipse cx="1480" cy="488" rx="42" ry="10"/>
    
      <ellipse cx="1730" cy="462" rx="26" ry="7"/>
    
    </g>
    
  </g>
    

    
  <!-- 影子 -->
    
  <ellipse cx="478" cy="452" rx="158" ry="13" fill="#5d7396" opacity="0.22">
    
    <animate attributeName="rx" values="158;146;158" dur="0.8s" repeatCount="indefinite"/>
    
  </ellipse>
    

    
  <!-- 北极熊 + 秦始皇（整体上下起伏） -->
    
  <g>
    
    <animateTransform attributeName="transform" type="translate" values="0 0; 0 -6; 0 0" dur="0.8s" repeatCount="indefinite"/>
    

    
    <!-- 远侧腿 -->
    
    <g fill="#dbe5f1" stroke="#b6c6da" stroke-width="2">
    
      <rect x="380" y="334" width="24" height="88" rx="12">
    
        <animateTransform attributeName="transform" type="rotate"
    
          values="-26 392 342; 26 392 342; -26 392 342" dur="0.8s" begin="-0.4s" repeatCount="indefinite"/>
    
      </rect>
    
      <rect x="524" y="334" width="24" height="88" rx="12">
    
        <animateTransform attributeName="transform" type="rotate"
    
          values="-26 536 342; 26 536 342; -26 536 342" dur="0.8s" repeatCount="indefinite"/>
    
      </rect>
    
    </g>
    

    
    <!-- 尾巴 -->
    
    <g>
    
      <animateTransform attributeName="transform" type="rotate"
    
        values="0 356 318; 16 356 318; 0 356 318" dur="0.8s" repeatCount="indefinite"/>
    
      <circle cx="348" cy="318" r="15" fill="#ffffff" stroke="#c9d6e6" stroke-width="2"/>
    
    </g>
    

    
    <!-- 身体 -->
    
    <ellipse cx="470" cy="330" rx="118" ry="56" fill="#ffffff" stroke="#c9d6e6" stroke-width="2.5"/>
    
    <ellipse cx="470" cy="352" rx="100" ry="28" fill="#eef4fa"/>
    

    
    <!-- 鞍布 -->
    
    <path d="M418,300 C442,276 498,276 524,300 L514,318 L428,318 Z" fill="#a3122a" stroke="#d4af37" stroke-width="2"/>
    
    <circle cx="438" cy="305" r="2.5" fill="#d4af37"/>
    
    <circle cx="506" cy="305" r="2.5" fill="#d4af37"/>
    

    
    <!-- 头（轻微点头） -->
    
    <g>
    
      <animateTransform attributeName="transform" type="rotate"
    
        values="0 600 310; -2.5 600 310; 0 600 310" dur="1.6s" repeatCount="indefinite"/>
    
      <circle cx="598" cy="244" r="12" fill="#dbe5f1" stroke="#b6c6da" stroke-width="2"/>
    
      <circle cx="600" cy="283" r="48" fill="#ffffff" stroke="#c9d6e6" stroke-width="2.5"/>
    
      <circle cx="576" cy="245" r="15" fill="#ffffff" stroke="#c9d6e6" stroke-width="2.5"/>
    
      <circle cx="576" cy="245" r="7"  fill="#f2cbb4"/>
    
      <ellipse cx="630" cy="298" rx="25" ry="16" fill="#ffffff" stroke="#d8e2ee" stroke-width="2"/>
    
      <circle cx="649" cy="291" r="6.5" fill="#1c2430"/>
    
      <path d="M634,304 q9,6 18,0" fill="none" stroke="#1c2430" stroke-width="2" stroke-linecap="round"/>
    
      <ellipse cx="608" cy="274" rx="5" ry="5.5" fill="#1c2430">
    
        <animate attributeName="ry" values="5.5;5.5;0.6;5.5" keyTimes="0;0.9;0.94;1" dur="3.4s" repeatCount="indefinite"/>
    
      </ellipse>
    
      <circle cx="610" cy="272" r="1.5" fill="#ffffff"/>
    
      <ellipse cx="596" cy="292" rx="8" ry="5" fill="#f9d9c4" opacity="0.8"/>
    
      <!-- 金铃项圈 -->
    
      <path d="M554,318 C576,340 612,340 630,312" fill="none" stroke="#b3202e" stroke-width="8" stroke-linecap="round"/>
    
      <circle cx="592" cy="331" r="6" fill="#d4af37" stroke="#b08a1e" stroke-width="1.5"/>
    
    </g>
    

    
    <!-- 近侧腿 -->
    
    <g fill="#ffffff" stroke="#c9d6e6" stroke-width="2.5">
    
      <rect x="400" y="350" width="24" height="88" rx="12">
    
        <animateTransform attributeName="transform" type="rotate"
    
          values="-26 412 358; 26 412 358; -26 412 358" dur="0.8s" repeatCount="indefinite"/>
    
      </rect>
    
      <rect x="544" y="350" width="24" height="88" rx="12">
    
        <animateTransform attributeName="transform" type="rotate"
    
          values="-26 556 358; 26 556 358; -26 556 358" dur="0.8s" begin="-0.4s" repeatCount="indefinite"/>
    
      </rect>
    
    </g>
    

    
    <!-- 秦始皇 -->
    
    <g>
    
      <animateTransform attributeName="transform" type="translate"
    
        values="0 0; 0 -3; 0 0" dur="0.8s" begin="-0.12s" repeatCount="indefinite"/>
    
      <!-- 脖子 -->
    
      <rect x="470" y="218" width="16" height="20" fill="#f2c9a0"/>
    
      <!-- 玄色长袍（秦尚黑） -->
    
      <path d="M430,316 C436,266 452,242 478,238 C506,242 524,270 532,316 Z"
    
            fill="#171922" stroke="#2b2e3a" stroke-width="2"/>
    
      <path d="M431,314 L531,314" stroke="#d4af37" stroke-width="2.5"/>
    
      <path d="M462,242 L480,256 L498,242" fill="none" stroke="#d4af37" stroke-width="2"/>
    
      <text x="446" y="280" font-size="15" fill="#d4af37">秦</text>
    
      <!-- 腰带 -->
    
      <path d="M444,290 L514,290 L510,304 L448,304 Z" fill="#b3202e"/>
    
      <rect x="472" y="288" width="14" height="16" fill="#d4af37" stroke="#b08a1e" stroke-width="1"/>
    
      <!-- 持缰手臂与手 -->
    
      <path d="M492,248 C512,252 530,262 544,272 L536,286 C520,278 504,270 490,266 Z"
    
            fill="#171922" stroke="#2b2e3a" stroke-width="1.5"/>
    
      <path d="M544,279 L636,288 M544,283 L642,300" stroke="#7a5230" stroke-width="2" fill="none"/>
    
      <circle cx="544" cy="279" r="6" fill="#f2c9a0" stroke="#d9a878" stroke-width="1"/>
    
      <!-- 头 -->
    
      <circle cx="480" cy="204" r="24" fill="#f2c9a0" stroke="#d9a878" stroke-width="1.5"/>
    
      <circle cx="463" cy="206" r="4"  fill="#f2c9a0" stroke="#d9a878" stroke-width="1"/>
    
      <path d="M456,200 C456,186 466,178 480,178 C494,178 504,186 504,200
    
               C504,191 494,185 480,185 C466,185 456,191 456,200 Z" fill="#101218"/>
    
      <circle cx="491" cy="202" r="2.5" fill="#1c2430"/>
    
      <path d="M486,194 L497,193" stroke="#101218" stroke-width="2" stroke-linecap="round"/>
    
      <path d="M497,204 q3,3 -1,5" fill="none" stroke="#d9a878" stroke-width="1.5"/>
    
      <path d="M490,213 L485,214" stroke="#1c2430" stroke-width="1.5" stroke-linecap="round"/>
    
      <path d="M482,218 C490,220 495,226 493,234 C487,238 479,234 477,227 Z" fill="#101218"/>
    
      <!-- 冕冠：冕板 + 旒 + 金簪 -->
    
      <rect x="452" y="168" width="56" height="10" fill="#14161f" stroke="#d4af37" stroke-width="1.5"/>
    
      <g stroke="#d4af37" stroke-width="1.5">
    
        <line x1="454" y1="178" x2="454" y2="194"/>
    
        <line x1="462" y1="178" x2="462" y2="192"/>
    
        <line x1="502" y1="178" x2="502" y2="192"/>
    
        <line x1="510" y1="178" x2="510" y2="194"/>
    
      </g>
    
      <g fill="#8fbf7a">
    
        <circle cx="454" cy="196" r="2.2"/>
    
        <circle cx="462" cy="194" r="2.2"/>
    
        <circle cx="502" cy="194" r="2.2"/>
    
        <circle cx="510" cy="196" r="2.2"/>
    
      </g>
    
      <path d="M492,166 L518,158" stroke="#d4af37" stroke-width="2.5" stroke-linecap="round"/>
    
      <circle cx="520" cy="157" r="3" fill="#d4af37"/>
    
    </g>
    
  </g>
    

    
  <!-- 飘雪 -->
    
  <g fill="#ffffff" opacity="0.85">
    
    <circle cx="70" cy="-15" r="3">
    
      <animate attributeName="cy" from="-15" to="555" dur="4.6s" begin="-1.2s" repeatCount="indefinite"/>
    
      <animate attributeName="cx" values="70;84;58;70" dur="1.8s" repeatCount="indefinite"/>
    
    </circle>
    
    <circle cx="210" cy="-15" r="2.4">
    
      <animate attributeName="cy" from="-15" to="555" dur="5.4s" begin="-3.1s" repeatCount="indefinite"/>
    
      <animate attributeName="cx" values="210;198;222;210" dur="2.1s" repeatCount="indefinite"/>
    
    </circle>
    
    <circle cx="350" cy="-15" r="3.4">
    
      <animate attributeName="cy" from="-15" to="555" dur="4.1s" begin="-0.6s" repeatCount="indefinite"/>
    
      <animate attributeName="cx" values="350;366;336;350" dur="1.6s" repeatCount="indefinite"/>
    
    </circle>
    
    <circle cx="495" cy="-15" r="2.2">
    
      <animate attributeName="cy" from="-15" to="555" dur="6s" begin="-4.4s" repeatCount="indefinite"/>
    
      <animate attributeName="cx" values="495;485;505;495" dur="2.4s" repeatCount="indefinite"/>
    
    </circle>
    
    <circle cx="640" cy="-15" r="3">
    
      <animate attributeName="cy" from="-15" to="555" dur="4.9s" begin="-2.7s" repeatCount="indefinite"/>
    
      <animate attributeName="cx" values="640;652;628;640" dur="1.9s" repeatCount="indefinite"/>
    
    </circle>
    
    <circle cx="785" cy="-15" r="2.6">
    
      <animate attributeName="cy" from="-15" to="555" dur="5.1s" begin="-1.9s" repeatCount="indefinite"/>
    
      <animate attributeName="cx" values="785;771;799;785" dur="2.2s" repeatCount="indefinite"/>
    
    </circle>
    
    <circle cx="890" cy="-15" r="3.2">
    
      <animate attributeName="cy" from="-15" to="555" dur="4.4s" begin="-3.7s" repeatCount="indefinite"/>
    
      <animate attributeName="cx" values="890;905;877;890" dur="1.7s" repeatCount="indefinite"/>
    
    </circle>
    
    <circle cx="150" cy="-15" r="2">
    
      <animate attributeName="cy" from="-15" to="555" dur="4.2s" begin="-2.2s" repeatCount="indefinite"/>
    
      <animate attributeName="cx" values="150;139;161;150" dur="2s" repeatCount="indefinite"/>
    
    </circle>
    
    <circle cx="720" cy="-15" r="2.2">
    
      <animate attributeName="cy" from="-15" to="555" dur="5.7s" begin="-0.9s" repeatCount="indefinite"/>
    
      <animate attributeName="cx" values="720;730;710;720" dur="2.3s" repeatCount="indefinite"/>
    
    </circle>
    
    <circle cx="930" cy="-15" r="2.8">
    
      <animate attributeName="cy" from="-15" to="555" dur="4.7s" begin="-3.3s" repeatCount="indefinite"/>
    
      <animate attributeName="cx" values="930;917;943;930" dur="1.8s" repeatCount="indefinite"/>
    
    </circle>
    
  </g>
    

    
  <!-- 标题 -->
    
  <text x="480" y="46" text-anchor="middle" font-size="34" font-weight="700" fill="#22304a" letter-spacing="6">秦始皇骑北极熊</text>
    
  <rect x="382" y="58" width="196" height="4" rx="2" fill="#d4af37"/>
    
  <text x="480" y="82" text-anchor="middle" font-size="14" fill="#44536f" letter-spacing="2">秦 · 公元前 221 年 · 御乘北极熊巡游北境</text>
    

    
  <!-- 皇帝台词 -->
    
  <g>
    
    <animate attributeName="opacity" values="0;1;1;0;0" keyTimes="0;0.06;0.7;0.78;1" dur="7s" repeatCount="indefinite"/>
    
    <rect x="575" y="118" width="232" height="54" rx="12" fill="#fffdf5" stroke="#d4af37" stroke-width="2"/>
    
    <path d="M614,171 L566,206 L652,171 Z" fill="#fffdf5"/>
    
    <text x="691" y="152" text-anchor="middle" font-size="19" font-weight="700" fill="#7a1f2b">普天之下，莫非王土</text>
    
  </g>
    

    
  <!-- 北极熊低吼 -->
    
  <g>
    
    <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5;0.56;0.7;0.78;1" dur="7s" repeatCount="indefinite"/>
    
    <rect x="660" y="196" width="66" height="38" rx="10" fill="#ffffff" stroke="#9fb4cf" stroke-width="2"/>
    
    <path d="M678,233 L652,282 L706,235 Z" fill="#ffffff"/>
    
    <text x="693" y="222" text-anchor="middle" font-size="18" font-weight="700" fill="#2b3a55">吼！</text>
    
  </g>
    
</svg>
    
</div>
    

    
<div class="bar">
    
  <button id="toggle">⏸ 暂停</button>
    
  <p class="hint">纯 SVG + SMIL 动画 · 无需外部资源</p>
    
</div>
    

    
<script>
    
  const svg = document.getElementById('scene');
    
  const btn = document.getElementById('toggle');
    
  let playing = true;
    
  btn.addEventListener('click', () => {
    
    if (playing) { svg.pauseAnimations(); btn.textContent = '▶ 播放'; }
    
    else         { svg.unpauseAnimations(); btn.textContent = '⏸ 暂停'; }
    
    playing = !playing;
    
  });
    
</script>
    
</body>
    
</html>
  • 纯小亦 08-15 01:44
    13楼

    感觉鹈鹕骑自行车被测烂了，还是换成随机动物骑随机交通工具比较好

* 帖子来源Linux.do
附近帖子
返回
飞读
随机推荐