CSS倒计时环制作教程

本文深入解析了如何用CSS和SVG精准实现高性能倒计时圆形进度环，重点揭示了stroke-dasharray与stroke-dashoffset协同控制进度的核心原理——通过动态计算圆周长并线性映射剩余时间，避免常见误区如误用rotate旋转、硬编码数值或忽略单位差异；同时详解文字绝对定位居中与pointer-events: none的必要性、requestAnimationFrame与CSS transition结合防卡顿的实战技巧，以及跨浏览器（尤其iOS Safari）兼容性陷阱，帮你绕过90%开发者踩过的坑，做出丝滑、精准、可交互的生产级倒计时环。

SVG 的 stroke-dasharray 和 stroke-dashoffset 怎么配？

倒计时环本质是“用虚线长度模拟进度”，不是靠旋转整个 SVG 容器——那样会连文字一起转，且难以精准控制终点。关键在两个属性：stroke-dasharray 设定一圈虚线总长（即周长），stroke-dashoffset 控制虚线起始点偏移量。

常见错误是直接写死数值，比如设 stroke-dasharray="100" 却没算实际周长；或把 offset 当成百分比用（它单位是像素，不是 %）。

• 先用 JS 算出圆的周长：const circumference = 2 * Math.PI * radius，radius 取自 的 r 值
• stroke-dasharray 设为 ${circumference}，让整圈只有一段实线
• stroke-dashoffset 初始值 = circumference（完全隐藏），倒计时每秒减去 circumference / duration
• CSS 动画不能直接驱动 stroke-dashoffset 的 JS 动态变化，得用 transition 或 requestAnimationFrame

为什么不用 transform: rotate() 直接转 ？

因为 是中心对称图形，单纯旋转它视觉上根本看不出动——除非加个非对称标记（比如一个 小三角当指针），但这就增加 DOM 复杂度，还容易和文字定位错位。

更严重的是：旋转动画无法与倒计时数值同步精确到帧。比如 5 秒倒计时，你希望第 3 秒时停在 60% 位置，但 rotate(216deg)（360×0.6）在 CSS timing function 下不一定准时到达。

• 纯 CSS rotate 适合固定时长、无需 JS 交互的装饰性动画
• 倒计时环必须响应 JS 更新的剩余时间，stroke-dashoffset 是唯一能线性映射时间与视觉进度的属性
• 如果硬要用 rotate，得额外套一层 并手动计算角度，反而绕远路

如何让文字居中且不随环旋转？

文字必须脱离 SVG 的坐标系，否则用 放在 里，一旦给 加 transform，文字也会转。正确做法是把文字用 HTML