我deepseek用的网页版测试的，思考了65s。你这api接入codex里的感觉要精致很多
大善人astra，稳定发挥；
感觉claude跟deepseek-v4.1-flash的风格很像，怪怪的
1 Like
codex app里的astra medium
网页端 极高（应该是5.6sol extrahigh吧）
网页端 6pro
qwen 3.8 27b
1 Like
看来是深有体会啊
看看我这个
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>哪吒骑鳌拜 · 风火轮</title>
<style>
:root {
--gold: #f6d36a;
--ink: #140806;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
width: 100%;
height: 100%;
overflow: hidden;
background: #07040c;
font-family: "Songti SC", "STSong", "Noto Serif SC", "SimSun", "Source Han Serif SC", serif;
color: #f8e6c4;
}
.stage { position: relative; width: 100%; height: 100%; }
svg.scene { display: block; width: 100%; height: 100%; }
.hud {
position: absolute;
left: 28px;
bottom: 24px;
z-index: 4;
pointer-events: none;
text-shadow: 0 2px 18px rgba(0,0,0,.75);
}
.hud h1 {
font-size: clamp(22px, 3.4vw, 44px);
letter-spacing: .48em;
font-weight: 700;
}
.hud p {
margin-top: 8px;
font-size: 13px;
letter-spacing: .32em;
opacity: .78;
}
.hint {
position: absolute;
right: 24px;
bottom: 24px;
font-size: 12px;
letter-spacing: .2em;
opacity: .55;
z-index: 4;
pointer-events: none;
}
.seal {
position: absolute;
right: 28px;
top: 26px;
width: 72px;
height: 72px;
border: 2px solid #c45a3a;
color: #c45a3a;
display: flex;
align-items: center;
justify-content: center;
writing-mode: vertical-rl;
letter-spacing: .28em;
font-size: 15px;
opacity: .72;
pointer-events: none;
text-shadow: none;
box-shadow: 0 0 0 3px rgba(196,90,58,.18) inset;
transform: rotate(8deg);
}
</style>
</head>
<body>
<div class="stage">
<svg class="scene" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" role="img" aria-label="哪吒骑着鳌拜踩风火轮凌空疾驰">
<defs>
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#12061c"/>
<stop offset="38%" stop-color="#2a0c2a"/>
<stop offset="68%" stop-color="#5a1824"/>
<stop offset="100%" stop-color="#1a0a10"/>
</linearGradient>
<radialGradient id="moonGlow" cx="80%" cy="14%" r="30%">
<stop offset="0%" stop-color="#fff4d2" stop-opacity=".92"/>
<stop offset="30%" stop-color="#ffd08a" stop-opacity=".28"/>
<stop offset="100%" stop-color="#ff8a3a" stop-opacity="0"/>
</radialGradient>
<radialGradient id="horizon" cx="50%" cy="100%" r="58%">
<stop offset="0%" stop-color="#ff6a28" stop-opacity=".58"/>
<stop offset="42%" stop-color="#8b1a28" stop-opacity=".24"/>
<stop offset="100%" stop-color="#000" stop-opacity="0"/>
</radialGradient>
<linearGradient id="cloudFill" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f7c9a4" stop-opacity=".55"/>
<stop offset="100%" stop-color="#6a3048" stop-opacity=".16"/>
</linearGradient>
<linearGradient id="nSkin" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#ffd8b8"/>
<stop offset="100%" stop-color="#e8a07a"/>
</linearGradient>
<linearGradient id="aSkin" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#e2b08a"/>
<stop offset="100%" stop-color="#b06a48"/>
</linearGradient>
<linearGradient id="hair" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#2a0c10"/>
<stop offset="100%" stop-color="#090406"/>
</linearGradient>
<linearGradient id="robe" x1="0" y1="0" x2=".35" y2="1">
<stop offset="0%" stop-color="#ff5a3a"/>
<stop offset="48%" stop-color="#c81c1c"/>
<stop offset="100%" stop-color="#6e0c12"/>
</linearGradient>
<linearGradient id="goldTrim" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#fff1b0"/>
<stop offset="50%" stop-color="#f0c14a"/>
<stop offset="100%" stop-color="#a86a12"/>
</linearGradient>
<linearGradient id="spearShaft" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#7a1a12"/>
<stop offset="50%" stop-color="#d43a22"/>
<stop offset="100%" stop-color="#4a0c0c"/>
</linearGradient>
<linearGradient id="blade" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#fff7d2"/>
<stop offset="40%" stop-color="#ffd36a"/>
<stop offset="100%" stop-color="#c45a18"/>
</linearGradient>
<linearGradient id="ribbon" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ff7a5a"/>
<stop offset="50%" stop-color="#e21828"/>
<stop offset="100%" stop-color="#ffb07a"/>
</linearGradient>
<linearGradient id="magua" x1="0" y1="0" x2=".3" y2="1">
<stop offset="0%" stop-color="#ffe08a"/>
<stop offset="40%" stop-color="#e6b22a"/>
<stop offset="100%" stop-color="#8a5a08"/>
</linearGradient>
<linearGradient id="armor" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#2a4a58"/>
<stop offset="55%" stop-color="#163038"/>
<stop offset="100%" stop-color="#0a181c"/>
</linearGradient>
<linearGradient id="fur" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f0d2a8"/>
<stop offset="100%" stop-color="#8a5a32"/>
</linearGradient>
<linearGradient id="beard" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#1a0c08"/>
<stop offset="100%" stop-color="#3a2010"/>
</linearGradient>
<linearGradient id="boot" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#3a1c12"/>
<stop offset="100%" stop-color="#120806"/>
</linearGradient>
<radialGradient id="wheelCore" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#fff6c8"/>
<stop offset="32%" stop-color="#ffb020"/>
<stop offset="70%" stop-color="#ff4a10"/>
<stop offset="100%" stop-color="#7a0800" stop-opacity=".15"/>
</radialGradient>
<radialGradient id="vignetteR" cx="50%" cy="45%" r="72%">
<stop offset="60%" stop-color="#000" stop-opacity="0"/>
<stop offset="100%" stop-color="#000" stop-opacity=".55"/>
</radialGradient>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="6" result="b"/>
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<filter id="softGlow" x="-80%" y="-80%" width="260%" height="260%">
<feGaussianBlur stdDeviation="12" result="b"/>
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<filter id="fireBlur" x="-40%" y="-40%" width="180%" height="180%">
<feGaussianBlur stdDeviation="2.4"/>
</filter>
<filter id="windBlur" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="1.2"/>
</filter>
<clipPath id="sceneClip"><rect width="1600" height="900"/></clipPath>
</defs>
<g clip-path="url(#sceneClip)">
<rect width="1600" height="900" fill="url(#sky)"/>
<rect width="1600" height="900" fill="url(#horizon)"/>
<circle cx="1280" cy="132" r="240" fill="url(#moonGlow)"/>
<circle cx="1280" cy="132" r="48" fill="#fff4d6"/>
<circle cx="1298" cy="120" r="14" fill="#e8d2a8" opacity=".35"/>
<circle cx="1266" cy="146" r="8" fill="#d8c090" opacity=".28"/>
<g id="stars"></g>
<g id="farMountains" opacity=".58">
<path d="M0 720 L160 540 L310 670 L470 470 L650 690 L830 520 L990 680 L1160 450 L1340 660 L1500 500 L1600 630 L1600 900 L0 900 Z" fill="#2a101c"/>
<path d="M0 790 L230 650 L410 770 L590 620 L780 780 L1010 640 L1220 770 L1410 610 L1600 740 L1600 900 L0 900 Z" fill="#1a0a12"/>
</g>
<g id="backClouds"></g>
<g id="windStreaks" opacity=".55" filter="url(#windBlur)"></g>
<g id="trail"></g>
<!-- 骑乘组：哪吒在上，鳌拜在下，脚下风火轮 -->
<g id="rider" transform="translate(800,470)">
<!-- 混天绫后层（缰绳+飘带） -->
<g id="ribbonBack" fill="none" stroke="url(#ribbon)" stroke-linecap="round" filter="url(#softGlow)"></g>
<!-- 鳌拜辫子（脑后） -->
<g id="queueWrap" fill="none" stroke="#120806" stroke-linecap="round"></g>
<!-- 火尖枪 -->
<g id="spear" transform="translate(18,-168) rotate(-32 40 -40)">
<rect x="36" y="-250" width="8" height="400" rx="3" fill="url(#spearShaft)"/>
<rect x="38" y="-250" width="3" height="400" fill="#ffd48a" opacity=".35"/>
<polygon points="40,-274 22,-230 40,-240 58,-230" fill="url(#blade)" filter="url(#glow)"/>
<circle cx="40" cy="-218" r="9" fill="url(#goldTrim)"/>
<circle cx="40" cy="138" r="8" fill="url(#goldTrim)"/>
<path d="M28 150 Q40 176 52 150" fill="#c81c1c"/>
<g id="spearFire" filter="url(#fireBlur)"></g>
</g>
<!-- 风火轮 -->
<g id="wheels">
<ellipse cx="-78" cy="168" rx="70" ry="18" fill="#ff6a20" opacity=".28" filter="url(#softGlow)"/>
<ellipse cx="86" cy="174" rx="70" ry="18" fill="#ff6a20" opacity=".28" filter="url(#softGlow)"/>
<g class="wheel" transform="translate(-78,148)">
<g class="wheelSpin"></g>
</g>
<g class="wheel" transform="translate(86,154)">
<g class="wheelSpin"></g>
</g>
</g>
<!-- 鳌拜 -->
<g id="aobai">
<!-- 左臂（平衡） -->
<g id="aoArmL">
<path d="M-62 -8 Q-128 8 -150 52 Q-128 66 -96 28 Q-70 6 -52 2 Z" fill="url(#aSkin)"/>
<path d="M-132 40 Q-168 58 -158 78 Q-128 66 -126 48 Z" fill="url(#aSkin)"/>
<path d="M-86 4 Q-102 18 -94 36 Q-74 22 -70 8 Z" fill="url(#armor)"/>
<circle cx="-108" cy="22" r="9" fill="url(#goldTrim)"/>
<path d="M-158 72 Q-176 86 -164 98 Q-146 90 -148 76 Z" fill="url(#aSkin)"/>
</g>
<!-- 腿 -->
<g id="aoLegs">
<g id="legL">
<path d="M-28 58 Q-70 96 -86 142 Q-54 150 -28 108 Q-14 80 -8 62 Z" fill="url(#armor)"/>
<path d="M-86 136 Q-102 156 -78 166 Q-60 150 -66 138 Z" fill="url(#boot)"/>
<rect x="-98" y="158" width="40" height="10" rx="3" fill="#2a100c"/>
</g>
<g id="legR">
<path d="M28 60 Q78 102 96 148 Q62 156 34 112 Q18 82 12 62 Z" fill="url(#armor)"/>
<path d="M96 142 Q114 162 88 172 Q70 156 76 144 Z" fill="url(#boot)"/>
<rect x="70" y="164" width="40" height="10" rx="3" fill="#2a100c"/>
</g>
</g>
<!-- 躯干：石青甲 + 黄马褂 -->
<g id="aoTorso">
<path d="M-78 8 Q-88 58 -58 92 L58 94 Q90 56 78 6 Q42 -28 0 -26 Q-44 -30 -78 8 Z" fill="url(#magua)"/>
<path d="M-62 18 Q-68 54 -44 78 L44 80 Q70 50 62 16 Q30 -8 0 -6 Q-32 -10 -62 18 Z" fill="url(#armor)"/>
<!-- 甲片 -->
<path d="M-48 28 H48" stroke="#f0c14a" stroke-width="2" opacity=".65"/>
<path d="M-44 46 H44" stroke="#f0c14a" stroke-width="2" opacity=".5"/>
<path d="M-38 64 H38" stroke="#f0c14a" stroke-width="2" opacity=".4"/>
<path d="M0 10 V78" stroke="#ffd36a" stroke-width="2.2" opacity=".55"/>
<!-- 蟒纹示意 -->
<path d="M-28 36 Q-8 50 6 34 Q22 22 34 40" fill="none" stroke="#7a4a08" stroke-width="3" opacity=".45"/>
<path d="M-22 52 Q0 66 20 50" fill="none" stroke="#7a4a08" stroke-width="2.4" opacity=".35"/>
<!-- 腰带 + 鳌纹 -->
<rect x="-46" y="74" width="92" height="16" rx="3" fill="url(#goldTrim)"/>
<circle cx="0" cy="82" r="9" fill="#163038" stroke="#fff1b0" stroke-width="2"/>
<path d="M-6 82 Q0 76 6 82 Q0 88 -6 82 Z" fill="#f0c14a"/>
<!-- 黄马褂下摆 -->
<path d="M-70 70 Q-40 108 0 96 Q40 110 70 72 Q78 88 42 118 Q0 132 -44 116 Q-80 90 -70 70 Z" fill="url(#magua)" opacity=".95"/>
<path d="M-36 100 Q0 118 36 100" fill="none" stroke="#7a4a08" stroke-width="2" opacity=".35"/>
<!-- 貂裘领 -->
<path d="M-72 -8 Q-86 18 -48 22 Q-20 6 0 8 Q20 6 48 22 Q86 18 72 -8 Q36 -32 0 -28 Q-36 -32 -72 -8 Z" fill="url(#fur)"/>
<path d="M-64 -2 Q-70 12 -48 12" fill="none" stroke="#5a3010" stroke-width="1.4" opacity=".4"/>
<path d="M64 -2 Q70 12 48 12" fill="none" stroke="#5a3010" stroke-width="1.4" opacity=".4"/>
<path d="M-20 -16 Q0 -6 20 -16" fill="none" stroke="#5a3010" stroke-width="1.6" opacity=".35"/>
<!-- 护肩 -->
<path d="M-78 -10 Q-102 4 -90 32 Q-68 18 -60 0 Z" fill="url(#goldTrim)"/>
<path d="M78 -10 Q102 4 90 32 Q68 18 60 0 Z" fill="url(#goldTrim)"/>
</g>
<!-- 右臂 -->
<g id="aoArmR">
<path d="M62 -6 Q128 2 154 44 Q132 60 98 24 Q74 4 50 4 Z" fill="url(#aSkin)"/>
<path d="M86 6 Q104 20 96 38 Q76 22 70 8 Z" fill="url(#armor)"/>
<circle cx="114" cy="20" r="9" fill="url(#goldTrim)"/>
<path d="M140 38 Q176 52 166 74 Q138 62 136 44 Z" fill="url(#aSkin)"/>
<path d="M160 68 Q178 82 166 94 Q148 86 150 72 Z" fill="url(#aSkin)"/>
</g>
<!-- 头颅 -->
<g id="aoHead" transform="translate(0,-86)">
<!-- 耳 -->
<ellipse cx="-38" cy="10" rx="7" ry="12" fill="url(#aSkin)"/>
<ellipse cx="38" cy="10" rx="7" ry="12" fill="url(#aSkin)"/>
<!-- 脸 -->
<ellipse cx="0" cy="10" rx="38" ry="42" fill="url(#aSkin)"/>
<!-- 满洲额顶（剃发） -->
<path d="M-34 -8 Q-30 -36 0 -42 Q30 -36 34 -8 Q18 -28 0 -30 Q-18 -28 -34 -8 Z" fill="#e8c4a0"/>
<path d="M-22 -18 Q0 -26 22 -18" fill="none" stroke="#c09070" stroke-width="1.2" opacity=".5"/>
<!-- 脑后留发 -->
<path d="M-16 -20 Q0 -38 16 -20 Q10 -8 0 -10 Q-10 -8 -16 -20 Z" fill="url(#hair)"/>
<circle cx="0" cy="-24" r="7" fill="#120806"/>
<!-- 鬓 -->
<path d="M-36 2 Q-44 28 -22 38 Q-28 16 -30 6 Z" fill="url(#hair)"/>
<path d="M36 2 Q44 28 22 38 Q28 16 30 6 Z" fill="url(#hair)"/>
<!-- 浓眉 -->
<path d="M-22 0 Q-12 -10 -2 2" fill="none" stroke="#120806" stroke-width="5.2" stroke-linecap="round"/>
<path d="M22 0 Q12 -10 2 2" fill="none" stroke="#120806" stroke-width="5.2" stroke-linecap="round"/>
<!-- 眼：略翻白、被骑得无奈又凶 -->
<ellipse cx="-12" cy="12" rx="7" ry="6.2" fill="#f7efe4"/>
<ellipse cx="12" cy="12" rx="7" ry="6.2" fill="#f7efe4"/>
<ellipse cx="-11" cy="13" rx="3.2" ry="3.8" fill="#1a0808"/>
<ellipse cx="13" cy="13" rx="3.2" ry="3.8" fill="#1a0808"/>
<circle cx="-9.6" cy="11.4" r="1.2" fill="#fff"/>
<circle cx="14.4" cy="11.4" r="1.2" fill="#fff"/>
<!-- 鼻 -->
<path d="M-4 16 Q0 28 4 16" fill="none" stroke="#8a4a32" stroke-width="2.2"/>
<path d="M-5 28 Q0 32 5 28" fill="#c07858"/>
<!-- 八字须 + 络腮 -->
<path d="M-8 32 Q-28 36 -34 28" fill="none" stroke="#120806" stroke-width="3.4" stroke-linecap="round"/>
<path d="M8 32 Q28 36 34 28" fill="none" stroke="#120806" stroke-width="3.4" stroke-linecap="round"/>
<path d="M-28 30 Q-40 58 -16 78 Q0 92 16 78 Q40 58 28 30 Q16 54 0 60 Q-16 54 -28 30 Z" fill="url(#beard)"/>
<path d="M-18 48 Q0 70 18 48" fill="none" stroke="#3a2010" stroke-width="2" opacity=".45"/>
<!-- 嘴：咬牙 -->
<path d="M-10 38 L10 38" stroke="#4a2018" stroke-width="2.4" stroke-linecap="round"/>
<path d="M-6 38 L-4 42 L-1 38 L2 42 L5 38" fill="none" stroke="#f0d8c0" stroke-width="1.3"/>
<!-- 额汗 -->
<g id="sweat" opacity="0">
<ellipse cx="24" cy="-6" rx="4" ry="6" fill="#b8d8e8" opacity=".8"/>
<ellipse cx="24" cy="-8" rx="1.4" ry="2" fill="#fff" opacity=".7"/>
</g>
</g>
</g>
<!-- 哪吒（站在鳌拜肩上） -->
<g id="nezha" transform="translate(6,-176) scale(0.78)">
<!-- 莲光 -->
<ellipse cx="2" cy="108" rx="50" ry="12" fill="#ff8a40" opacity=".22" filter="url(#softGlow)"/>
<g id="nzLegs">
<path d="M-16 40 Q-28 78 -22 112 Q-8 108 -4 78 Q0 54 4 42 Z" fill="url(#nSkin)"/>
<path d="M18 42 Q32 80 28 114 Q12 110 8 78 Q6 54 8 42 Z" fill="url(#nSkin)"/>
<path d="M-26 108 Q-30 122 -14 124 Q-8 112 -12 106 Z" fill="#4a0c10"/>
<path d="M32 110 Q36 124 18 126 Q12 114 16 108 Z" fill="#4a0c10"/>
</g>
<!-- 莲瓣战裙 -->
<path d="M-48 24 Q-8 64 6 38 Q26 66 50 26 Q36 86 4 76 Q-32 86 -48 24 Z" fill="url(#robe)"/>
<path d="M-36 32 Q6 68 42 32" fill="none" stroke="url(#goldTrim)" stroke-width="3"/>
<path d="M-18 38 L6 70 L30 38" fill="none" stroke="#ffd36a" stroke-width="1.4" opacity=".7"/>
<!-- 赤膊肚兜 -->
<path d="M-28 -4 Q-36 22 -16 40 Q6 48 28 38 Q40 16 26 -6 Q8 -20 0 -16 Q-16 -22 -28 -4 Z" fill="url(#nSkin)"/>
<path d="M-16 -8 Q0 18 16 -8 Q8 36 0 40 Q-8 36 -16 -8 Z" fill="url(#robe)"/>
<circle cx="0" cy="8" r="6" fill="url(#goldTrim)"/>
<!-- 护肩 -->
<path d="M-40 -16 Q-56 -4 -48 14 Q-34 6 -26 -8 Z" fill="url(#goldTrim)"/>
<path d="M40 -16 Q56 -4 48 14 Q34 6 26 -8 Z" fill="url(#goldTrim)"/>
<g id="nzArmL">
<path d="M-32 -8 Q-62 18 -48 52 Q-32 44 -22 16 Q-18 2 -16 0 Z" fill="url(#nSkin)"/>
<circle cx="-42" cy="18" r="6" fill="url(#goldTrim)"/>
<path d="M-50 46 Q-62 62 -50 66 Q-40 56 -44 48 Z" fill="url(#nSkin)"/>
</g>
<g id="nzArmR">
<path d="M30 -6 Q64 -22 86 -78 Q102 -70 80 -20 Q58 10 36 10 Z" fill="url(#nSkin)"/>
<circle cx="64" cy="-18" r="6" fill="url(#goldTrim)"/>
</g>
<!-- 乾坤圈 -->
<ellipse cx="2" cy="-4" rx="54" ry="16" fill="none" stroke="url(#goldTrim)" stroke-width="7" filter="url(#glow)"/>
<ellipse cx="2" cy="-4" rx="54" ry="16" fill="none" stroke="#fff6c8" stroke-width="1.5" opacity=".7"/>
<g id="nzHead" transform="translate(0,-56)">
<ellipse cx="0" cy="8" rx="26" ry="30" fill="url(#nSkin)"/>
<!-- 双髻 -->
<circle cx="-16" cy="-28" r="13" fill="url(#hair)"/>
<circle cx="16" cy="-28" r="13" fill="url(#hair)"/>
<circle cx="-16" cy="-28" r="6" fill="url(#goldTrim)"/>
<circle cx="16" cy="-28" r="6" fill="url(#goldTrim)"/>
<path d="M-22 -8 Q-8 -24 0 -18 Q8 -24 22 -8 Q14 -2 0 -6 Q-14 -2 -22 -8 Z" fill="url(#hair)"/>
<path d="M-22 2 Q-34 20 -16 28" fill="url(#hair)"/>
<path d="M22 2 Q34 20 16 28" fill="url(#hair)"/>
<path d="M-14 -8 Q0 -16 14 -8 Q6 0 0 -2 Q-6 0 -14 -8 Z" fill="url(#goldTrim)"/>
<circle cx="0" cy="-6" r="3.2" fill="#e21828"/>
<path d="M-13 4 Q-7 0 -2 5" fill="none" stroke="#2a0c10" stroke-width="2.1" stroke-linecap="round"/>
<path d="M13 4 Q7 0 2 5" fill="none" stroke="#2a0c10" stroke-width="2.1" stroke-linecap="round"/>
<ellipse cx="-8" cy="10" rx="4" ry="4.8" fill="#1a0808"/>
<ellipse cx="8" cy="10" rx="4" ry="4.8" fill="#1a0808"/>
<circle cx="-6.6" cy="8.4" r="1.3" fill="#fff"/>
<circle cx="9.4" cy="8.4" r="1.3" fill="#fff"/>
<!-- 魔丸纹 -->
<path d="M-4 16 Q0 22 4 16" fill="none" stroke="#c81c1c" stroke-width="1.6"/>
<path d="M0 14 L0 22" stroke="#c81c1c" stroke-width="1.4"/>
<path d="M-7 24 Q0 30 7 24" fill="none" stroke="#a04838" stroke-width="1.8" stroke-linecap="round"/>
<ellipse cx="-26" cy="8" rx="4.6" ry="7.4" fill="url(#nSkin)"/>
<ellipse cx="26" cy="8" rx="4.6" ry="7.4" fill="url(#nSkin)"/>
</g>
</g>
<g id="ribbonFront" fill="none" stroke="url(#ribbon)" stroke-linecap="round" filter="url(#glow)"></g>
<g id="sparks"></g>
</g>
<g id="frontClouds"></g>
<g id="embers"></g>
<rect width="1600" height="900" fill="url(#vignetteR)" pointer-events="none"/>
</g>
</svg>
<div class="hud">
<h1>哪吒骑鳌拜</h1>
<p>风火轮疾驰 · 混天绫作缰 · 火尖枪开路</p>
</div>
<div class="seal">御鳌</div>
<div class="hint">单击画面或按空格加速</div>
</div>
<script>
(() => {
const svgNS = "http://www.w3.org/2000/svg";
const $ = (id) => document.getElementById(id);
function el(name, attrs = {}, parent) {
const n = document.createElementNS(svgNS, name);
for (const [k, v] of Object.entries(attrs)) n.setAttribute(k, v);
if (parent) parent.appendChild(n);
return n;
}
const stars = $("stars");
for (let i = 0; i < 96; i++) {
const c = el("circle", {
cx: (Math.random() * 1600).toFixed(1),
cy: (Math.random() * 500).toFixed(1),
r: (Math.random() * 1.6 + 0.3).toFixed(2),
fill: Math.random() > .25 ? "#fff6d8" : "#ffd08a",
opacity: (Math.random() * 0.7 + 0.2).toFixed(2)
}, stars);
el("animate", {
attributeName: "opacity",
values: "0.15;0.95;0.2",
dur: (1.6 + Math.random() * 2.8).toFixed(2) + "s",
begin: (Math.random() * 3).toFixed(2) + "s",
repeatCount: "indefinite"
}, c);
}
function cloudPath(w, h) {
const bumps = 5 + Math.floor(Math.random() * 3);
let d = `M 0 ${h * 0.7}`;
for (let i = 0; i <= bumps; i++) {
const x = (i / bumps) * w;
const y = h * (0.25 + Math.sin(i * 1.7) * 0.18 + (i % 2) * 0.08);
const cx = x - w / bumps * 0.5;
d += ` Q ${cx.toFixed(1)} ${(y - h * 0.35).toFixed(1)} ${x.toFixed(1)} ${y.toFixed(1)}`;
}
d += ` L ${w} ${h} L 0 ${h} Z`;
return d;
}
function spawnClouds(layer, count, y0, y1, scaleMin, scaleMax, opacity, speedBase) {
const items = [];
for (let i = 0; i < count; i++) {
const g = el("g", {}, layer);
const w = 220 + Math.random() * 280;
const h = 50 + Math.random() * 40;
el("path", {
d: cloudPath(w, h),
fill: "url(#cloudFill)",
opacity: String(opacity * (0.6 + Math.random() * 0.4))
}, g);
items.push({
g,
x: Math.random() * 1800 - 200,
y: y0 + Math.random() * (y1 - y0),
s: scaleMin + Math.random() * (scaleMax - scaleMin),
v: speedBase * (0.6 + Math.random() * 0.8)
});
}
return items;
}
const backClouds = spawnClouds($("backClouds"), 7, 400, 610, 0.7, 1.3, 0.45, 18);
const frontClouds = spawnClouds($("frontClouds"), 5, 640, 830, 1.15, 1.85, 0.55, 44);
const windLayer = $("windStreaks");
const streaks = [];
for (let i = 0; i < 20; i++) {
const p = el("path", {
fill: "none",
stroke: i % 2 ? "#ffd08a" : "#ff8a4a",
"stroke-width": (1 + Math.random() * 1.6).toFixed(2),
opacity: "0.35"
}, windLayer);
streaks.push({
p, x: Math.random() * 1600, y: 70 + Math.random() * 720,
len: 40 + Math.random() * 90, v: 90 + Math.random() * 160,
amp: 6 + Math.random() * 10
});
}
function buildWheel(spinG) {
el("circle", { r: "54", fill: "url(#wheelCore)", filter: "url(#softGlow)", opacity: ".92" }, spinG);
el("circle", { r: "40", fill: "none", stroke: "#ffb020", "stroke-width": "8" }, spinG);
el("circle", { r: "26", fill: "none", stroke: "#fff3b0", "stroke-width": "3.2" }, spinG);
el("circle", { r: "12", fill: "#fff6c8" }, spinG);
for (let i = 0; i < 8; i++) {
const a = (i / 8) * Math.PI * 2;
el("line", {
x1: "0", y1: "0",
x2: (Math.cos(a) * 40).toFixed(1),
y2: (Math.sin(a) * 40).toFixed(1),
stroke: "#7a1a08",
"stroke-width": "3.4"
}, spinG);
}
for (let i = 0; i < 14; i++) {
const a = (i / 14) * Math.PI * 2;
const r0 = 42, r1 = 62 + (i % 2) * 10;
el("path", {
d: `M ${(Math.cos(a)*r0).toFixed(1)} ${(Math.sin(a)*r0).toFixed(1)} Q ${(Math.cos(a+0.16)*r1).toFixed(1)} ${(Math.sin(a+0.16)*r1).toFixed(1)} ${(Math.cos(a+0.3)*r0).toFixed(1)} ${(Math.sin(a+0.3)*r0).toFixed(1)}`,
fill: i % 2 ? "#ff5a10" : "#ffb020",
opacity: ".88",
filter: "url(#fireBlur)"
}, spinG);
}
}
document.querySelectorAll(".wheelSpin").forEach(buildWheel);
const trail = $("trail");
const particles = [];
function burst(n = 6) {
for (let i = 0; i < n; i++) {
const c = el("circle", {
r: (2 + Math.random() * 5).toFixed(1),
fill: Math.random() > .4 ? "#ff7a20" : "#ffd060",
filter: "url(#fireBlur)"
}, trail);
particles.push({
n: c,
x: 700 + Math.random() * 180,
y: 600 + Math.random() * 50,
vx: -90 - Math.random() * 170,
vy: (Math.random() - 0.5) * 55,
life: 1,
decay: 0.55 + Math.random() * 0.85
});
}
}
const ribBack = $("ribbonBack");
const ribFront = $("ribbonFront");
const ribbonPaths = [];
function makeRibbon(parent, width, segs, amp, phaseOff, yOff, x0, span) {
const p = el("path", {
"stroke-width": String(width),
fill: "none",
"stroke-linejoin": "round"
}, parent);
ribbonPaths.push({ p, segs, amp, phaseOff, yOff, x0, span });
}
makeRibbon(ribBack, 16, 18, 38, 0.4, -40, 10, 280);
makeRibbon(ribBack, 9, 16, 26, 1.2, 20, -10, 240);
makeRibbon(ribFront, 12, 14, 30, 2.1, -90, 20, 220);
makeRibbon(ribFront, 7, 12, 18, 3.0, -20, 0, 200);
/* 缰绳：从哪吒手绕过鳌拜胸前 */
makeRibbon(ribFront, 8, 10, 14, 0.2, -110, 8, 90);
function ribbonD(t, cfg) {
const pts = [];
for (let i = 0; i <= cfg.segs; i++) {
const u = i / cfg.segs;
const x = cfg.x0 - u * cfg.span - Math.sin(t * 1.6 + cfg.phaseOff) * 16;
const y = cfg.yOff + Math.sin(t * 2.2 + u * 4.2 + cfg.phaseOff) * cfg.amp
+ Math.cos(t * 1.3 + u * 2.8) * (cfg.amp * 0.35)
+ u * u * 36;
pts.push([x, y]);
}
let d = `M ${pts[0][0].toFixed(1)} ${pts[0][1].toFixed(1)}`;
for (let i = 1; i < pts.length; i++) {
const prev = pts[i - 1];
const cur = pts[i];
const cx = (prev[0] + cur[0]) / 2;
const cy = (prev[1] + cur[1]) / 2;
d += ` Q ${prev[0].toFixed(1)} ${prev[1].toFixed(1)} ${cx.toFixed(1)} ${cy.toFixed(1)}`;
}
return d;
}
const queueWrap = $("queueWrap");
const queueMain = el("path", { fill: "none", stroke: "#120806", "stroke-width": "9", "stroke-linecap": "round" }, queueWrap);
const queueHi = el("path", { fill: "none", stroke: "#3a2018", "stroke-width": "3", "stroke-linecap": "round", opacity: ".55" }, queueWrap);
const queueTip = el("path", { fill: "none", stroke: "#120806", "stroke-width": "13", "stroke-linecap": "round" }, queueWrap);
function queueD(t, boost) {
const pts = [];
for (let i = 0; i <= 14; i++) {
const u = i / 14;
const x = -8 - u * (210 + boost * 40) - Math.sin(t * 2 + u * 3) * 10;
const y = -108 + u * 36 + Math.sin(t * 2.6 + u * 5) * (16 + boost * 8) + u * u * 20;
pts.push([x, y]);
}
let d = `M ${pts[0][0].toFixed(1)} ${pts[0][1].toFixed(1)}`;
for (let i = 1; i < pts.length; i++) {
const prev = pts[i - 1], cur = pts[i];
d += ` Q ${prev[0].toFixed(1)} ${prev[1].toFixed(1)} ${((prev[0]+cur[0])/2).toFixed(1)} ${((prev[1]+cur[1])/2).toFixed(1)}`;
}
return d;
}
const spearFire = $("spearFire");
const flame = el("ellipse", { cx: "40", cy: "-278", rx: "10", ry: "18", fill: "#ffb020", opacity: ".85" }, spearFire);
const flame2 = el("ellipse", { cx: "40", cy: "-292", rx: "6", ry: "14", fill: "#fff3b0", opacity: ".8" }, spearFire);
const rider = $("rider");
const wheels = [...document.querySelectorAll(".wheelSpin")];
const aoArmL = $("aoArmL");
const aoArmR = $("aoArmR");
const aoHead = $("aoHead");
const aoTorso = $("aoTorso");
const legL = $("legL");
const legR = $("legR");
const nezha = $("nezha");
const nzHead = $("nzHead");
const nzArmL = $("nzArmL");
const nzArmR = $("nzArmR");
const spear = $("spear");
const sweat = $("sweat");
let boost = 0;
let t0 = performance.now();
const goBoost = () => { boost = 1; };
document.querySelector(".stage").addEventListener("click", goBoost);
window.addEventListener("keydown", (e) => {
if (e.code === "Space") { e.preventDefault(); goBoost(); }
});
function tick(now) {
const dt = Math.min(0.033, (now - t0) / 1000);
t0 = now;
const t = now / 1000;
boost += (0 - boost) * dt * 1.35;
const speed = 1 + boost * 2.5;
const bob = Math.sin(t * 2.05) * 11 + Math.sin(t * 3.3) * 4;
const sway = Math.sin(t * 1.35) * 10;
const lean = -9 - Math.sin(t * 1.35) * 3 - boost * 12;
rider.setAttribute("transform",
`translate(${800 + sway}, ${470 + bob}) rotate(${lean})`);
aoTorso.setAttribute("transform", `rotate(${Math.sin(t * 2.1) * 1.8})`);
aoHead.setAttribute("transform", `translate(0,-86) rotate(${Math.sin(t * 2.5) * 3 - 2})`);
aoArmL.setAttribute("transform", `rotate(${Math.sin(t * 2.8) * 10 - 8} -62 -8)`);
aoArmR.setAttribute("transform", `rotate(${Math.sin(t * 2.6 + 1) * 10 + 6} 62 -6)`);
legL.setAttribute("transform", `rotate(${Math.sin(t * 8 * speed) * 6} -28 58)`);
legR.setAttribute("transform", `rotate(${Math.sin(t * 8 * speed + 3.1) * 6} 28 60)`);
nezha.setAttribute("transform",
`translate(${6 + Math.sin(t * 2.4) * 2}, ${-176 + Math.sin(t * 3.1) * 3}) scale(0.78) rotate(${Math.sin(t * 2.2) * 3})`);
nzHead.setAttribute("transform", `translate(0,-56) rotate(${Math.sin(t * 2.8) * 5})`);
nzArmL.setAttribute("transform", `rotate(${Math.sin(t * 3.2) * 10 - 20} -32 -8)`);
nzArmR.setAttribute("transform", `rotate(${Math.sin(t * 2.7) * 6 - 4} 30 -6)`);
spear.setAttribute("transform", `translate(18,-168) rotate(${-32 + Math.sin(t * 2.3) * 3} 40 -40)`);
flame.setAttribute("ry", (16 + Math.sin(t * 14) * 4 + boost * 8).toFixed(1));
flame2.setAttribute("ry", (12 + Math.sin(t * 18 + 1) * 3 + boost * 6).toFixed(1));
sweat.setAttribute("opacity", (boost * 0.95).toFixed(2));
wheels.forEach((w, i) => {
w.setAttribute("transform", `rotate(${(t * (480 + i * 50) * speed) % 360})`);
});
ribbonPaths.forEach(cfg => cfg.p.setAttribute("d", ribbonD(t, cfg)));
const qd = queueD(t, boost);
queueMain.setAttribute("d", qd);
queueHi.setAttribute("d", qd);
queueTip.setAttribute("d", qd);
const moveClouds = (arr) => {
arr.forEach(c => {
c.x -= c.v * speed * dt * (1 + boost);
if (c.x < -420) c.x = 1680 + Math.random() * 200;
c.g.setAttribute("transform", `translate(${c.x.toFixed(1)},${c.y.toFixed(1)}) scale(${c.s.toFixed(2)})`);
});
};
moveClouds(backClouds);
moveClouds(frontClouds);
streaks.forEach(s => {
s.x -= s.v * speed * dt * (1.2 + boost);
if (s.x < -120) {
s.x = 1680;
s.y = 80 + Math.random() * 700;
s.len = 40 + Math.random() * 90;
}
const y2 = s.y + Math.sin(t * 3 + s.y) * s.amp;
s.p.setAttribute("d", `M ${s.x.toFixed(1)} ${s.y.toFixed(1)} Q ${(s.x - s.len * 0.5).toFixed(1)} ${y2.toFixed(1)} ${(s.x - s.len).toFixed(1)} ${s.y.toFixed(1)}`);
});
if (Math.random() < 0.6 + boost) burst(boost > 0.3 ? 12 : 5);
for (let i = particles.length - 1; i >= 0; i--) {
const p = particles[i];
p.x += p.vx * dt * speed;
p.y += p.vy * dt;
p.life -= p.decay * dt;
p.n.setAttribute("cx", p.x.toFixed(1));
p.n.setAttribute("cy", p.y.toFixed(1));
p.n.setAttribute("opacity", Math.max(0, p.life).toFixed(2));
p.n.setAttribute("r", ((2 + p.life * 4) * (0.65 + boost)).toFixed(1));
if (p.life <= 0) {
p.n.remove();
particles.splice(i, 1);
}
}
if (particles.length > 90) {
const extra = particles.splice(0, particles.length - 90);
extra.forEach(p => p.n.remove());
}
requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
})();
</script>
</body>
</html>
这是什么面板？ dsh吗？ 跟我的咋不一样呢
小米的mimo desktop，现在还在测试
1 Like
手里还拿着双筷子，急着干饭吗 
这tm 搞的跟开盲盒一样，怎么写生产的代码
