GLM-5.3-Flash测试秦始皇骑北极熊
HaHaHaBiuBiuBiu
2026-08-27 10:53
1
看上去似乎还有点神韵呢
📖 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>
最新回复 (3)
-
kudzu 08-27 11:021楼 -
Grace 08-27 11:032楼 -
ZeusFunk 08-31 16:013楼
qwen3.8-27b exl3-btw4 + fp8kv 上下文262k
* 帖子来源Linux.do
附近帖子