真的好起来了：GLM5.3Flash 长颈鹿打螺丝测试

Air84 2026-08-27 00:22 1

鹈鹕骑车可以后训练，长颈鹿打螺丝应该是没有准备过的；

提示词创建一个HTML，内容是SVG绘制一个长颈鹿打螺丝的2D动画，哐哐写了半小时，结果真的不错：

好起来了，真的好起来了，唐杰限时升格为唐哥(๑•̀ㅂ•́)و✧

src

🦒 长颈鹿打螺丝 · SVG 2D 动画

:root{
--T: 12s; /* 主时间轴：整个打螺丝流程 12 秒一个循环 */
--ink:#7a4a12;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
min-height:100%;
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:14px; padding:28px 16px;
background: radial-gradient(1200px 700px at 50% -10%, #fdf7e6 0%, #f4ead2 55%, #ecdfc0 100%);
font-family: "PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
}
h1{ font-size:22px; letter-spacing:2px; color:#6b4413; }
h1 small{ display:block; text-align:center; font-size:12px; font-weight:400; color:#a1875a; letter-spacing:4px; margin-top:6px;}
.stage{
width:min(860px,96vw);
background:#fffdf4;
border:1px solid #e8dcbe;
border-radius:20px;
box-shadow:0 18px 45px rgba(122,84,28,.16), inset 0 0 0 6px #fffef9;
padding:14px;
}
svg{ display:block; width:100%; height:auto; border-radius:12px; }
footer{ font-size:12px; color:#a4906a; letter-spacing:1px; }

/* ---------- 所有跟随主时间轴（–T）的动画 ---------- /

#wrist,#screwMove,#screwSpin,#poof,#spark,#kada,#heart,#sweat,

#dust,#effort,#chip1,#chip2,#chip3,#head,#iris{

animation-duration:var(–T);

animation-iteration-count:infinite;

}

/ 手腕转动+升降：起手悬空 → 啄住螺丝 → 三段发力越拧越深 → 完工松手抬起 /

@keyframes armSwing{

0%{transform:translateY(-24px) rotate(0deg)}

2%{transform:translateY(-18px) rotate(-9deg)}

4%{transform:translateY(-16px) rotate(6deg)}

6%{transform:translateY(-21px) rotate(-11deg)}

8%{transform:translateY(-15px) rotate(7deg)}

10%{transform:translateY(-20px) rotate(-11deg)}

12%{transform:translateY(-15px) rotate(7deg)}

14%{transform:translateY(-19px) rotate(-11deg)}

16%{transform:translateY(-14px) rotate(0deg)}

22%{transform:translateY(-14px) rotate(0deg)}

24%{transform:translateY(-19px) rotate(-11deg)}

26%{transform:translateY(-14px) rotate(7deg)}

28%{transform:translateY(-18px) rotate(-11deg)}

30%{transform:translateY(-13px) rotate(7deg)}

32%{transform:translateY(-18px) rotate(-11deg)}

34%{transform:translateY(-12px) rotate(7deg)}

36%{transform:translateY(-12px) rotate(0deg)}

42%{transform:translateY(-12px) rotate(0deg)}

44%{transform:translateY(-17px) rotate(-11deg)}

46%{transform:translateY(-12px) rotate(7deg)}

48%{transform:translateY(-17px) rotate(-11deg)}

50%{transform:translateY(-11px) rotate(7deg)}

52%{transform:translateY(-16px) rotate(-11deg)}

54%{transform:translateY(-10px) rotate(7deg)}

56%{transform:translateY(-6px) rotate(0deg)}

66%{transform:translateY(-6px) rotate(0deg)}

68%{transform:translateY(-9px) rotate(-5deg)}

70%{transform:translateY(-4px) rotate(3deg)}

72%{transform:translateY(-2px) rotate(0deg)}

80%{transform:translateY(-8px) rotate(0deg)}

86%{transform:translateY(-14px) rotate(0deg)}

92%{transform:translateY(-20px) rotate(0deg)}

97%{transform:translateY(-24px) rotate(0deg)}

100%{transform:translateY(-24px) rotate(0deg)}

}

/ 螺丝下沉：随每段发力分步旋入，结束后“啵”地换新螺丝从天而降 /

@keyframes screwDrop{

0%{transform:translateY(0)}

7%{transform:translateY(1px)}

16%{transform:translateY(5px)}

27%{transform:translateY(6.5px)}

36%{transform:translateY(10.5px)}

47%{transform:translateY(12px)}

56%{transform:translateY(17px)}

74%{transform:translateY(17px)}

80%{transform:translateY(-400px)}

86%{transform:translateY(-400px)}

89.5%{transform:translateY(-90px)}

91%{transform:translateY(.5px)}

92.3%{transform:translateY(-6px)}

93.6%{transform:translateY(.8px)}

95%{transform:translateY(0)}

100%{transform:translateY(0)}

}

/ 新螺丝下落时的旋转 /

@keyframes spinDrop{

0%{transform:rotate(0deg)} 79.5%{transform:rotate(0deg)}

86%{transform:rotate(-14deg)} 90%{transform:rotate(-4deg)}

93%{transform:rotate(3deg)} 95%{transform:rotate(0deg)}

100%{transform:rotate(0deg)}

}

/ “啵”的替换云雾 /

@keyframes poofAn{

0%,73.5%{opacity:0; transform:scale(.2) rotate(0deg)}

76% {opacity:1; transform:scale(1.06) rotate(8deg)}

81% {opacity:1; transform:scale(1) rotate(26deg)}

85.5% {opacity:0; transform:scale(.35) rotate(40deg)}

100% {opacity:0; transform:scale(.35) rotate(40deg)}

}

/ 完工星光 /

@keyframes sparkAn{

0%,74.5%{opacity:0; transform:translate(545px,298px) scale(.2) rotate(0deg)}

75.8% {opacity:1; transform:translate(545px,298px) scale(1.15) rotate(18deg)}

80% {opacity:.95; transform:translate(545px,298px) scale(1) rotate(30deg)}

83.5% {opacity:0; transform:translate(545px,298px) scale(.4) rotate(45deg)}

100% {opacity:0; transform:translate(545px,298px) scale(.4) rotate(45deg)}

}

/ “咔哒！”字样（子元素绝对坐标定位，这里只做相对动效） /

@keyframes kadaAn{

0%,74% {opacity:0; transform:translateY(10px) scale(.3) rotate(-3deg)}

75.6% {opacity:1; transform:translateY(0) scale(1.06) rotate(0deg)}

79.5% {opacity:1; transform:translateY(0) scale(1) rotate(0deg)}

83.5% {opacity:0; transform:translateY(-12px) scale(.95) rotate(2deg)}

100% {opacity:0; transform:translateY(-12px) scale(.95) rotate(2deg)}

}

/ 爱心飞出 /

@keyframes heartAn{

0%,75.8%{opacity:0; transform:translate(508px,126px) translateY(10px) scale(.3) rotate(-12deg)}

77.5% {opacity:1; transform:translate(508px,126px) translateY(0) scale(1) rotate(0deg)}

81% {opacity:1; transform:translate(508px,126px) translateY(-14px) scale(1) rotate(8deg)}

84.5% {opacity:0; transform:translate(508px,126px) translateY(-26px) scale(.9) rotate(14deg)}

100% {opacity:0; transform:translate(508px,126px) translateY(-26px) scale(.9) rotate(14deg)}

}

/ 使劲冒汗珠 /

@keyframes sweatAn{

0%,46%{opacity:0; transform:translateY(0) scale(.6)}

48% {opacity:1; transform:translateY(0) scale(1)}

53% {opacity:1; transform:translateY(9px) scale(1)}

57% {opacity:0; transform:translateY(15px) scale(1)}

100% {opacity:0; transform:translateY(15px) scale(1)}

}

/ 木屑：每完成一段出现一片，代表进度 /

@keyframes ch1{

0%,17%{opacity:0} 18.5%{opacity:.95; } 20%{opacity:1}

75.5%{opacity:1} 77%{opacity:0} 100%{opacity:0}

}

@keyframes ch2{

0%,35%{opacity:0} 36.5%{opacity:.95; } 38%{opacity:1}

75.5%{opacity:1} 77%{opacity:0} 100%{opacity:0}

}

@keyframes ch3{

0%,55%{opacity:0} 56.5%{opacity:.95; } 58%{opacity:1}

75.5%{opacity:1} 77%{opacity:0} 100%{opacity:0}

}

/ 打磨时的灰尘小扑 /

@keyframes dustAn{

0%,4.5%{opacity:0} 5%{opacity:.45} 7%{opacity:0}

12.5%{opacity:0} 13%{opacity:.45} 15%{opacity:0}

24.5%{opacity:0} 25%{opacity:.45} 27%{opacity:0}

30.5%{opacity:0} 31%{opacity:.45} 33%{opacity:0}

44.5%{opacity:0} 45%{opacity:.45} 47%{opacity:0}

50.5%{opacity:0} 51%{opacity:.45} 53%{opacity:0}

91.5%{opacity:0} 92%{opacity:.6} 94%{opacity:0}

100%{opacity:0}

}

/ 用力时的速度线（跟手腕一起晃） /

@keyframes effortOp{

0%,1.5%{opacity:0} 2%{opacity:.8} 15.5%{opacity:.8} 16.5%{opacity:0}

21.5%{opacity:0} 22%{opacity:.8} 35.5%{opacity:.8} 36.5%{opacity:0}

41.5%{opacity:0} 42%{opacity:.8} 55.5%{opacity:.8} 56.5%{opacity:0}

100%{opacity:0}

}

/ 头部：工作时不时点头，完工后仰头开心 /

@keyframes headNod{

0%{transform:rotate(2deg)} 6%{transform:rotate(-1deg)} 12%{transform:rotate(2deg)}

18%{transform:rotate(-1deg)} 24%{transform:rotate(2deg)} 30%{transform:rotate(-1deg)}

36%{transform:rotate(2deg)} 42%{transform:rotate(-1deg)} 48%{transform:rotate(2deg)}

54%{transform:rotate(-1deg)} 60%{transform:rotate(2deg)} 66%{transform:rotate(-1deg)}

70%{transform:rotate(-9deg)} 74%{transform:rotate(-2deg)}

78%{transform:rotate(2deg)} 84%{transform:rotate(0deg)} 100%{transform:rotate(0deg)}

}

/ 瞳孔用力收缩、完工放光 */

@keyframes irisDilate{

0%{transform:scale(1)} 2%{transform:scale(.8)} 15.5%{transform:scale(.8)} 17%{transform:scale(1)}

22%{transform:scale(.8)} 35.5%{transform:scale(.8)} 37%{transform:scale(1)}

42%{transform:scale(.8)} 55.5%{transform:scale(.8)} 57%{transform:scale(1)}

66%{transform:scale(1)} 70%{transform:scale(1.1)} 84%{transform:scale(1.1)}

88%{transform:scale(1)} 100%{transform:scale(1)}

}

/* ---------- 独立的循环小动画（呼吸、尾巴、耳朵等） ---------- */

@keyframes breath{

0%,100%{transform:scaleY(1)} 50%{transform:scaleY(1.02)}

}

@keyframes tailWag{

from{transform:rotate(-14deg)} to{transform:rotate(13deg)}

}

@keyframes blinkLid{

0%{transform:scaleY(.06)} 86%{transform:scaleY(.06)}

89%{transform:scaleY(1)} 92%{transform:scaleY(.06)} 100%{transform:scaleY(.06)}

}

@keyframes earTw{

0%{transform:rotate(0)} 82%{transform:rotate(0)} 85%{transform:rotate(-14deg)}

88%{transform:rotate(0)} 91%{transform:rotate(-8deg)} 94%{transform:rotate(0)} 100%{transform:rotate(0)}

}

@keyframes raySpin{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

@keyframes driftA{ from{transform:translateX(-70px)} to{transform:translateX(60px)} }

@keyframes driftB{ from{transform:translateX(45px)} to{transform:translateX(-65px)} }

@keyframes birdFloat{

0%,100%{transform:translate(0,0)} 50%{transform:translate(26px,-9px)}

}

/* ---------- 应用 ---------- */

#wrist { animation-name:armSwing; animation-timing-function:ease-in-out; }

#screwMove { animation-name:screwDrop; animation-timing-function:ease-in-out; }

#screwSpin { animation-name:spinDrop; animation-timing-function:ease-in-out; }

#poof { animation-name:poofAn; animation-timing-function:ease-out; }

#spark { animation-name:sparkAn; animation-timing-function:ease-out; }

#kada { animation-name:kadaAn; animation-timing-function:ease-out; }

#heart { animation-name:heartAn; animation-timing-function:ease-out; }

#sweat { animation-name:sweatAn; animation-timing-function:ease-out; }

#dust { animation-name:dustAn; animation-timing-function:linear; }

#effort { animation-name:effortOp; animation-timing-function:linear; }

#chip1 { animation-name:ch1; }

#chip2 { animation-name:ch2; }

#chip3 { animation-name:ch3; }

#head { animation-name:headNod; animation-timing-function:ease-in-out; }

#iris { animation-name:irisDilate;animation-timing-function:ease-in-out; }

#breath { animation:breath 3.4s ease-in-out infinite; transform-origin:250px 430px; transform-box:view-box; }

#tail { animation:tailWag 2.4s ease-in-out infinite alternate; transform-origin:166px 290px; transform-box:view-box; }

#ear { animation:earTw 5.4s ease-in-out infinite; transform-origin:424px 150px; transform-box:view-box; }

#lid { animation:blinkLid 4.8s ease-in-out infinite; transform-origin:444px 150px; transform-box:view-box; }

#rays { animation:raySpin 70s linear infinite; transform-origin:706px 86px; transform-box:view-box; }

#cloudA { animation:driftA 26s ease-in-out infinite alternate; }

#cloudB { animation:driftB 38s ease-in-out infinite alternate; }

#birds { animation:birdFloat 5s ease-in-out infinite; }

/* 需要按绝对坐标做旋转中心的元素 /

#wrist, #head, #iris, #screwSpin{ transform-box:view-box; }

#wrist{ transform-origin:518px 283px; }

#head { transform-origin:436px 160px; }

#iris { transform-origin:446px 161px; }

#screwSpin{ transform-origin:545px 330px; }

/ 子元素为绝对坐标的特效组：动效原点即其画面位置 */

#kada { transform-origin:604px 250px; transform-box:view-box; }

#poof { transform-origin:546px 326px; transform-box:view-box; }

#sweat{ transform-origin:452px 116px; transform-box:view-box; }

#chip1,#chip2,#chip3{ will-change:opacity; }

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

*{ animation-play-state:paused !important; }

}

🦒 长颈鹿打螺丝
SVG 2D ANIMATION

<!-- 螺丝“进入木头”的可视区域：面上全可见，只允许在槽口内往下可见 -->

<clipPath id="screwClip">

  <rect x="0" y="-220" width="800" height="561"/>

  <rect x="537" y="341" width="16" height="19"/>

</clipPath>

<!-- 远侧腿 -->

<g stroke-linecap="round" fill="none">

  <path d="M283,315 L281,370 Q280,396 282,418" stroke="#6b3f0e" stroke-width="18"/>

  <path d="M283,315 L281,370 Q280,396 282,418" stroke="#d99b3a" stroke-width="12"/>

  <path d="M215,315 L217,368 Q218,394 216,418" stroke="#6b3f0e" stroke-width="18"/>

  <path d="M215,315 L217,368 Q218,394 216,418" stroke="#d99b3a" stroke-width="12"/>

</g>

<rect x="273" y="414" width="17" height="13" rx="4" fill="#7c4a1d" stroke="#5d3a12"/>

<rect x="207" y="414" width="17" height="13" rx="4" fill="#7c4a1d" stroke="#5d3a12"/>



<!-- 身体（含呼吸） -->

<g id="breath">

  <!-- 脖子：先画，被身体盖住根部 -->

  <path d="M285,304 C330,220 355,158 436,158" fill="none" stroke="#7a4a12" stroke-width="40" stroke-linecap="round"/>

  <path d="M285,304 C330,220 355,158 436,158" fill="none" stroke="#f2b64e" stroke-width="31" stroke-linecap="round"/>

  <path d="M295,270 C338,196 366,150 442,150" fill="none" stroke="#8f4f16" stroke-width="9"

        stroke-dasharray="11 9" stroke-linecap="round" opacity=".9"/>

  <ellipse cx="330" cy="222" rx="11" ry="16" fill="#b5722d" transform="rotate(35 330 222)"/>

  <ellipse cx="372" cy="192" rx="9"  ry="13" fill="#b5722d" transform="rotate(28 372 192)"/>

  <ellipse cx="408" cy="172" rx="8"  ry="11" fill="#b5722d" transform="rotate(20 408 172)"/>



  <!-- 躯干 -->

  <ellipse cx="238" cy="298" rx="84" ry="54" fill="#f6c453" stroke="#7a4a12" stroke-width="4"

           transform="rotate(-6 238 298)"/>

  <ellipse cx="252" cy="330" rx="46" ry="20" fill="#fbe3ac" opacity=".9" transform="rotate(-8 252 330)"/>

  <ellipse cx="206" cy="286" rx="16" ry="13" fill="#b5722d" transform="rotate(-14 206 286)"/>

  <ellipse cx="258" cy="318" rx="18" ry="12" fill="#b5722d" transform="rotate(8 258 318)"/>

  <ellipse cx="290" cy="272" rx="13" ry="10" fill="#b5722d" transform="rotate(-20 290 272)"/>

  <ellipse cx="176" cy="306" rx="11" ry="9"  fill="#b5722d" transform="rotate(15 176 306)"/>



  <!-- 近侧腿 -->

  <g stroke-linecap="round" fill="none">

    <path d="M301,318 L303,372 Q303,398 300,420" stroke="#7a4a12" stroke-width="19"/>

    <path d="M301,318 L303,372 Q303,398 300,420" stroke="#f2b64e" stroke-width="13"/>

    <path d="M233,318 L230,370 Q228,396 231,420" stroke="#7a4a12" stroke-width="19"/>

    <path d="M233,318 L230,370 Q228,396 231,420" stroke="#f2b64e" stroke-width="13"/>

  </g>

  <rect x="292" y="416" width="18" height="14" rx="4" fill="#8a5a2b" stroke="#5d3a12" stroke-width="2"/>

  <rect x="222" y="416" width="18" height="14" rx="4" fill="#8a5a2b" stroke="#5d3a12" stroke-width="2"/>



  <!-- 头 -->

  <g id="head">

    <!-- 角 -->

    <line x1="430" y1="138" x2="426" y2="118" stroke="#caa06a" stroke-width="4.4" stroke-linecap="round"/>

    <circle cx="425" cy="113" r="6.2" fill="#8a4f22"/>

    <line x1="444" y1="138" x2="448" y2="119" stroke="#caa06a" stroke-width="4.4" stroke-linecap="round"/>

    <circle cx="449" cy="114" r="6.2" fill="#8a4f22"/>

    <!-- 耳朵 -->

    <g id="ear">

      <path d="M424,150 C408,134 394,136 398,150 C401,159 415,160 424,157 Z"

            fill="#f2b64e" stroke="#7a4a12" stroke-width="3.4"/>

      <path d="M418,151 C410,143 403,144 405,150 C407,155 413,155 418,153 Z" fill="#f4b8a0"/>

    </g>

    <!-- 头骨 -->

    <circle cx="442" cy="160" r="27" fill="#f6c453" stroke="#7a4a12" stroke-width="4"/>

    <!-- 口鼻 -->

    <g transform="rotate(20 470 186)">

      <ellipse cx="470" cy="186" rx="22" ry="15.5" fill="#ffdf9e" stroke="#7a4a12" stroke-width="3.6"/>

      <circle cx="479" cy="181" r="2.5" fill="#7a4a12"/>

      <path d="M474,194 q6,5 12,0" fill="none" stroke="#7a4a12" stroke-width="2.6" stroke-linecap="round"/>

    </g>

    <ellipse cx="452" cy="176" rx="7" ry="4" fill="#f0a08e" opacity=".55"/>

    <!-- 眼睛 -->

    <g>

      <ellipse cx="444" cy="157" rx="9.5" ry="10.5" fill="#fff" stroke="#7a4a12" stroke-width="3"/>

      <g id="iris">

        <circle cx="446" cy="160" r="4.8" fill="#3a2312"/>

        <circle cx="447.6" cy="158" r="1.7" fill="#fff"/>

        <circle cx="443.6" cy="163" r="1" fill="#fff" opacity=".8"/>

      </g>

      <path d="M436,145 l15,-3.4" stroke="#7a4a12" stroke-width="3.2" stroke-linecap="round"/>

      <!-- 眨眼眼皮 -->

      <g id="lid">

        <path d="M434,148 a10.5,11 0 0 1 20,0 q-10,3 -20,0 Z" fill="#f2b64e" stroke="#7a4a12" stroke-width="2.4"/>

      </g>

    </g>

  </g>

</g><!-- /breath -->



<!-- 用力汗珠 -->

<g id="sweat" opacity="0">

  <path d="M452,116 c-4.5,7 -6,10.5 -6,13.4 a6,6 0 0 0 12,0 c0,-2.9 -1.5,-6.4 -6,-13.4 Z"

        fill="#a5dcff" stroke="#6db3e8" stroke-width="2"/>

</g>



<!-- 手臂（肩到腕的静态部分） -->

<path d="M298,274 Q402,332 512,283" fill="none" stroke="#7a4a12" stroke-width="20" stroke-linecap="round"/>

<path d="M298,274 Q402,332 512,283" fill="none" stroke="#f2b64e" stroke-width="14" stroke-linecap="round"/>



<!-- 用力速度线（跟随手腕摆动） -->

<g id="effort" stroke="#e2823c" stroke-width="3" stroke-linecap="round" fill="none" opacity="0">

  <path d="M497,262 l-9,-9"/>

  <path d="M504,254 l-5,-11"/>

  <path d="M513,250 l-1,-12"/>

</g>



<!-- 手腕 + 蹄子 + 螺丝刀（整体绕手腕摆动） -->

<g id="wrist">

  <g transform="translate(518 283) rotate(-25)">

    <!-- 手柄 -->

    <rect x="-13" y="-14" width="26" height="37" rx="11" fill="url(#handleG)" stroke="#a63a1f" stroke-width="2.6"/>

    <line x1="-6" y1="-9" x2="-6" y2="18" stroke="#ffb188" stroke-width="2.4" opacity=".8" stroke-linecap="round"/>

    <line x1="5"  y1="-9" x2="5"  y2="18" stroke="#c7481f" stroke-width="2" opacity=".6" stroke-linecap="round"/>

    <!-- 金属杆头 -->

    <rect x="-9" y="21" width="18" height="9" rx="3" fill="#98a2ae" stroke="#5c6672" stroke-width="2"/>

    <!-- 杆身 -->

    <rect x="-4" y="30" width="8" height="26" rx="2.5" fill="url(#steelG)" stroke="#7d8794" stroke-width="1.4"/>

    <line x1="-1.4" y1="32" x2="-1.4" y2="53" stroke="#ffffff" stroke-width="1.5" opacity=".85" stroke-linecap="round"/>

    <!-- 一字批头 -->

    <path d="M-4,56 L4,56 L1.6,64 L-1.6,64 Z" fill="#aab3bd" stroke="#7d8794" stroke-width="1.2"/>

  </g>

  <!-- 握住手柄的蹄子 -->

  <circle cx="518" cy="283" r="10.5" fill="#8a5a2b" stroke="#5d3a12" stroke-width="3"/>

</g>

咔哒！

拧紧啦～

纯 SVG + CSS 关键帧动画 · 无 JavaScript · 无图片资源 · 12s 无限循环

`

最新回复 (11)

nichang 08-27 00:23

1楼

看起来不错，希望后面别降智吧，可以平替d4f了
rayen 08-27 00:24

2楼

可惜长颈鹿地上脖子的阴影没有覆盖全面，而且桌子的阴影方向和长颈鹿的阴影方向是朝向相反的
Air84 楼主 08-27 00:28

3楼

另附一份5.6sol 8月16

提示词不同仅供参考

nsfw?

总结

五条腿的话……~~哎呀总比sol画的这个神秘柱状物好~~
Mozi 08-27 00:32

4楼

所以这个手其实不是手，只是画错了位置
Eevee 08-27 00:34

5楼

眼神呆滞

动作机械

五条腿

飞天螺丝

螺丝刀还是上下捣鼓，不是左右旋转
Air84 楼主 08-27 00:35

6楼

什么叫（5.6sol）“这个好”……前卫艺术吗。

sol这螺丝转成啥样了……而且缺了右后腿……而且这个手臂……况且这个螺丝刀也不对劲……

𝓦𝓈𝓁𝓏𝓖𝓂𝓏𝓈 08-27 00:43

7楼

qwen3.8-27b 似乎特化了svg

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

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

<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=Bungee&family=Noto+Sans+SC:wght@400;500;700;900&family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet">

<style>

:root{

  --bg:#0D2621; --bg2:#12332C; --line:#2E5A4B; --card:#10312B;

  --cream:#F7EEDC; --dim:#9CC6B2; --sun:#FFC53C; --red:#FF5C38; --red2:#C93A14;

  --wood:#ECAF4B; --wood2:#B4711F; --ink:#1E140A;

  --disp:'ZCOOL QingKe HuangYou','Noto Sans SC',sans-serif;

  --body:'Noto Sans SC',sans-serif; --num:'Bungee','Noto Sans SC',sans-serif;

}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{

  font-family:var(--body); color:var(--cream); min-height:100vh;

  background:

    radial-gradient(1100px 560px at 18% -8%, #1c4a3e55, transparent 62%),

    radial-gradient(900px 480px at 92% 108%, #ECAF4B1c, transparent 60%),

    repeating-linear-gradient(-38deg,#0f2c26,#0f2c26 22px,#0e2a24 22px,#0e2a24 44px),

    var(--bg);

}

.wrap{max-width:1240px;margin:0 auto;padding:0 22px 40px}



/* ── 顶栏 ─────────────────────────── */

header{display:flex;align-items:center;justify-content:space-between;gap:16px;

  padding:18px 2px 16px;border-bottom:1.5px solid #2E5A4B88;margin-bottom:22px;flex-wrap:wrap}

.brand{display:flex;align-items:center;gap:14px}

.logo{width:42px;height:42px;flex:none;animation:spin 11s linear infinite}

.brand h1{font:400 34px/1 var(--disp);letter-spacing:2px}

.brand h1 em{font-style:normal;color:var(--sun);text-shadow:0 3px 0 #B22F10}

.brand small{display:block;font:400 10px/1.6 var(--num);letter-spacing:3px;color:var(--dim);margin-top:3px}

.open{display:flex;align-items:center;gap:9px;font:700 13px var(--body);letter-spacing:1.5px;

  padding:8px 14px;border:1.5px solid #4a8a72;border-radius:999px;color:#bfe8d2;background:#123a30}

.open i{width:8px;height:8px;border-radius:50%;background:#5fd394;animation:pulse 1.6s ease-in-out infinite}

@keyframes pulse{0%,100%{box-shadow:0 0 0 0 #5fd39477}55%{box-shadow:0 0 0 7px #5fd39400}}



/* ── 主布局 ───────────────────────── */

main{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:22px;align-items:start}

@media(max-width:980px){main{grid-template-columns:1fr}}



/* 舞台 */

.stage-frame{position:relative;background:#0C241F;border:2px solid #35604F;border-radius:16px;

  padding:8px;box-shadow:0 24px 60px -24px #000000cc, inset 0 0 0 1px #ffffff0a;transition:box-shadow .3s}

.stage-frame:hover{box-shadow:0 28px 70px -22px #000000dd,0 0 0 1px #FFC53C33,inset 0 0 0 1px #ffffff0d}

.stage-frame svg{display:block;width:100%;height:auto;border-radius:9px}

.cscrew{position:absolute;width:15px;height:15px;border-radius:50%;

  background:radial-gradient(circle at 35% 30%,#d7dde4,#8d97a2 70%,#6b7683);

  box-shadow:inset 0 -1px 2px #00000066;animation:spin 14s linear infinite;z-index:2}

.cscrew::before{content:"";position:absolute;left:2.5px;right:2.5px;top:6px;height:2.4px;border-radius:2px;

  background:#2c3540;transform:rotate(var(--r,20deg))}

.stage-frame:hover .cscrew{animation-duration:1.1s}

.cscrew.tl{top:7px;left:7px;--r:24deg}.cscrew.tr{top:7px;right:7px;--r:-38deg;animation-direction:reverse}

.cscrew.bl{bottom:7px;left:7px;--r:80deg;animation-direction:reverse}.cscrew.br{bottom:7px;right:7px;--r:-12deg}

.stage-cap{display:flex;justify-content:space-between;align-items:center;gap:10px;

  padding:10px 6px 0;font:500 12px var(--body);color:var(--dim);letter-spacing:1px;flex-wrap:wrap}

.stage-cap b{color:#cfe8d9;font-weight:700}

.rec{display:inline-flex;align-items:center;gap:7px;color:#ffb4a2;font-weight:700}

.rec i{width:9px;height:9px;border-radius:50%;background:var(--red);animation:pulse2 1.2s infinite}

@keyframes pulse2{50%{opacity:.25}}



/* 侧栏 */

.panel{display:grid;gap:14px}

.card{background:var(--card);border:1.5px solid var(--line);border-radius:13px;padding:14px 16px}

.lbl{font:700 11px var(--body);letter-spacing:3px;color:var(--dim);display:block;margin-bottom:6px}

.statusCard{display:flex;align-items:center;gap:11px;font:700 15px var(--body);padding:12px 16px}

.statusCard.pulse i{background:var(--sun);animation-duration:.5s}

#statusText{min-height:1.4em}

.cnt{display:flex;align-items:baseline;gap:8px}

.cnt b{font:400 58px/1 var(--num);color:var(--sun);text-shadow:0 4px 0 #8c541766;display:inline-block}

.cnt b.bump{animation:bump .4s}

.cnt small{font:700 15px var(--body);color:var(--dim)}

@keyframes bump{35%{transform:scale(1.28) rotate(-3deg)}}

.prog{display:flex;align-items:center;gap:10px;margin-top:12px}

.segs{display:flex;gap:5px;flex:1}

.segs i{height:9px;flex:1;border-radius:3px;background:#1b443a;transition:background .18s}

.segs i.on{background:linear-gradient(90deg,var(--sun),var(--red))}

.segs i.live{animation:segp .7s infinite}

@keyframes segp{50%{filter:brightness(1.6)}}

#pct{font:400 13px var(--num);color:var(--dim);width:44px;text-align:right}

.lbl2{display:block;margin-top:8px;font:500 11px var(--body);color:#6f9c8b;letter-spacing:1px}



.btns{display:grid;grid-template-columns:1fr 1.2fr;gap:10px}

.btns .b-pri{grid-column:1/-1}

.b{font:700 16px var(--body);letter-spacing:2px;padding:13px 10px;border-radius:11px;cursor:pointer;

  border:2px solid #0a1713;transition:transform .08s,box-shadow .08s,filter .15s;position:relative}

.b:hover{filter:brightness(1.08)}

.b:active{transform:translateY(4px)}

.b-pri{background:var(--red);color:#2a0d04;box-shadow:0 5px 0 var(--red2);font-size:18px}

.b-pri:active{box-shadow:0 1px 0 var(--red2)}

.b-pri.paused{background:var(--sun);box-shadow:0 5px 0 #b8860b;color:#3a2503}

.b-warn{background:#2a5748;color:#eafff4;box-shadow:0 4px 0 #16352b}

.b-warn:active{box-shadow:0 0 0 #16352b}

.b-gh{grid-column:1/-1;background:transparent;color:var(--dim);border-color:#3c6d5a;box-shadow:0 4px 0 #143028}

.b-gh:active{box-shadow:0 0 0 #143028}

.b-gh.on{color:var(--sun);border-color:#FFC53C88}

.row{display:flex;justify-content:space-between;align-items:baseline}

#spdVal{font:400 15px var(--num);color:var(--sun)}

input[type=range]{-webkit-appearance:none;width:100%;height:6px;border-radius:4px;margin-top:12px;

  background:linear-gradient(90deg,var(--sun) var(--fill,33%),#1c453b var(--fill,33%));outline:none;cursor:pointer}

input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:19px;height:19px;border-radius:50%;

  background:var(--sun);border:3px solid #0a1713;box-shadow:0 2px 0 #00000066}

input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--sun);border:3px solid #0a1713}

.chips{display:flex;flex-wrap:wrap;gap:7px}

.chip{font:700 11px var(--body);letter-spacing:1px;padding:6px 10px;border-radius:999px;

  border:1.5px solid #3c6d5a;color:#a8d8c2;background:#113029}

.chip.gold{border-color:#FFC53C77;color:var(--sun)}

.hints{font:500 12px/1.9 var(--body);color:#6f9c8b;letter-spacing:.5px;padding:2px 4px}

.hints kbd{font:700 11px var(--num);background:#173a31;border:1px solid #3c6d5a;border-bottom-width:3px;

  border-radius:5px;padding:1px 6px;color:var(--cream)}



footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:26px;

  padding-top:16px;border-top:1.5px solid #2E5A4B66;font:500 12px var(--body);color:#6f9c8b;letter-spacing:1px}

footer .s3{display:inline-flex;gap:8px;margin-left:10px;vertical-align:-3px}

footer .s3 i{width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#cfd6dd,#7d8792);position:relative;animation:spin 7s linear infinite}

footer .s3 i::before{content:"";position:absolute;left:2px;right:2px;top:4.5px;height:2px;background:#2c3540;border-radius:2px;transform:rotate(30deg)}

footer .s3 i:nth-child(2){animation-direction:reverse}

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



/* ══ SVG 动画 ══ */

.tD{font-family:var(--disp)} .tN{font-family:var(--body)} .tE{font-family:var(--num)}

.tailG{transform-box:view-box;transform-origin:66px 398px;animation:wag 2.9s ease-in-out infinite}

@keyframes wag{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(11deg)}}

.bodyG{transform-box:view-box;transform-origin:168px 440px;animation:breathe 1.7s ease-in-out infinite alternate}

@keyframes breathe{to{transform:scale(1.013,1.008)}}

.neckG{transform-box:view-box;transform-origin:214px 372px;animation:sway 5.2s ease-in-out infinite}

@keyframes sway{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.4deg)}}

.headG{transform-box:view-box;transform-origin:360px 158px;animation:bob 3.8s ease-in-out infinite}

@keyframes bob{0%,100%{transform:rotate(-.8deg)}50%{transform:rotate(1.1deg)}}

#leanG{transform-box:view-box;transform-origin:360px 165px;transition:transform .15s}

#leanG.lean{transform:rotate(2.6deg)}

.eyeSquint{transform-box:view-box;transform-origin:362px 129px;transition:transform .12s}

.eyeSquint.squint{transform:scaleY(.45)}

.eyeBlink{transform-box:view-box;transform-origin:362px 129px;animation:blink 5.1s infinite}

@keyframes blink{0%,91%,100%{transform:scaleY(1)}94%{transform:scaleY(.07)}}

.lampG{transform-box:view-box;transform-origin:700px 4px;animation:lamps 4.6s ease-in-out infinite}

@keyframes lamps{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.4deg)}}

.cone{animation:flick 4s infinite}

@keyframes flick{0%,100%{opacity:.5}38%{opacity:.62}55%{opacity:.46}}

.secHand{transform-box:view-box;transform-origin:536px 150px;animation:spin 60s linear infinite}

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

.dust{animation:dust 10s linear infinite}

@keyframes dust{0%{transform:translate(0,0);opacity:0}18%{opacity:.55}80%{opacity:.35}100%{transform:translate(12px,-42px);opacity:0}}

.arc{opacity:0;transition:opacity .12s}

#arcG.on .arc{opacity:1}

#lampOffTarget .cone,#lampOffTarget .pool{transition:opacity .3s}

#lampG.off .cone{opacity:.03}#lampG.off .pool{opacity:0}

#lampG.off .bulbC{fill:#676d64}#lampG.off .glow{opacity:0}

#lampG .bulbC,#lampG .glow{transition:all .3s}

.spark{animation:fly .48s ease-out forwards}

@keyframes fly{to{transform:translate(var(--dx),var(--dy));opacity:0}}

.chipP{animation:chipp .62s ease-out forwards}

@keyframes chipp{to{transform:translate(var(--dx),var(--dy)) rotate(260deg);opacity:0}}

.ptxt{animation:popup .85s ease-out forwards;transform-box:fill-box;transform-origin:bottom center}

@keyframes popup{0%{transform:translateY(6px) scale(.6);opacity:0}30%{opacity:1;transform:translateY(-6px) scale(1.15)}100%{transform:translateY(-28px) scale(1);opacity:0}}

.ring{transform-box:fill-box;transform-origin:center;animation:ringx .55s ease-out forwards}

@keyframes ringx{from{transform:scale(.4);opacity:1}to{transform:scale(3.4);opacity:0}}

.shake{animation:shk .24s linear 2}

@keyframes shk{25%{transform:translateX(2.5px)}75%{transform:translateX(-2.5px)}}

.sweat{animation:sweatf .8s ease-in forwards}

@keyframes sweatf{to{transform:translate(6px,30px);opacity:0}}

.conf{animation:conf 1.8s ease-in forwards}

@keyframes conf{to{transform:translate(var(--dx),var(--dy)) rotate(680deg);opacity:0}}

#bubble{opacity:0;transform:scale(.5);transform-box:fill-box;transform-origin:88% 20%;

  transition:opacity .18s,transform .22s cubic-bezier(.34,1.56,.64,1);pointer-events:none}

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

#giraffeHit{cursor:pointer}

@media(prefers-reduced-motion:reduce){.dust,.logo,.cscrew{animation:none}}

</style>

</head>

<body>

<div class="wrap">



<header>

  <div class="brand">

    <svg class="logo" viewBox="0 0 42 42" aria-hidden="true">

      <circle cx="21" cy="21" r="16" fill="#FFC53C" stroke="#1E140A" stroke-width="3"/>

      <rect x="10" y="19" width="22" height="5" rx="2.5" fill="#1E140A"/>

      <circle cx="21" cy="21" r="5.5" fill="none" stroke="#B22F10" stroke-width="2.5"/>

    </svg>

    <div>

      <h1>长颈<em>螺工</em></h1>

      <small>THE HIGH-REACH SCREW CO. · EST.2019</small>

    </div>

  </div>

  <div class="open"><i></i>营业中 · OPEN · 高空拧装部</div>

</header>



<main>

  <!-- ════════ 舞台 ════════ -->

  <section>

    <div class="stage-frame" id="frame">

      <span class="cscrew tl"></span><span class="cscrew tr"></span>

      <span class="cscrew bl"></span><span class="cscrew br"></span>



<svg id="scene" viewBox="0 0 1000 640" role="img" aria-label="长颈鹿在传送台上拧螺丝">

<defs>

  <pattern id="woodP" width="60" height="44" patternUnits="userSpaceOnUse">

    <rect width="60" height="44" fill="#CE8531"/>

    <path d="M0 12 q15 5 30 0 t30 0" stroke="#A9681F" stroke-width="2" fill="none" opacity=".55"/>

    <path d="M0 31 q20 -5 40 0 t20 3" stroke="#A9681F" stroke-width="2" fill="none" opacity=".4"/>

    <ellipse cx="40" cy="20" rx="4" ry="2.6" fill="#A9681F" opacity=".4"/>

    <rect width="3" height="44" fill="#9A5E1B"/>

  </pattern>

  <pattern id="dotsP" width="20" height="20" patternUnits="userSpaceOnUse">

    <circle cx="10" cy="10" r="2.2" fill="#081D18"/>

  </pattern>

  <radialGradient id="bGlow"><stop offset="0" stop-color="#FFE28A" stop-opacity=".55"/><stop offset="1" stop-color="#FFE28A" stop-opacity="0"/></radialGradient>

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

    <stop offset="0" stop-color="#FFD53A" stop-opacity=".2"/><stop offset="1" stop-color="#FFD53A" stop-opacity="0"/>

  </linearGradient>

  <clipPath id="faceClip"><rect x="787" y="344" width="420" height="60"/></clipPath>

</defs>

<!-- 墙 -->

<rect width="1000" height="560" fill="#12332C"/>

<g stroke="#0D2822" stroke-width="2" opacity=".6">

  <line x1="0" y1="92" x2="1000" y2="92"/><line x1="0" y1="184" x2="1000" y2="184"/>

  <line x1="0" y1="276" x2="1000" y2="276"/><line x1="0" y1="368" x2="1000" y2="368"/>

  <line x1="0" y1="456" x2="1000" y2="456"/>

</g>

<circle cx="712" cy="290" r="178" fill="none" stroke="#FFC53C" stroke-opacity=".05" stroke-width="34"/>

<!-- 洞洞板 + 工具 -->

<rect x="60" y="96" width="214" height="238" rx="10" fill="#0E2A24" stroke="#1E4A3E" stroke-width="2"/>

<rect x="68" y="104" width="198" height="222" fill="url(#dotsP)"/>

<g fill="none" stroke="#0A1F1B" stroke-width="7">

  <line x1="150" y1="128" x2="150" y2="146"/><circle cx="150" cy="160" r="9"/>

</g>

<rect x="146" y="167" width="9" height="44" rx="4.5" fill="#0A1F1B"/>

<g fill="#0A1F1B">

  <line x1="234" y1="120" x2="234" y2="136" stroke="#0A1F1B" stroke-width="5"/>

  <rect x="214" y="136" width="40" height="18" rx="4"/><rect x="229" y="152" width="9" height="42" rx="4.5"/>

</g>

<circle cx="212" cy="272" r="13" fill="none" stroke="#0A1F1B" stroke-width="8"/>

<line x1="224" y1="284" x2="216" y2="298" stroke="#0A1F1B" stroke-width="6"/>

<!-- 海报 -->

<g id="poster">

  <rect x="592" y="86" width="104" height="134" rx="8" fill="#F3E2C2" stroke="#D63A17" stroke-width="4"/>

  <text x="644" y="116" text-anchor="middle" class="tD" font-size="15" fill="#7A4A1F">今日目标</text>

  <g id="posterGoal">

    <text x="641" y="170" text-anchor="middle" class="tE" font-size="42" fill="#FF5C38">99</text>

    <text x="644" y="198" text-anchor="middle" class="tD" font-size="16" fill="#7A4A1F">颗</text>

  </g>

  <g id="posterDone" style="display:none">

    <text x="644" y="166" text-anchor="middle" class="tD" font-size="30" fill="#3E8E5A">达成！</text>

    <text x="644" y="198" text-anchor="middle" class="tD" font-size="18" fill="#3E8E5A">✔ 早下班</text>

  </g>

  <circle cx="676" cy="104" r="6" fill="none" stroke="#B4711F" stroke-width="3"/>

  <line x1="671" y1="104" x2="681" y2="104" stroke="#B4711F" stroke-width="2.5"/>

</g>

<!-- 挂钟 -->

<g>

  <circle cx="536" cy="150" r="24" fill="#F3E2C2" stroke="#7A4A1F" stroke-width="5"/>

  <g stroke="#5C3A18" stroke-width="2.5"><line x1="536" y1="129" x2="536" y2="134"/><line x1="536" y1="171" x2="536" y2="166"/><line x1="515" y1="150" x2="520" y2="150"/><line x1="557" y1="150" x2="552" y2="150"/></g>

  <line x1="536" y1="150" x2="528" y2="144" stroke="#5C3A18" stroke-width="4" stroke-linecap="round"/>

  <line x1="536" y1="150" x2="548" y2="141" stroke="#5C3A18" stroke-width="3" stroke-linecap="round"/>

  <line class="secHand" x1="536" y1="154" x2="536" y2="130" stroke="#FF5C38" stroke-width="2" stroke-linecap="round"/>

  <circle cx="536" cy="150" r="3" fill="#5C3A18"/>

</g>

<!-- 吊灯 -->

<g id="lampG" class="lampG">

  <polygon class="cone" points="688,92 712,92 806,556 594,556" fill="url(#coneG)"/>

  <ellipse class="pool" cx="700" cy="552" rx="96" ry="11" fill="#FFC53C" opacity=".12"/>

  <line x1="700" y1="0" x2="700" y2="40" stroke="#0A1F1B" stroke-width="3"/>

  <path d="M684 40 L716 40 L730 68 L670 68 Z" fill="#D63A17" stroke="#8C2610" stroke-width="2"/>

  <rect x="666" y="66" width="68" height="9" rx="4" fill="#8C2610"/>

  <circle class="glow" cx="700" cy="84" r="22" fill="url(#bGlow)"/>

  <circle class="bulbC" cx="700" cy="84" r="10.5" fill="#FFE28A"/>

</g>

<!-- 货架（台面之上） -->

<g>

  <rect x="820" y="214" width="182" height="11" rx="3" fill="#B4711F"/>

  <path d="M830 225 l14 0 l-14 16 Z" fill="#6B4214"/><path d="M994 225 l-14 0 l14 22 Z" fill="#6B4214"/>

  <g transform="translate(858,214)">

    <rect x="-14" y="-64" width="28" height="7" rx="3" fill="#B4711F"/>

    <rect x="-12" y="-58" width="24" height="7" fill="#CFE8DD" fill-opacity=".2" stroke="#9ED8C4" stroke-width="2"/>

    <rect x="-19" y="-52" width="38" height="50" rx="7" fill="#CFE8DD" fill-opacity=".16" stroke="#9ED8C4" stroke-width="2"/>

    <g fill="#9AA3AD"><circle cx="-7" cy="-32" r="4"/><circle cx="5" cy="-40" r="4"/><circle cx="-2" cy="-18" r="4"/><circle cx="8" cy="-24" r="4"/></g>

    <rect x="-14" y="-31" width="28" height="13" rx="2.5" fill="#F3E2C2"/>

    <text x="0" y="-21" text-anchor="middle" class="tD" font-size="9.5" fill="#7A4A1F">螺丝罐</text>

  </g>

  <g transform="translate(922,214)">

    <rect x="-32" y="-13" width="64" height="9" rx="4.5" fill="#C97B33"/>

    <rect x="-16" y="-38" width="32" height="26" rx="6" fill="#B4711F"/>

    <rect x="-16" y="-38" width="9" height="26" rx="4" fill="#8C5417"/>

  </g>

  <g transform="translate(990,214)">

    <rect x="-22" y="-8" width="44" height="8" rx="2" fill="#D65F3F"/>

    <path d="M-22 -8 q22 -14 44 0" fill="#E88A6A"/>

  </g>

</g>

<!-- 地面 -->

<rect y="560" width="1000" height="80" fill="#0B1F1A"/>

<line x1="0" y1="560" x2="1000" y2="560" stroke="#274D40" stroke-width="2.5"/>

<g stroke="#081A15" stroke-width="2"><line x1="252" y1="560" x2="252" y2="640"/><line x1="528" y1="560" x2="528" y2="640"/><line x1="726" y1="560" x2="726" y2="640"/></g>

<ellipse cx="190" cy="588" rx="152" ry="15" fill="#14312A"/>

<g id="floorScrews"></g>

<!-- ═══ 长颈鹿 ═══ -->

<g id="giraffe">

  <!-- 尾巴 -->

  <g class="tailG">

    <path d="M66 398 Q30 452 46 502" stroke="#ECAF4B" stroke-width="10" fill="none" stroke-linecap="round"/>

    <circle cx="46" cy="506" r="9" fill="#7A4A1F"/>

  </g>

  <!-- 后腿 -->

  <g>

    <line x1="100" y1="436" x2="96" y2="536" stroke="#DD9636" stroke-width="28" stroke-linecap="round"/>

    <rect x="82" y="532" width="34" height="26" rx="9" fill="#5C3A18"/>

    <line x1="142" y1="442" x2="140" y2="536" stroke="#DD9636" stroke-width="28" stroke-linecap="round"/>

    <rect x="126" y="532" width="34" height="26" rx="9" fill="#5C3A18"/>

  </g>

  <!-- 身体 -->

  <g class="bodyG">

    <ellipse cx="168" cy="372" rx="104" ry="68" fill="#ECAF4B"/>

    <ellipse cx="168" cy="404" rx="86" ry="38" fill="#E3A03F"/>

    <g fill="#8C4E1B">

      <ellipse cx="112" cy="356" rx="17" ry="12" transform="rotate(18 112 356)"/>

      <ellipse cx="166" cy="333" rx="21" ry="14" transform="rotate(-12 166 333)"/>

      <ellipse cx="222" cy="362" rx="15" ry="11" transform="rotate(28 222 362)"/>

      <ellipse cx="142" cy="412" rx="13" ry="9" transform="rotate(-20 142 412)"/>

      <ellipse cx="100" cy="402" rx="10" ry="8"/>

    </g>

  </g>

  <!-- 站立前腿 -->

  <line x1="234" y1="440" x2="238" y2="536" stroke="#ECAF4B" stroke-width="30" stroke-linecap="round"/>

  <rect x="222" y="532" width="34" height="26" rx="9" fill="#6B4214"/>

  <!-- 颈 + 头 -->

  <g class="neckG">

    <path d="M214 372 C286 344 330 270 358 190" stroke="#ECAF4B" stroke-width="46" fill="none" stroke-linecap="round"/>

    <g fill="#8C4E1B">

      <ellipse cx="296" cy="306" rx="14" ry="10" transform="rotate(20 296 306)"/>

      <ellipse cx="324" cy="248" rx="13" ry="9" transform="rotate(8 324 248)"/>

      <ellipse cx="347" cy="208" rx="11" ry="8" transform="rotate(-6 347 208)"/>

    </g>

    <g id="leanG">

      <g class="headG">

        <!-- 耳（头后） -->

        <path d="M350 122 C330 100 306 96 297 108 C305 128 328 140 352 136 Z" fill="#DD9636"/>

        <path d="M344 124 C330 110 314 107 308 114 C314 126 330 133 344 130 Z" fill="#B4711F" opacity=".55"/>

        <!-- 角 -->

        <line x1="398" y1="102" x2="410" y2="72" stroke="#DD9636" stroke-width="7" stroke-linecap="round"/>

        <circle cx="412" cy="66" r="8.5" fill="#8C4E1B"/>

        <line x1="424" y1="110" x2="444" y2="84" stroke="#DD9636" stroke-width="7" stroke-linecap="round"/>

        <circle cx="446" cy="79" r="8.5" fill="#8C4E1B"/>

        <!-- 脑袋 -->

        <path d="M336 132 C352 104 390 96 414 112 C444 130 462 150 468 166 C471 178 463 186 449 186 C416 188 372 172 348 152 C338 143 332 140 336 132 Z" fill="#ECAF4B"/>

        <path d="M420 152 C440 162 458 168 464 172 C466 179 458 185 449 185 C430 184 414 176 404 168 C410 160 414 154 420 152 Z" fill="#F2BE63"/>

        <line x1="350" y1="116" x2="376" y2="110" stroke="#5C3A18" stroke-width="3" stroke-linecap="round"/>

        <g class="eyeSquint" id="eyeSquint">

          <g class="eyeBlink">

            <circle cx="362" cy="129" r="7" fill="#1E140A"/>

            <circle cx="359.5" cy="126.5" r="2.2" fill="#FFF8EE"/>

          </g>

        </g>

        <ellipse cx="447" cy="168" rx="4" ry="3" fill="#5C3A18" transform="rotate(18 447 168)"/>

        <path d="M424 182 Q444 190 458 176" stroke="#5C3A18" stroke-width="3" fill="none" stroke-linecap="round"/>

        <circle cx="410" cy="156" r="6.5" fill="#E88A4B" opacity=".55"/>

      </g>

    </g>

  </g>

  <!-- 悬停感应区 -->

  <rect id="giraffeHit" x="140" y="36" width="352" height="486" fill="#000" opacity="0" pointer-events="all"/>

</g>

<!-- 胳膊（端点随工具伸缩） -->

<line id="armLine" x1="248" y1="412" x2="424" y2="398" stroke="#ECAF4B" stroke-width="34" stroke-linecap="round"/>

<circle cx="248" cy="412" r="22" fill="#ECAF4B"/>

<ellipse cx="298" cy="405" rx="12" ry="8" fill="#8C4E1B" transform="rotate(-8 298 405)"/>

<!-- ═══ 工具组：螺丝 + 棘轮螺丝刀 + 蹄子（整体平动） ═══ -->

<g id="tool">

  <g id="screwG">

    <polygon points="790,371 778,365.5 778,376.5" fill="#9AA3AD"/>

    <rect x="696" y="366" width="84" height="10" fill="#9AA3AD"/>

    <g stroke="#707884" stroke-width="2.4">

      <line x1="706" y1="366" x2="712" y2="376"/><line x1="718" y1="366" x2="724" y2="376"/>

      <line x1="730" y1="366" x2="736" y2="376"/><line x1="742" y1="366" x2="748" y2="376"/>

      <line x1="754" y1="366" x2="760" y2="376"/><line x1="766" y1="366" x2="772" y2="376"/>

    </g>

    <rect x="680" y="358" width="16" height="26" rx="3" fill="#B7BFC9"/>

    <line x1="682.5" y1="361" x2="682.5" y2="381" stroke="#DDE3E8" stroke-width="2"/>

  </g>

  <rect x="439" y="368.8" width="283" height="4.5" fill="#AEB6BF"/>

  <polygon points="697,371 723,366 723,376" fill="#8A939D"/>

  <rect x="437" y="365" width="10" height="12" rx="2" fill="#8A939D"/>

  <!-- T 形棘轮柄 -->

  <rect x="417" y="332" width="22" height="78" rx="10" fill="#FF5C38"/>

  <g stroke="#C93A14" stroke-width="3"><line x1="421" y1="354" x2="435" y2="354"/><line x1="421" y1="366" x2="435" y2="366"/><line x1="421" y1="378" x2="435" y2="378"/></g>

  <circle cx="428" cy="330" r="13" fill="#FF5C38" stroke="#B22F10" stroke-width="3"/>

  <g id="knobX"><path d="M428 321 V339 M419 330 H437" stroke="#FFE1A6" stroke-width="4" stroke-linecap="round"/></g>

  <g id="arcG" fill="none" stroke="#FFD53A" stroke-width="3" stroke-linecap="round">

    <path class="arc" d="M403 330 A26 26 0 0 1 421 305"/>

    <path class="arc" d="M453 330 A26 26 0 0 0 435 305"/>

  </g>

  <!-- 握持的后蹄 -->

  <circle cx="424" cy="396" r="21" fill="#8C5417"/>

  <ellipse cx="419" cy="391" rx="14" ry="19" fill="#A05E20" transform="rotate(-18 419 391)"/>

</g>

<!-- ═══ 传送台 ═══ -->

<g id="bench">

  <g id="benchTop">

    <rect x="728" y="350" width="392" height="44" fill="url(#woodP)" clip-path="url(#faceClip)"/>

  </g>

  <rect x="787" y="347" width="10" height="50" rx="2" fill="#9A5E1B"/>

  <rect x="797" y="350" width="303" height="3" fill="#F5C36A" opacity=".4"/>

  <line x1="789" y1="352" x2="789" y2="394" stroke="#F5C36A" stroke-width="1.5" opacity=".6"/>

  <circle cx="792" cy="371" r="10" fill="none" stroke="#FFC53C" stroke-width="1.5" stroke-dasharray="3 3" opacity=".9"/>

  <circle cx="792" cy="371" r="1.6" fill="#FFC53C" opacity=".9"/>

  <rect x="787" y="394" width="213" height="30" fill="#8C5417"/>

  <rect x="787" y="424" width="213" height="4" fill="#000" opacity=".2"/>

  <g>

    <circle cx="824" cy="409" r="9" fill="#5C3A18"/><g class="rollSpin" transform="translate(824,409)" stroke="#D89338" stroke-width="2"><line x1="-8" y1="0" x2="8" y2="0"/><line x1="0" y1="-8" x2="0" y2="8"/></g>

    <circle cx="882" cy="409" r="9" fill="#5C3A18"/><g class="rollSpin" transform="translate(882,409)" stroke="#D89338" stroke-width="2"><line x1="-8" y1="0" x2="8" y2="0"/><line x1="0" y1="-8" x2="0" y2="8"/></g>

    <circle cx="940" cy="409" r="9" fill="#5C3A18"/><g class="rollSpin" transform="translate(940,409)" stroke="#D89338" stroke-width="2"><line x1="-8" y1="0" x2="8" y2="0"/><line x1="0" y1="-8" x2="0" y2="8"/></g>

  </g>

  <rect x="806" y="424" width="16" height="128" fill="#6B4214"/>

  <rect x="952" y="424" width="16" height="128" fill="#6B4214"/>

  <rect x="799" y="550" width="30" height="9" rx="4" fill="#5C3A18"/>

  <rect x="945" y="550" width="30" height="9" rx="4" fill="#5C3A18"/>

</g>

<!-- 尘埃 -->

<g fill="#FFDF9E">

  <circle class="dust" cx="150" cy="220" r="2.5" style="animation-duration:9s;animation-delay:-2s" opacity=".4"/>

  <circle class="dust" cx="330" cy="330" r="2" style="animation-duration:12s;animation-delay:-5s" opacity=".35"/>

  <circle class="dust" cx="470" cy="250" r="2.8" style="animation-duration:8s;animation-delay:-1s" opacity=".4"/>

  <circle class="dust" cx="610" cy="380" r="2" style="animation-duration:11s;animation-delay:-7s" opacity=".3"/>

  <circle class="dust" cx="668" cy="180" r="2.5" style="animation-duration:10s;animation-delay:-4s" opacity=".4"/>

  <circle class="dust" cx="760" cy="300" r="2" style="animation-duration:13s;animation-delay:-9s" opacity=".35"/>

  <circle class="dust" cx="902" cy="150" r="2.4" style="animation-duration:9.5s;animation-delay:-3s" opacity=".4"/>

</g>

<!-- 气泡 -->

<g id="bubble">

  <rect x="230" y="8" width="210" height="52" rx="16" fill="#FFF3DC" stroke="#B4711F" stroke-width="2.5"/>

  <path d="M330 58 L354 94 L362 60 Z" fill="#FFF3DC" stroke="#B4711F" stroke-width="2.5"/>

  <text x="335" y="42" text-anchor="middle" class="tD" font-size="17" fill="#5C3A18">别催～慢工出细活 😤</text>

</g>

<!-- 特效层 & 吊灯感应 -->

<g id="fx"></g>

<circle id="lampHit" cx="700" cy="72" r="36" fill="#000" opacity="0" pointer-events="all" cursor="pointer"/>

</svg>

    </div>



    <div class="stage-cap">

      <span><span class="rec"><i></i>REC</span>&nbsp;&nbsp;实况 · 拧装工位 <b>No.03</b></span>

      <span>SNAP-TO-TIGHT SPECIMEN · <b>6 推/颗</b> · 传送式供料</span>

    </div>

  </section>



  <!-- ════════ 控制侧栏 ════════ -->

  <aside class="panel">

    <div class="card statusCard" id="statusCard"><i style="width:8px;height:8px;border-radius:50%;background:#5fd394;animation:pulse 1.6s infinite"></i><span id="statusText">咔哒…咔哒…</span></div>



    <div class="card">

      <span class="lbl">已完成 · SCREWS SET</span>

      <div class="cnt"><b id="count">0</b><small>颗螺丝</small></div>

      <div class="prog"><div class="segs" id="segs"><i></i><i></i><i></i><i></i><i></i><i></i></div><span id="pct">0%</span></div>

      <span class="lbl2">本颗进度 · 每颗 6 推，推满自动换料</span>

    </div>



    <div class="btns">

      <button class="b b-pri" id="btnPlay">⏸&ensp;暂停</button>

      <button class="b b-warn" id="btnPush">💪 加把劲</button>

      <button class="b b-gh" id="btnSfx">♪&ensp;机械音效：关</button>

    </div>



    <div class="card">

      <div class="row"><span class="lbl" style="margin:0">节奏 TEMPO</span><b id="spdVal">1.0×</b></div>

      <input id="spd" type="range" min="0.5" max="2" step="0.1" value="1">

    </div>



    <div class="chips">

      <span class="chip">工位 No.03</span><span class="chip">高级拧手 Lv.7</span><span class="chip gold" id="chipGoal">今日目标 99 颗</span>

    </div>

    <div class="hints">

      <kbd>空格</kbd> 暂停 / 继续&emsp;<kbd>A</kbd> 加把劲<br>

      手悬到长颈鹿头上 → 它会对你翻个白眼<br>

      手悬到吊灯上 → 关灯省电费

    </div>

  </aside>

</main>



<footer>

  <span>© 2025 长颈螺工 · 高空螺丝车间 — 脖子不累，活儿就顺</span>

  <span>本页所有螺丝均已拧紧，无一只蹄子受伤 <span class="s3"><i></i><i></i><i></i></span></span>

</footer>

</div>



<script>

(function(){

"use strict";

const $=id=>document.getElementById(id), NS="http://www.w3.org/2000/svg";

const toolG=$("tool"),screwG=$("screwG"),knobX=$("knobX"),armLine=$("armLine"),arcG=$("arcG"),

      fx=$("fx"),benchTop=$("benchTop"),benchEl=$("bench"),eyeS=$("eyeSquint"),leanG=$("leanG"),

      bubble=$("bubble"),countEl=$("count"),pctEl=$("pct"),segs=[...$("segs").children],

      statusEl=$("statusText"),statusCard=$("statusCard");

const S={speed:1,paused:false,done:0,depth:0,MAX:6,STEP:15,tx:0,knobA:0,sfx:false,canPush:false,manual:false,win:false,floor:2};

const PH=["咔哒…咔哒…","再进一点…","手感对了","嗯——稳","丝般顺滑","别眨眼，看好了"];

function rnd(a,b){return a+Math.random()*(b-a)}

function io(p){return p<.5?4*p*p*p:1-Math.pow(-2*p+2,3)/2}

function outb(p){const c=1.70158;return 1+(c+1)*Math.pow(p-1,3)+c*Math.pow(p-1,2)}



/* ── 场景时钟（暂停 / 变速全部生效）── */

let scT=0,last=performance.now();const waiters=[],tweens=[];

function loop(t){

  const dt=Math.min(50,t-last);last=t;

  if(!S.paused){

    scT+=dt/S.speed;

    for(let i=waiters.length-1;i>=0;i--)if(scT>=waiters[i].at){const w=waiters[i];waiters.splice(i,1);w.res()}

    for(let i=tweens.length-1;i>=0;i--){const tw=tweens[i];let p=(scT-tw.t0)/tw.dur;if(p>=1)p=1;

      tw.apply(tw.ease(p),p);

      if(p===1){tweens.splice(i,1);tw.done()}}

  }

  requestAnimationFrame(loop);

}

requestAnimationFrame(loop);

const sleep=ms=>new Promise(r=>waiters.push({at:scT+Math.max(1,ms),res:r}));

function tween(dur,apply,done,ease){

  if(dur<=0){apply(1,1);done&&done();return}

  tweens.push({t0:scT,dur,apply,done:()=>done&&done(),ease:ease||io});

}



/* ── 画面状态 ── */

function setTool(){

  toolG.setAttribute("transform",`translate(${S.tx} 0)`);

  armLine.setAttribute("x2",(424+S.tx).toFixed(1));

  armLine.setAttribute("y2",398);

}

function setKnob(a){S.knobA=a;knobX.setAttribute("transform",`rotate(${a.toFixed(1)} 428 330)`)}

function setScrew(sx,op,sc){

  screwG.setAttribute("transform",`translate(${sx} 0) translate(688 371) scale(${sc}) translate(-688 -371)`);

  screwG.setAttribute("opacity",op);

}

function status(m){statusEl.textContent=m;statusCard.classList.add("pulse");setTimeout(()=>statusCard.classList.remove("pulse"),450)}

function render(){

  countEl.textContent=S.done;

  cntTick();

  segs.forEach((s,i)=>{s.classList.toggle("on",i<S.depth);s.classList.toggle("live",i===S.depth)});

  pctEl.textContent=Math.round(S.depth/S.MAX*100)+"%";

}

function cntTick(){countEl.classList.remove("bump");void countEl.offsetWidth;countEl.classList.add("bump")}



/* ── 特效 ── */

const COLORS=["#FFD53A","#FF9C42","#FF5C38","#F7EEDC"];

function el(name,attrs,cls){const e=document.createElementNS(NS,name);

  for(const k in attrs)e.setAttribute(k,attrs[k]);if(cls)e.setAttribute("class",cls);return e}

function sparks(big){

  const n=big?8:4;

  for(let i=0;i<n;i++){

    const a=rnd(-165,-15)*Math.PI/180,d=rnd(26,big?52:40);

    const L=el("line",{x1:786,y1:371,x2:786+Math.cos(a)*8,y2:371+Math.sin(a)*8,

      stroke:COLORS[i%4],"stroke-width":3,"stroke-linecap":"round"},"spark");

    L.style.setProperty("--dx",(Math.cos(a)*d)+"px");L.style.setProperty("--dy",(Math.sin(a)*d)+"px");

    fx.append(L);setTimeout(()=>L.remove(),520);

  }

  if(Math.random()<.8){

    const c=el("path",{d:"M0 0 l10 3.4 l-8 5.4 Z",fill:"#E3A03F",transform:"translate(786 356)"},"chipP");

    c.style.setProperty("--dx",rnd(20,58)+"px");c.style.setProperty("--dy",rnd(14,50)+"px");

    fx.append(c);setTimeout(()=>c.remove(),680);

  }

}

function popText(txt,xx,yy,color,size){

  const t=el("text",{x:xx,y:yy,fill:color||"#FFD53A"},"ptxt tD");

  t.setAttribute("font-size",size||14);t.textContent=txt;fx.append(t);

  setTimeout(()=>t.remove(),900);

}

function ding(){

  const r=el("circle",{cx:790,cy:371,r:5,fill:"none",stroke:"#FFD53A","stroke-width":3},"ring");

  fx.append(r);setTimeout(()=>r.remove(),600);

  popText("叮！",758,332,"#FFD53C",22);

  sfxDing();

}

function shake(){benchEl.classList.remove("shake");void benchEl.getBBox;benchEl.classList.add("shake");

  setTimeout(()=>benchEl.classList.remove("shake"),520)}

function sweat(){

  const d=el("path",{d:"M398 108 q5 8 0 12 q-5 -4 0 -12",fill:"#9ED8C4",transform:"translate(0 0)"},"sweat");

  fx.append(d);setTimeout(()=>d.remove(),850);

}

function confetti(){

  for(let i=0;i<30;i++){

    const x=rnd(140,860),c=el("rect",{x:0,y:0,width:9,height:5,fill:COLORS[i%4],

      transform:`translate(${x} -12) rotate(${rnd(0,360)})`},"conf");

    c.style.setProperty("--dx",rnd(-90,90)+"px");c.style.setProperty("--dy",rnd(430,660)+"px");

    fx.append(c);setTimeout(()=>c.remove(),1900);

  }

}

function floorScrew(){

  if(S.floor>=9)return;S.floor++;

  const g=el("g",{transform:`translate(${rnd(535,585)} ${rnd(594,614)}) rotate(${rnd(-20,20)})`});

  g.innerHTML='<rect x="-14" y="-4" width="6" height="8" rx="1.5" fill="#B7BFC9"/><rect x="-8" y="-2" width="15" height="4" fill="#9AA3AD"/>';

  $("floorScrews").append(g);

}

for(let i=0;i<3;i++)floorScrew(),S.floor--;S.floor=3;



/* ── 音效 ── */

let AC=null;

function ac(){if(!AC)AC=new (window.AudioContext||window.webkitAudioContext)();if(AC.state==="suspended")AC.resume();return AC}

function tone(f0,f1,dur,type,g){

  if(!S.sfx)return;try{const c=ac(),o=c.createOscillator(),ga=c.createGain();

  o.type=type||"square";o.frequency.setValueAtTime(f0,c.currentTime);

  o.frequency.exponentialRampToValueAtTime(Math.max(30,f1),c.currentTime+dur);

  ga.gain.setValueAtTime(g||.14,c.currentTime);ga.gain.exponentialRampToValueAtTime(.001,c.currentTime+dur);

  o.connect(ga).connect(c.destination);o.start();o.stop(c.currentTime+dur+.03)}catch(e){}

}

const sfxClick=big=>big?tone(190,58,.09,"square",.2):tone(320,110,.06,"square",.11);

function sfxDing(){tone(1150,1100,.08,"sine",.11);setTimeout(()=>tone(1720,1660,.13,"sine",.09),75)}



/* ── 核心动作 ── */

async function doPress(big){

  S.canPush=false;

  arcG.classList.add("on");

  await tween(230,p=>setKnob(S.knobA-330*p));

  arcG.classList.remove("on");

  await sleep(70);

  leanG.classList.add("lean");eyeS.classList.add("squint");

  if(big)status("喝——！！");

  const from=S.tx,to=from+S.STEP;

  sfxClick(big);

  await tween(big?270:195,p=>{S.tx=from+(to-from)*p;setTool()});

  sparkBurst(big);

  if(big){shake();sweat()}

  leanG.classList.remove("lean");eyeS.classList.remove("squint");

  function sparkBurst(b){sparks(b);popText(b?"咔哒!!":"咔",rnd(752,772),rnd(330,342),b?"#FF9C42":"#F7EEDC",b?18:13)}

}

async function sink(){

  status("最后一推——");

  leanG.classList.add("lean");eyeS.classList.add("squint");

  sfxClick(true);

  await tween(165,p=>{S.tx=90+8*p;setTool()});

  sparks(7?true:false);

  await tween(150,p=>{setScrew(8,1-p,1)});

  eyeS.classList.remove("squint");leanG.classList.remove("lean");

  ding();

  S.done++;render();

  status(`叮！第 ${S.done} 颗就位 ✔`);

  if(S.done===99&&!S.win){S.win=true;

    $("posterGoal").style.display="none";$("posterDone").style.display="";

    $("chipGoal").textContent="今日目标 ✔（已提前）";

    status("🎉 99 颗全部就位！今天可以摸鱼了");

    setTimeout(confetti,200);

  }

}

async function feed(){

  status("送料中 · 咔——");

  await tween(430,p=>benchTop.setAttribute("transform",`translate(${60*p} 0)`));

  benchTop.setAttribute("transform","translate(0 0)"); // 木纹周期=60，无缝接回

  S.tx=90;setScrew(0,0,0);

  await tween(320,p=>{S.tx=90-90*p;setTool()});

  setScrew(0,0,.01);

  await tween(340,p=>setScrew(0,1,outb(p)));

  setScrew(0,1,1);

  floorScrew();

  S.depth=0;render();

}

async function cycle(){

  for(;;){

    S.canPush=true;

    const big=S.manual;S.manual=false;

    await sleep(big?170:360);S.canPush=false;

    if(!big)status(PH[(Math.random()*PH.length)|0]);

    await doPress(big);

    S.depth++;render();

    if(S.depth>=S.MAX){await sleep(170);await sink()}

    else{await sleep(big?280:430)}

    if(S.depth>=S.MAX)await feed();

  }

}



/* ── 控件 ── */

const btnPlay=$("btnPlay");

function togglePlay(){

  S.paused=!S.paused;

  btnPlay.innerHTML=S.paused?"▶&ensp;继续":"⏸&ensp;暂停";

  btnPlay.classList.toggle("paused",S.paused);

  status(S.paused?"暂停中 · 蹄子悬停中":"开工！");

}

btnPlay.addEventListener("click",togglePlay);

function tryPush(){

  if(S.paused){status("先按「继续」再发力 😴");return}

  if(!S.canPush){status("正拧着呢，等一下…");return}

  S.manual=true;status("💪 好嘞!");

}

$("btnPush").addEventListener("click",tryPush);

$("btnSfx").addEventListener("click",e=>{

  S.sfx=!S.sfx;e.currentTarget.classList.toggle("on",S.sfx);

  e.currentTarget.innerHTML=S.sfx?"♪&ensp;机械音效：开":"♪&ensp;机械音效：关";

  if(S.sfx){ac();tone(880,1200,.09,"sine",.1)}

});

const spd=$("spd");

function applySpd(){S.speed=+spd.value;$("spdVal").textContent=S.speed.toFixed(1)+"×";

  spd.style.setProperty("--fill",((S.speed-.5)/1.5*100)+"%")}

spd.addEventListener("input",applySpd);applySpd();

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

  if(e.code==="Space"){e.preventDefault();togglePlay()}

  else if(e.code==="KeyA"){tryPush()}

});



/* ── 悬停互动 ── */

let winkT=null;

$("giraffeHit").addEventListener("mouseenter",()=>{

  if(bubble.classList.contains("show"))return;

  bubble.classList.add("show");

  eyeS.classList.add("squint");

  clearTimeout(winkT);winkT=setTimeout(()=>eyeS.classList.remove("squint"),420);

  setTimeout(()=>bubble.classList.remove("show"),2400);

});

$("lampHit").addEventListener("mouseenter",()=>$("lampG").classList.add("off"));

$("lampHit").addEventListener("mouseleave",()=>$("lampG").classList.remove("off"));



/* ── 点火 ── */

setTool();setKnob(0);setScrew(0,1,1);render();

cycle();

})();

</script>

</body>

</html>

Air84 楼主 08-27 00:46

8楼

哇好长的螺丝刀

还有交互

没有第五条腿好评

为什么螺丝要放在玻璃瓶里

一天99颗还是太人道了

……等会？27b参数里还塞下了特化？？？
𝓦𝓈𝓁𝓏𝓖𝓂𝓏𝓈 08-27 00:48

9楼

别问我，自己看就知道了，提示词格式均为创建一个HTML，内容是SVG绘制一个xxx的2D动画
supermadmax 08-27 01:07

10楼

我也来

GLM 5.3

有点惊悚了，甚至还是六条腿 ^-^

Qwen3.8 Flash

再来个 Opus 5
Air84 楼主 08-27 01:08

11楼

期待5.3f搓出千手观音（？

千问这个脖子有点哈人了……~~欢乐谷效应犯了~~

opus守擂成功