CSS无法实现真正倒计时，因其无时间感知和变量动态更新能力；仅能通过JS控制CSS变量配合counter做静态伪倒计时，且存在精度低、无交互、不跨平台兼容等问题。
CSS 本身无法实现真正的倒计时逻辑——它没有时间感知能力，也不能修改变量值随时间变化。所谓“CSS 倒计时”，本质是用 CSS 变量（--count）配合预设的 @keyframes 动画 + counter 显示，仅适用于静态、已知总时长且无需交互或暂停的展示场景（比如页面加载后固定 5 秒的视觉提示）。真要响应用户操作、精确到秒、支持暂停/重置，必须用 JavaScript 驱动。
为什么不能只靠 counter 和 animation 做动态倒计时
浏览器的 counter 是只读的渲染时计算值，不支持运行时递减；CSS 变量虽可被 JS 修改，但纯 CSS 无法在动画每一帧里自动更新变量。常见错误是写这样的代码：
:root { --count: 5; }
.count::before {
counter-reset: sec var(--count);
content: counter(sec);
animation: dec 5s steps(5);
}
@keyframes dec { to { --count: 0; } }
这段无效：--count: 0 在 @keyframes 中不会触发 counter-reset 重算，counter() 也不会跟着变。
可行方案：JS 控制 CSS 变量 + counter 渲染
让 JS 每秒更新一个 CSS 变量，再用 counter-reset 绑定该变量，content 读取计数器——这是唯一能用上 counter 的“伪倒计时”方式：
立即学习“前端免费学习笔记（深入）”；
- HTML 中放一个带
class="count"的空元素（如<span class="count"></span>） - JS 启动倒计时，每秒执行：
el.style.setProperty('--count', String(secondsLeft)) - CSS 写：
.count::before { counter-reset: sec var(--count); content: counter(sec); } - 注意：
counter-reset支持var()，但仅限于初始值；变量变更后，计数器会立即重置并显示新值（无过渡）
移动端适配关键点：避免字体缩放干扰计数显示
很多移动浏览器默认开启「自动调整小字体」，导致 content 生成的数字忽大忽小。必须显式锁定文本行为：
- 给计数容器加
text-size-adjust: none（iOS Safari 必须） - 禁用用户缩放：
-webkit-text-size-adjust: 100%+touch-action: manipulation - 避免用
rem或%设置计数器字号，改用px或em（基于父元素固定 font-size） - 测试真机：Chrome Android 对
counter渲染有轻微延迟，建议加will-change: content提前提示合成
真正需要交互的倒计时，别硬套 CSS 计数器——用 textContent 更新文本最稳。CSS 变量+counter 这套只适合极简静态展示，而且得接受它无法和 JS 时间线对齐、无法监听完成事件、无法做毫秒级精度这些事实。
