当前位置：首页 > 文章列表 > 文章 > 前端 > CSS倒计时环制作教程

CSS倒计时环制作教程

2026-04-30 19:33:51 0浏览收藏

倒计时环本质是“用虚线长度模拟进度”，不是靠旋转整个 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

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

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

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

盖在 SVG 上，靠绝对定位居中。

容易踩的坑是没设 pointer-events: none 在文字层，导致鼠标悬停时穿透不到底层 SVG，影响点击交互。

SVG 容器设 position: relative
文字
设 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)
文字容器加 style="max-width:100%"，确保事件透传给 SVG
避免用，兼容性差，iOS Safari 对它的 transform 支持不稳定

倒计时环卡顿，90% 不是性能问题，而是 JS 更新频率和 CSS 渲染节奏没对齐。比如用 setTimeout 每秒更新一次 stroke-dashoffset，但浏览器未必每秒正好刷新一帧，尤其在后台标签页时。

另一个隐蔽问题是 SVG 的 viewBox 和容器尺寸不匹配，导致缩放重绘触发 layout thrashing。

用 requestAnimationFrame 驱动更新，而不是 setInterval
确保 SVG 的 width/height 与 viewBox 等比，例如 viewBox="0 0 100 100" 就配 width="200px" height="200px"
给加 style="transition: stroke-dashoffset 0.1s linear"，别依赖 JS 插值——CSS 过渡更稳
避免在每次更新时重复调用 getBoundingClientRect() 或重排版操作