GLM-5.3-Flash测试秦始皇骑北极熊

看上去似乎还有点神韵呢

📖 HTML 代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>千古一帝 · 极地巡狩 —— 秦始皇骑北极熊 (SVG 2D 动画)</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🐻‍❄️</text></svg>">
<style>
  /* ==========================================================
     可调参数集中区:步频 dur 请同步修改各 SMIL 的 dur 值
     (搜索 "STRIDE" 即为四肢/颠簸周期)
     ========================================================== */
  :root{
    --fur:#f8fafc;
    --fur-shade:#dbe7f3;
    --fur-deep:#c3d3e4;
    --robe:#1a1c22;
    --cape:#93191f;
    --cape-deep:#771218;
    --gold:#d9a441;
    --night1:#0a1128;
    --night2:#152a52;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; background:
      radial-gradient(1200px 500px at 50% -10%, #14264d 0%, transparent 60%),
      #070d1d;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; padding:18px;
    font-family:"Microsoft YaHei","PingFang SC",sans-serif; color:#cfe0f5;
  }
  #toolbar{display:flex; align-items:center; gap:12px}
  #btnPlay{
    cursor:pointer; user-select:none; padding:6px 18px; border-radius:999px;
    border:1px solid rgba(217,164,65,.55); background:rgba(16,28,54,.7);
    color:#f0d9a0; font-size:14px; letter-spacing:2px;
  }
  #btnPlay:hover{background:rgba(217,164,65,.18)}
  #hint{font-size:12px; color:#7d93b5; letter-spacing:1px}

  #stage{border-radius:18px; overflow:hidden;
         box-shadow:0 20px 70px rgba(0,10,40,.75), 0 0 0 1px rgba(255,255,255,.06)}

  /* ---- 雪花(脚本生成,每片随机大小/时长/延迟) ---- */
  .flake{animation:snowfall linear infinite}
  @keyframes snowfall{
    from{transform:translate(0,-40px)}
    to  {transform:translate(var(--drift,30px),660px)}
  }
  .star{animation:twinkle ease-in-out infinite}
  @keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
  html.paused .flake, html.paused .star{animation-play-state:paused}

  svg text{user-select:none}
  .kai{font-family:"KaiTi","STKaiti","楷体","DFKai-SB",serif}
</style>
</head>
<body>

<div id="toolbar">
  <span id="btnPlay" title="空格键同样可切换">⏸ 暂停 / ▶ 播放</span>
  <span id="hint">← / → 单帧微调(0.05s) · 点击画面也可暂停</span>
</div>

<div id="stage">
<svg id="scene" viewBox="0 0 900 600" width="900" height="600"
     xmlns="http://www.w3.org/2000/svg" role="img" aria-label="秦始皇骑北极熊在极光雪原上疾驰">

  <defs>
    <!-- 天空 -->
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#0a1128"/><stop offset="55%" stop-color="#132850"/><stop offset="100%" stop-color="#1d3a63"/>
    </linearGradient>
    <radialGradient id="moonGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0" stop-color="#eaf3ff" stop-opacity=".9"/>
      <stop offset="35%" stop-color="#bcd7ff" stop-opacity=".35"/>
      <stop offset="100%" stop-color="#bcd7ff" stop-opacity="0"/>
    </radialGradient>
    <linearGradient id="aurora1" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#5cff9d" stop-opacity="0"/>
      <stop offset="50%" stop-color="#4be08a" stop-opacity=".55"/>
      <stop offset="100%" stop-color="#2ea86b" stop-opacity="0"/>
    </linearGradient>
    <linearGradient id="aurora2" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#7bd7ff" stop-opacity="0"/>
      <stop offset="50%" stop-color="#61c4ff" stop-opacity=".5"/>
      <stop offset="100%" stop-color="#3b87d9" stop-opacity="0"/>
    </linearGradient>

    <!-- 地面 -->
    <linearGradient id="ground" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#dfeafa"/><stop offset="45%" stop-color="#eef4fd"/>
      <stop offset="100%" stop-color="#ffffff"/>
    </linearGradient>

    <!-- 北极熊毛皮 -->
    <radialGradient id="fur" cx="42%" cy="34%" r="72%">
      <stop offset="0" stop-color="#ffffff"/>
      <stop offset="70%" stop-color="#f6fafd"/>
      <stop offset="100%" stop-color="#dce8f4"/>
    </radialGradient>
    <linearGradient id="headFur" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#ffffff"/><stop offset="100%" stop-color="#e2ecf6"/>
    </linearGradient>

    <!-- 秦始皇黑袍 -->
    <linearGradient id="robe" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#23262e"/><stop offset="100%" stop-color="#12141a"/>
    </linearGradient>
    <linearGradient id="blade" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#9aa8b6"/><stop offset="50%" stop-color="#e8eef4"/>
      <stop offset="100%" stop-color="#aab6c2"/>
    </linearGradient>
    <radialGradient id="goldBtn" cx="35%" cy="35%">
      <stop offset="0" stop-color="#ffe9a8"/><stop offset="100%" stop-color="#c8932f"/>
    </radialGradient>

    <filter id="blur6"><feGaussianBlur stdDeviation="6"/></filter>
    <filter id="blur2"><feGaussianBlur stdDeviation="2"/></filter>
    <clipPath id="driftClip"><rect x="0" y="446" width="900" height="154"/></clipPath>

    <!-- 一条熊腿(指向下方,原点为髋关节) -->
    <g id="legN">
      <path d="M0 0 L-3 76" stroke="var(--fur)" stroke-width="30" stroke-linecap="round"/>
      <circle cx="-3" cy="82" r="14" fill="var(--fur)" stroke="var(--fur-deep)" stroke-width="2"/>
      <path d="M-9 84 q4 5 9 3 M-1 87 q4 4 8 2" stroke="#a9bdd2" stroke-width="1.6" fill="none" stroke-linecap="round"/>
    </g>
    <g id="legF"><!-- 远侧腿:整体偏灰蓝以示纵深 -->
      <path d="M0 0 L-3 74" stroke="#dbe7f2" stroke-width="29" stroke-linecap="round"/>
      <circle cx="-3" cy="80" r="13" fill="#dbe7f2" stroke="#bacbde" stroke-width="2"/>
    </g>
    <ellipse id="tuft" rx="24" ry="16" fill="var(--fur)" stroke="#e3edf7" stroke-width="2"/>
  </defs>

  <!-- ======================= 背景 ======================= -->
  <rect width="900" height="600" fill="url(#sky)"/>

  <!-- 星星(脚本生成) -->
  <g id="stars"></g>

  <!-- 月亮 -->
  <circle cx="762" cy="104" r="86" fill="url(#moonGlow)"/>
  <circle cx="762" cy="104" r="34" fill="#eef4ff"/>
  <circle cx="750" cy="96" r="7" fill="#dbe7f5" opacity=".8"/>
  <circle cx="772" cy="116" r="5" fill="#dbe7f5" opacity=".7"/>

  <!-- 极光 -->
  <g filter="url(#blur6)">
    <path d="M-20 150 C160 70 320 190 470 110 S760 60 920 140" fill="none" stroke="url(#aurora1)" stroke-width="30">
      <animate attributeName="opacity" values=".25;.6;.25" dur="7s" repeatCount="indefinite"/>
      <animateTransform attributeName="transform" type="translate" values="0 0;0 14;0 0" dur="7s" repeatCount="indefinite"/>
    </path>
    <path d="M-30 210 C180 130 340 240 520 170 S800 130 930 205" fill="none" stroke="url(#aurora2)" stroke-width="24">
      <animate attributeName="opacity" values=".55;.2;.55" dur="5.2s" repeatCount="indefinite"/>
      <animateTransform attributeName="transform" type="translate" values="0 0;0 -12;0 0" dur="6.4s" repeatCount="indefinite"/>
    </path>
  </g>

  <!-- 远山 -->
  <path d="M0 470 L90 402 L150 440 L235 380 L330 448 L430 396 L520 446 L620 392 L720 448 L810 408 L900 470 Z" fill="#20395f"/>
  <path d="M0 486 L120 448 L230 480 L360 440 L480 482 L600 446 L730 484 L840 452 L900 486 Z" fill="#182d4d"/>

  <!-- 中景雪堆(视差滚动:tile 宽 900,平移一个周期即无缝循环) -->
  <defs>
    <g id="driftTile">
      <ellipse cx="140" cy="488" rx="130" ry="26" fill="#cddef0" opacity=".8"/>
      <ellipse cx="420" cy="492" rx="160" ry="30" fill="#d8e7f6" opacity=".7"/>
      <ellipse cx="700" cy="486" rx="140" ry="24" fill="#cfe1f1" opacity=".8"/>
      <g transform="translate(0,54)">
        <ellipse cx="250" cy="492" rx="120" ry="22" fill="#dfeaf7" opacity=".85"/>
        <ellipse cx="560" cy="496" rx="150" ry="26" fill="#d4e4f4" opacity=".85"/>
        <ellipse cx="820" cy="490" rx="75" ry="20" fill="#dfeaf7" opacity=".85"/>
      </g>
    </g>
  </defs>
  <g clip-path="url(#driftClip)">
    <g id="driftLayer">
      <use href="#driftTile"/>
      <use href="#driftTile" x="900"/>
      <animateTransform attributeName="transform" type="translate" values="0 0;-900 0" dur="11s" repeatCount="indefinite"/>
    </g>
  </g>

  <!-- 地面 -->
  <rect x="0" y="470" width="900" height="130" fill="url(#ground)"/>
  <ellipse cx="210" cy="560" rx="260" ry="30" fill="#e6effb" opacity=".9"/>
  <ellipse cx="720" cy="575" rx="300" ry="34" fill="#e2edfa" opacity=".8"/>

  <!-- 前景速度感雪痕(虚线节距=640,与位移严格同步 ⇒ 无缝后掠) -->
  <g opacity=".55" filter="url(#blur2)">
    <g stroke="#fff" fill="none" stroke-linecap="round">
      <path d="M-720 520 H1620" stroke-width="4"   stroke-dasharray="190 450"/>
      <path d="M-720 549 H1620" stroke-width="5.5" stroke-dasharray="240 400" opacity=".85"/>
      <path d="M-720 577 H1620" stroke-width="3"   stroke-dasharray="150 490" opacity=".7"/>
      <animateTransform attributeName="transform" type="translate" values="0 0;-640 0" dur="1.35s" repeatCount="indefinite"/>
    </g>
  </g>

  <!-- ======================= 主角:北极熊 + 始皇帝 ======================= -->
  <!-- STRIDE 步频 = 1.1s;整组随步伐上下颠簸 -->
  <g>
    <animateTransform attributeName="transform" type="translate"
      values="0 0;0 -8;0 0;0 -8;0 0" keyTimes="0;.25;.5;.75;1"
      dur="1.1s" repeatCount="indefinite"/>

    <!-- 影子 -->
    <ellipse cx="500" cy="496" rx="225" ry="17" fill="#93aed0" opacity=".4">
      <animate attributeName="rx" values="225;212;225;212;225" keyTimes="0;.25;.5;.75;1"
               dur="1.1s" repeatCount="indefinite"/>
    </ellipse>

    <!-- 远侧两条腿(对角同相) -->
    <g transform="translate(600,430)">
      <g>
        <animateTransform attributeName="transform" type="rotate" values="15;-15;15"
          keyTimes="0;.5;1" calcMode="spline" keySplines=".42 0 .58 1;.42 0 .58 1"
          dur="1.1s" repeatCount="indefinite"/>
        <use href="#legF"/>
      </g>
    </g>
    <g transform="translate(360,438)">
      <g>
        <animateTransform attributeName="transform" type="rotate" values="-16;16;-16"
          keyTimes="0;.5;1" calcMode="spline" keySplines=".42 0 .58 1;.42 0 .58 1"
          dur="1.1s" repeatCount="indefinite"/>
        <use href="#legF"/>
      </g>
    </g>

    <!-- 尾巴 -->
    <g transform="translate(300,352)">
      <g>
        <animateTransform attributeName="transform" type="rotate" values="-14;10;-14"
          dur="0.9s" repeatCount="indefinite"/>
        <path d="M0 0 Q-34 6 -46 26 Q-40 40 -18 36 Q-2 30 4 16 Z" fill="var(--fur)"
              stroke="#d9e6f2" stroke-width="2.5"/>
      </g>
    </g>

    <!-- 身躯 -->
    <g transform="rotate(-4 470 380)">
      <ellipse cx="470" cy="380" rx="175" ry="82" fill="url(#fur)" stroke="#c9d9ea" stroke-width="2.5"/>
      <ellipse cx="352" cy="396" rx="86" ry="66" fill="var(--fur)" stroke="#c9d9ea" stroke-width="2.5"/><!-- 后臀 -->
      <ellipse cx="596" cy="372" rx="60" ry="56" fill="var(--fur)" stroke="#d5e3f0" stroke-width="2.5"/><!-- 肩隆 -->
      <path d="M340 430 Q470 492 606 424" fill="none" stroke="#dce8f4" stroke-width="10" stroke-linecap="round" opacity=".9"/>
      <path d="M370 300 Q470 262 580 306" fill="none" stroke="#ffffff" stroke-width="8" stroke-linecap="round" opacity=".8"/>
      <path d="M400 340 q18 12 40 6 M560 350 q-18 10 -38 4 M470 452 q20 8 44 2"
            fill="none" stroke="#e7f0f8" stroke-width="4" stroke-linecap="round" opacity=".9"/>
    </g>

    <!-- 近侧前腿(相位与远侧相反) -->
    <g transform="translate(588,428)">
      <g>
        <animateTransform attributeName="transform" type="rotate" values="-14;14;-14"
          keyTimes="0;.5;1" calcMode="spline" keySplines=".42 0 .58 1;.42 0 .58 1"
          dur="1.1s" repeatCount="indefinite"/>
        <use href="#legN"/>
      </g>
      <ellipse rx="24" ry="16" fill="var(--fur)" stroke="#e3edf7" stroke-width="2" cy="2"/>
    </g>
    <!-- 近侧后腿 -->
    <g transform="translate(348,440)">
      <g>
        <animateTransform attributeName="transform" type="rotate" values="16;-16;16"
          keyTimes="0;.5;1" calcMode="spline" keySplines=".42 0 .58 1;.42 0 .58 1"
          dur="1.1s" repeatCount="indefinite"/>
        <use href="#legN"/>
      </g>
      <ellipse rx="26" ry="18" fill="var(--fur)" stroke="#e3edf7" stroke-width="2" cy="2"/>
    </g>

    <!-- 蹄印扬起的雪雾 -->
    <g fill="#ffffff">
      <circle cx="300" cy="492" r="9" opacity="0">
        <animate attributeName="opacity" values="0;.75;0" keyTimes="0;.2;1" dur="1.1s" begin="0s" repeatCount="indefinite"/>
        <animate attributeName="cx" values="300;250" dur="1.1s" repeatCount="indefinite"/>
        <animate attributeName="cy" values="492;470" dur="1.1s" repeatCount="indefinite"/>
        <animate attributeName="r" values="6;13" dur="1.1s" repeatCount="indefinite"/>
      </circle>
      <circle cx="640" cy="492" r="8" opacity="0">
        <animate attributeName="opacity" values="0;.6;0" keyTimes="0;.2;1" dur="1.1s" begin="-0.55s" repeatCount="indefinite"/>
        <animate attributeName="cx" values="640;590" dur="1.1s" begin="-0.55s" repeatCount="indefinite"/>
        <animate attributeName="cy" values="492;472" dur="1.1s" begin="-0.55s" repeatCount="indefinite"/>
        <animate attributeName="r" values="5;11" dur="1.1s" begin="-0.55s" repeatCount="indefinite"/>
      </circle>
    </g>

    <!-- ===================== 头部(仅内层以颈部为枢轴微点头) ===================== -->
    <g>
      <g transform="translate(604,352)">
        <g>
          <animateTransform attributeName="transform" type="rotate" values="-2.5;2.5;-2.5"
            keyTimes="0;.5;1" dur="1.1s" repeatCount="indefinite"/>
          <!-- 颈部过渡(不随头转,画在外层下一段更自然;此处给底部圆弧遮缝) -->
          <path d="M-40 26 Q-6 40 52 18 L64 -22 Q20 -44 -30 -16 Z" fill="var(--fur)" stroke="#d0deed" stroke-width="2"/>

          <!-- 远耳 -->
          <g transform="translate(52,-58)">
            <g>
              <animateTransform attributeName="transform" type="rotate"
                values="0;0;0;-22;0;0;0" keyTimes="0;.55;.62;.68;.74;.8;1"
                dur="4.6s" repeatCount="indefinite"/>
              <circle r="15" fill="#dbe7f2" stroke="#c2d3e4" stroke-width="2.5"/>
              <circle r="7" cy="1" fill="#c6d7e8"/>
            </g>
          </g>
          <!-- 近耳 -->
          <g transform="translate(-8,-66)">
            <g>
              <animateTransform attributeName="transform" type="rotate"
                values="0;0;0;16;0;0;0" keyTimes="0;.3;.36;.42;.5;.9;1"
                dur="5.2s" repeatCount="indefinite"/>
              <circle r="17" fill="var(--fur)" stroke="#cbdcea" stroke-width="2.5"/>
              <circle r="8" cy="1" fill="#d6e4f1"/>
            </g>
          </g>

          <!-- 头骨 + 吻部 -->
          <circle cx="26" cy="-34" r="54" fill="url(#headFur)" stroke="#c7d8e8" stroke-width="2.5"/>
          <path d="M66 -52 L124 -34 Q136 -30 134 -18 L128 -6 Q126 2 114 4 L60 2 Z"
                fill="var(--fur)" stroke="#c7d8e8" stroke-width="2.5"/>
          <path d="M62 -30 L118 -24 L116 -8 L58 -8 Z" fill="#ffffff" opacity=".55"/>
          <!-- 后脑勺绒毛锯齿 -->
          <path d="M-26 -66 L-18 -56 L-30 -48 L-20 -40 L-32 -32 Z" fill="var(--fur)"/>

          <!-- 鼻与嘴 -->
          <ellipse cx="128" cy="-16" rx="13" ry="11" fill="#3c5166"/>
          <path d="M136 -19 a3.4 3.4 0 1 0 .1 0" fill="#22303f"/><!-- 右鼻孔高光点省略,用深色点缀 -->
          <path d="M122 -4 Q128 2 126 10" fill="none" stroke="#5b7188" stroke-width="2.4" stroke-linecap="round"/>
          <path d="M96 12 Q112 20 128 12" fill="none" stroke="#5b7188" stroke-width="2.6" stroke-linecap="round"/>
          <path d="M106 13 l4 6 l4 -6" fill="#ffffff"/><!-- 小虎牙 -->

          <!-- 眼睛(含眨眼) -->
          <ellipse cx="44" cy="-46" rx="5.5" ry="4.6" fill="#2b3847">
            <animate attributeName="ry" values="4.6;4.6;.4;4.6" keyTimes="0;.9;.95;1"
                     dur="4.2s" repeatCount="indefinite"/>
          </ellipse>
          <circle cx="46" cy="-48" r="1.5" fill="#9fc0ff" opacity=".9"/>
          <path d="M36 -54 Q44 -58 52 -54" fill="none" stroke="#8fa6bd" stroke-width="2" stroke-linecap="round"/>

          <!-- 马具(口衔络头),缰绳从皇帝手中连到这里 -->
          <path d="M100 -44 L132 -38" stroke="#6b543a" stroke-width="6" stroke-linecap="round"/>
          <path d="M78 -70 L74 -12" stroke="#6b543a" stroke-width="5.5" stroke-linecap="round"/>
          <circle cx="74" cy="-12" r="5.5" fill="none" stroke="#6b543a" stroke-width="4"/>
          <circle cx="116" cy="-41" r="3.4" fill="#caa04c"/>

          <!-- 寒气吐息 -->
          <g fill="#dff1ff">
            <circle cx="140" cy="-12" r="7" opacity="0">
              <animate attributeName="opacity" values="0;.7;0" keyTimes="0;.25;1" dur="2.4s" repeatCount="indefinite"/>
              <animate attributeName="cx" values="140;172" dur="2.4s" repeatCount="indefinite"/>
              <animate attributeName="cy" values="-12;-2" dur="2.4s" repeatCount="indefinite"/>
              <animate attributeName="r" values="5;14" dur="2.4s" repeatCount="indefinite"/>
            </circle>
            <circle cx="140" cy="-12" r="6" opacity="0">
              <animate attributeName="opacity" values="0;.55;0" keyTimes="0;.25;1" dur="2.4s" begin="-1.2s" repeatCount="indefinite"/>
              <animate attributeName="cx" values="140;168" dur="2.4s" begin="-1.2s" repeatCount="indefinite"/>
              <animate attributeName="cy" values="-14;-4" dur="2.4s" begin="-1.2s" repeatCount="indefinite"/>
              <animate attributeName="r" values="4;12" dur="2.4s" begin="-1.2s" repeatCount="indefinite"/>
            </circle>
          </g>
        </g>
      </g>
    </g>

    <!-- 缰绳:皇帝右手 -> 熊脸颊铁环 -->
    <path d="M572 250 C606 268 642 296 676 338" fill="none" stroke="#a97c50" stroke-width="4.5" stroke-linecap="round">
      <animate attributeName="d" dur="1.1s" repeatCount="indefinite"
        values="M572 250 C606 268 642 296 676 338;
                M572 250 C606 264 640 292 674 336;
                M572 250 C606 268 642 296 676 338"/>
    </path>

    <!-- ======================= 坐垫 + 肚兜绑带 ======================= -->
    <g transform="rotate(-4 470 310)">
      <rect x="402" y="292" width="150" height="36" rx="14" fill="#7e1418" stroke="#a92830" stroke-width="2.5"/>
      <path d="M406 306 H548" stroke="#d9a441" stroke-width="3" stroke-dasharray="10 7"/>
      <rect x="412" y="296" width="130" height="10" rx="5" fill="#96181e" opacity=".9"/>
    </g>
    <path d="M414 328 Q470 470 528 328" fill="none" stroke="#5b4632" stroke-width="9"/>
    <circle cx="470" cy="446" r="7" fill="#caa04c" stroke="#8a6a2c" stroke-width="2"/>

    <!-- ======================= 秦始皇 ======================= -->
    <!-- 1) 后侧手臂剪影(远端,暗色) -->
    <path d="M470 240 Q452 210 462 188 L482 192 Q476 214 488 238 Z" fill="#101216"/>
    <!-- 手中长剑在后臂组里统一绘制 -->

    <!-- 2) 披风(三层飘带,风向左后方) -->
    <g fill="var(--cape)">
      <g transform="translate(486,236)">
        <g>
          <animateTransform attributeName="transform" type="rotate" values="-4;7;-4" dur="1.4s" repeatCount="indefinite"/>
          <path d="M0 0 C-42 -4 -84 18 -122 62 C-134 78 -122 88 -106 78 C-70 54 -34 44 -4 48 Z"/>
        </g>
      </g>
      <g transform="translate(484,240)">
        <g>
          <animateTransform attributeName="transform" type="rotate" values="5;-6;5" dur="1.7s" repeatCount="indefinite"/>
          <path d="M0 2 C-46 10 -92 44 -128 100 C-138 116 -124 126 -108 114 C-70 84 -32 62 0 54 Z" fill="var(--cape-deep)"/>
        </g>
      </g>
      <g transform="translate(486,238)">
        <g>
          <animateTransform attributeName="transform" type="rotate" values="0;8;0" dur="2.1s" repeatCount="indefinite"/>
          <path d="M0 6 C-38 18 -70 48 -96 92 C-102 104 -92 112 -80 104 C-56 86 -28 66 2 56 Z" fill="#a92830"/>
        </g>
      </g>
      <circle cx="486" cy="236" r="7" fill="url(#goldBtn)"/>
    </g>

    <!-- 3) 躯干(微微前倾) -->
    <g>
      <path d="M452 316 Q446 268 466 232 L512 236 Q528 280 518 316 Z" fill="url(#robe)"
            stroke="#000" stroke-opacity=".35" stroke-width="1.5"/>
      <!-- 冷月轮廓光 -->
      <path d="M508 240 Q522 278 516 312" fill="none" stroke="#8fc0ff" stroke-width="1.8" opacity=".55" stroke-linecap="round"/>
      <!-- 领缘曲裾(内衬浅色+金线) -->
      <path d="M466 234 L494 262 L514 236 Z" fill="#efe6d8"/>
      <path d="M466 234 L494 262" stroke="#c8b06a" stroke-width="2.4"/>
      <path d="M494 262 L514 236" stroke="#c8b06a" stroke-width="2.4"/>
      <!-- 腰绦束带 -->
      <g transform="rotate(-16 470 288)">
        <rect x="440" y="279" width="66" height="17" rx="7" fill="var(--gold)" stroke="#a97e22" stroke-width="2"/>
        <rect x="446" y="283" width="54" height="4" rx="2" fill="#f4d489" opacity=".9"/>
        <path d="M500 288 l14 4 -3 8 -12 -5 z" fill="var(--gold)" stroke="#a97e22" stroke-width="1.5"/><!-- 垂穗 -->
        <!-- 传国玉玺(腰间小挂饰) -->
        <g transform="translate(496,296)">
          <rect x="-7" y="-2" width="15" height="14" rx="2.5" fill="#2e8f6f" stroke="#1d6b51" stroke-width="2"/>
          <rect x="-4.5" y="-6" width="10" height="5" rx="1.5" fill="#256e56"/>
        </g>
      </g>
      <!-- 裙摆迎风后掀小飞角 -->
      <path d="M452 316 Q428 322 416 340 Q436 338 456 330 Z" fill="var(--robe)">
        <animateTransform attributeName="transform" type="rotate" values="0 452 318;-9 452 318;0 452 318" dur="0.8s" repeatCount="indefinite"/>
      </path>
    </g>

    <!-- 4) 左臂高举持剑 -->
    <g>
      <path d="M486 236 Q466 226 452 202 L470 186 Q486 208 502 224 Z" fill="url(#robe)" stroke="#000" stroke-opacity=".3" stroke-width="1.4"/>
      <!-- 上举的腕袖翻边 -->
      <g transform="translate(462,196)">
        <g>
          <animateTransform attributeName="transform" type="rotate" values="-6;8;-6" dur="1s" repeatCount="indefinite"/>
          <path d="M0 0 Q-20 -6 -30 -22 Q-16 -20 -2 -12 Z" fill="var(--robe)" stroke="#3a3f4a" stroke-width="1.4"/>
        </g>
      </g>
      <circle cx="438" cy="166" r="9.5" fill="#e8bd8d" stroke="#c79d6f" stroke-width="2"/><!-- 握拳 -->

      <!-- 剑(手腕处轻微扬刺) -->
      <g>
        <animateTransform attributeName="transform" type="rotate" values="-3 441 166;3 441 166;-3 441 166" dur="1.3s" repeatCount="indefinite"/>
        <rect x="430" y="150" width="14" height="30" rx="5" fill="#3a2418" transform="rotate(24 437 165)"/><!-- 剑柄 -->
        <path d="M420 158 l34 14" stroke="#caa04c" stroke-width="5" stroke-linecap="round" transform="rotate(0 437 165)"/><!-- 护手近似 -->
        <path d="M447 158 L486 84 L491 90 L457 164 Z" fill="url(#blade)" stroke="#7e8b98" stroke-width="1"/>
        <path d="M468 118 L476 121" stroke="#ffffff" stroke-width="1.6" opacity=".9"/>
        <circle cx="487" cy="82" r="4" fill="#eef4ff">
          <animate attributeName="r" values="3;5;3" dur="1.6s" repeatCount="indefinite"/>
        </circle>
        <!-- 气场涟漪 -->
        <g stroke="#cfe4ff" fill="none">
          <circle cx="492" cy="72" r="10" stroke-width="2" opacity="0">
            <animate attributeName="r" values="8;30" dur="1.8s" repeatCount="indefinite"/>
            <animate attributeName="opacity" values=".8;0" dur="1.8s" repeatCount="indefinite"/>
          </circle>
          <circle cx="492" cy="72" r="10" stroke-width="2" opacity="0">
            <animate attributeName="r" values="8;30" dur="1.8s" begin="-.9s" repeatCount="indefinite"/>
            <animate attributeName="opacity" values=".8;0" dur="1.8s" begin="-.9s" repeatCount="indefinite"/>
          </circle>
        </g>
        <!-- 剑穗 -->
        <path d="M431 162 q-10 8 -8 20" stroke="#c8353f" stroke-width="3" fill="none" stroke-linecap="round">
          <animate attributeName="d" dur="1.1s" repeatCount="indefinite"
                   values="M431 162 q-10 8 -8 20;M431 162 q-14 10 -10 24;M431 162 q-10 8 -8 20"/>
        </path>
      </g>
    </g>

    <!-- 5) 右臂前伸执缰 -->
    <g>
      <path d="M496 238 Q534 246 562 252 L558 268 Q524 262 492 258 Z" fill="url(#robe)" stroke="#000" stroke-opacity=".3" stroke-width="1.4"/>
      <path d="M552 246 q16 -2 22 -8" stroke="#8fc0ff" stroke-width="1.6" opacity=".5" fill="none"/><!-- 轮廓光 -->
      <g transform="translate(566,250)">
        <g>
          <animateTransform attributeName="transform" type="rotate" values="4;-8;4" dur="0.9s" repeatCount="indefinite"/>
          <path d="M0 0 q18 4 26 -6 q-10 -2 -16 -8 z" fill="var(--robe)" stroke="#3a3f4a" stroke-width="1.3"/><!-- 袖口翻飞 -->
        </g>
      </g>
      <circle cx="576" cy="250" r="8.5" fill="#e8bd8d" stroke="#c79d6f" stroke-width="2"/>
      <path d="M570 246 q6 -4 11 0" stroke="#c79d6f" stroke-width="1.6" fill="none"/><!-- 握缰指线 -->
    </g>

    <!-- 6) 头颈(小小的、威严的) -->
    <g>
      <path d="M478 246 L462 262 Q470 268 480 262 Z" fill="#101216"/><!-- 后发际残影 -->
      <path d="M483 226 Q503 218 522 228 Q534 234 533 250 Q532 264 521 272 Q505 280 491 274 Q479 268 477 252 Q476 236 483 226 Z"
            fill="#eac48f" stroke="#cfa173" stroke-width="1.8"/>
      <ellipse cx="515" cy="260" rx="7" ry="4" fill="#dba77e" opacity=".7"/><!-- 腮红 -->
      <!-- 刀眉 + 丹凤眼(右向凝视) -->
      <path d="M505 244 l12 -4" stroke="#241610" stroke-width="4" stroke-linecap="round"/>
      <path d="M489 245 l9 -3" stroke="#241610" stroke-width="3.4" stroke-linecap="round"/>
      <ellipse cx="514" cy="250" rx="3.6" ry="2.2" fill="#fff"/>
      <circle cx="515.4" cy="250" r="1.5" fill="#21140c"/>
      <ellipse cx="496" cy="251" rx="2.6" ry="1.7" fill="#fff"/>
      <circle cx="497" cy="251" r="1.1" fill="#21140c"/>
      <!-- 鼻梁 + 鼻尖 -->
      <path d="M522 250 q5 6 2 10" fill="none" stroke="#cfa173" stroke-width="2" stroke-linecap="round"/>
      <!-- 八字髭 -->
      <path d="M523 266 q-9 8 -19 6 M523 266 q11 9 20 7" fill="none" stroke="#241610" stroke-width="4.6" stroke-linecap="round"/>
      <!-- 长须随风(向左后) -->
      <g fill="#241610">
        <path d="M508 272 Q490 288 470 314 Q460 328 470 334 Q480 336 492 324 Q510 302 520 284 Q522 274 516 272 Q511 271 508 272 Z">
          <animateTransform attributeName="transform" type="rotate" values="0 512 274;-4 512 274;0 512 274" dur="1.5s" repeatCount="indefinite"/>
        </path>
        <path d="M500 286 Q486 302 472 322" fill="none" stroke="#0f0a07" stroke-width="2" opacity=".65" stroke-linecap="round"/>
        <path d="M510 292 Q500 310 488 326" fill="none" stroke="#0f0a07" stroke-width="2" opacity=".6" stroke-linecap="round"/>
      </g>

      <!-- ====== 冕旒 ====== -->
      <g transform="translate(500,214)">
        <g>
          <animateTransform attributeName="transform" type="rotate" values="-3;3;-3" dur="2s" repeatCount="indefinite"/>
          <!-- 玉衡横簪 -->
          <rect x="-64" y="-12" width="128" height="4.6" rx="2.3" fill="var(--gold)"/>
          <circle cx="-64" cy="-9.7" r="4" fill="#f4d489"/>
          <circle cx="64" cy="-9.7" r="4" fill="#f4d489"/>
          <!-- 冕板(前高后低之势在此略作斜切) -->
          <path d="M-60 -8 L60 -16 L60 -32 L-60 -24 Z" fill="#15161b" stroke="#33363f" stroke-width="1.6"/>
          <path d="M-60 -12 L60 -20" stroke="#4a4e59" stroke-width="1.6"/>
          <!-- 板底红缘(延) -->
          <path d="M-60 -8 L60 -16 L60 -12 L-60 -4 Z" fill="#a92830"/>
          <!-- 五旒(前后均悬,风往后吹) -->
          <g id="liu">
            <g transform="translate(-52,-7) rotate(8)"><rect width="2" height="14" fill="#e6e9ef"/><circle cy="8" r="3" fill="#fff"/><circle cy="18" r="3" fill="#d33"/><circle cy="28" r="3" fill="#ffc93c"/></g>
            <g transform="translate(-30,-9) rotate(8)"><rect width="2" height="12" fill="#e6e9ef"/><circle cy="7" r="3" fill="#ffc93c"/><circle cy="16" r="3" fill="#fff"/><circle cy="25" r="3" fill="#d33"/></g>
            <g transform="translate(-6,-10) rotate(8)"><rect width="2" height="16" fill="#e6e9ef"/><circle cy="9" r="3" fill="#d33"/><circle cy="20" r="3" fill="#ffc93c"/><circle cy="31" r="3" fill="#fff"/></g>
            <g transform="translate(20,-11) rotate(8)"><rect width="2" height="13" fill="#e6e9ef"/><circle cy="8" r="3" fill="#fff"/><circle cy="17" r="3" fill="#d33"/><circle cy="26" r="3" fill="#ffc93c"/></g>
            <g transform="translate(44,-13) rotate(8)"><rect width="2" height="11" fill="#e6e9ef"/><circle cy="7" r="3" fill="#ffc93c"/><circle cy="15" r="3" fill="#fff"/><circle cy="23" r="3" fill="#d33"/></g>
            <animateTransform attributeName="transform" type="rotate" values="-5;4;-5" dur="1.7s" repeatCount="indefinite" additive="sum"/>
          </g>
          <!-- 板顶冷光 -->
          <path d="M-60 -24 L60 -32" stroke="#9fc0ff" stroke-width="1.6" opacity=".5"/>
        </g>
      </g>
    </g>
  </g>

  <!-- ======================= 前景雪花(慢速大瓣,贴近镜头) ======================= -->
  <g filter="url(#blur2)">
    <circle class="flake" style="--drift:-60px;animation-duration:9s;animation-delay:-2s"  cx="150" cy="-20" r="5" fill="#fff" opacity=".85"/>
    <circle class="flake" style="--drift:40px;animation-duration:11s;animation-delay:-6s"  cx="420" cy="-20" r="4" fill="#fff" opacity=".8"/>
    <circle class="flake" style="--drift:-30px;animation-duration:10s;animation-delay:-4s" cx="640" cy="-20" r="5" fill="#fff" opacity=".8"/>
    <circle class="flake" style="--drift:70px;animation-duration:8s;animation-delay:-1s"   cx="800" cy="-20" r="4" fill="#fff" opacity=".75"/>
    <circle class="flake" style="--drift:-45px;animation-duration:12s;animation-delay:-8s" cx="290" cy="-20" r="4.5" fill="#fff" opacity=".7"/>
  </g>

  <!-- ======================= 标题牌 ======================= -->
  <g>
    <rect x="245" y="522" width="410" height="58" rx="14" fill="#0d1830" opacity=".82"
          stroke="#d9a441" stroke-opacity=".65" stroke-width="1.6"/>
    <text x="450" y="550" text-anchor="middle" font-size="26" letter-spacing="7"
          class="kai" font-weight="bold" fill="#f3ddb0">千古一帝 · 极地巡狩</text>
    <text x="450" y="571" text-anchor="middle" font-size="12.5" letter-spacing="3.5"
          fill="#9fb6d9">始皇帝 ⋅ 幸北极熊 ⋅ 观沧海之冰</text>
  </g>

  <!-- 装饰菱形分隔 -->
  <text x="450" y="516" text-anchor="middle" font-size="10" letter-spacing="12" fill="#d9a441" opacity=".8">◆ ◆ ◆</text>
</svg>
</div>

<script>
/* ---------- 生成背景星星 ---------- */
(function(){
  const g = document.getElementById('stars');
  const NS = 'http://www.w3.org/2000/svg';
  let seed = 7;
  const rnd = () => (seed = (seed * 16807) % 2147483647) / 2147483647;
  for(let i=0;i<46;i++){
    const c = document.createElementNS(NS,'circle');
    c.setAttribute('cx', (rnd()*900).toFixed(1));
    c.setAttribute('cy', (rnd()*250).toFixed(1));
    c.setAttribute('r', (rnd()*1.5+0.5).toFixed(2));
    c.setAttribute('fill','#dfeaff');
    const dur = (2+rnd()*4).toFixed(2)+'s', del=(-rnd()*5).toFixed(2)+'s';
    c.setAttribute('class','star');
    c.style.animationDuration = dur; c.style.animationDelay = del;
    g.appendChild(c);
  }
})();

/* ---------- 生成细碎雪花 ---------- */
(function(){
  const NS='http://www.w3.org/2000/svg';
  const svg=document.getElementById('scene');
  const layer=document.createElementNS(NS,'g');
  // 需插在标题牌之下:用 insertBefore 到标题组之前不便取引用,直接 append 也无妨(在最上层,加低透明度)
  layer.setAttribute('opacity','.5');
  let seed=13; const rnd=()=> (seed=(seed*48271)%2147483647)/2147483647;
  for(let i=0;i<28;i++){
    const c=document.createElementNS(NS,'circle');
    c.setAttribute('class','flake');
    c.setAttribute('cx',(rnd()*900).toFixed(0));
    c.setAttribute('cy','-20');
    c.setAttribute('r',(1+rnd()*2.4).toFixed(1));
    c.setAttribute('fill','#ffffff');
    c.style.setProperty('--drift',((rnd()*160)-80).toFixed(0)+'px');
    c.style.animationDuration=(7+rnd()*9).toFixed(2)+'s';
    c.style.animationDelay=(-rnd()*12).toFixed(2)+'s';
    layer.appendChild(c);
  }
  svg.appendChild(layer);
})();

/* ---------- 播放控制(暂停 SMIL + CSS 由按钮/空格/点击画面触发) ---------- */
(function(){
  const svg=document.getElementById('scene'), btn=document.getElementById('btnPlay');
  let playing=true;
  const refresh=()=>{ btn.textContent = playing ? '⏸ 暂停 / ▶ 播放' : '▶ 已暂停 · 点击继续'; };
  function toggle(){
    playing=!playing;
    if(playing){ svg.unpauseAnimations(); document.documentElement.classList.remove('paused'); }
    else{ svg.pauseAnimations(); document.documentElement.classList.add('paused'); }
    refresh();
  }
  btn.addEventListener('click',toggle);
  svg.addEventListener('click',toggle);
  window.addEventListener('keydown',e=>{
    if(e.code==='Space'){ e.preventDefault(); toggle(); }
    if(e.code==='ArrowLeft'){ svg.setCurrentTime(Math.max(0, svg.getCurrentTime()-0.05)); }
    if(e.code==='ArrowRight'){ svg.setCurrentTime(svg.getCurrentTime()+0.05); }
  });
  if(window.matchMedia('(prefers-reduced-motion: reduce)').matches){
    playing=true; toggle(); // 默认进入暂停态,尊重系统偏好
  }
})();
</script>
</body>
</html> 
4 个赞

这个也太抽象了吧,除了颜色像北极熊,不知道还有哪里像

草,所以这个骑熊是真能动的吗,挥剑前进 :rofl:

qwen3.8-27b exl3-btw4 + fp8kv 上下文262k