SVG 时钟 (opens in new tab)

一个奇怪的想法： GitHub Profile README、邮件签名等没有JS的情况下，如何展示当前时间，并且最好可以跳动？ 想来想去，纯 SVG 实现。于是呼来AI： codex-5.3.mod.svg codex-5.3.new.svg gemini-3.1-pro-thinking.new.svg gemini-3.1-pro.new.svg gemini-3.mod.svg mimo-2.5-pro.new.svg opus-4.6.mod.svg opus-4.6.thinking.new.svg 其中大多数AI写得都很平庸。采用堆一大堆 。gemini 惊艳，它用了滑动胶片法（Filmstrip） 为了彻底解决冗余和跨天 Bug，我们可以采用“滑动胶片”的设计思维：将单独的数字拼成一条长长的文本带（胶片），外面罩上一个双位宽度的剪裁窗口（）。时间流逝时，整个文本带像胶片一样通过 transform: translateX 整体向左跳格（使用 steps() 级联函数）。 这样优化后，我们不仅消除了长达几十行的冗余标签，还将“时、分、秒”整合成三个独立的...