推荐用 css 变量控制指针旋转，js 仅更新 --hour-rot、--minute-rot、--second-rot 的值，css 通过 transform: rotate(var(--xxx)) 和 transition 实现平滑动画，避免 style.transform 覆盖与逻辑耦合。
为什么直接用 transform: rotate() 更新指针不推荐
每次用 JS 直接改元素的 style.transform，会覆盖其他 transform 值（比如缩放、平移），且难以和 CSS 动画/过渡协同。更关键的是，它把样式逻辑硬编码进 JS，后续想换动画曲线或加阴影效果就得改 JS —— 不灵活，也不利于维护。
用 CSS 变量把「旋转角度」抽出来，JS 只负责更新变量值，CSS 负责渲染和动效，职责清晰。
如何定义和更新 --hour-rot、--minute-rot、--second-rot
在 :root 或时钟容器上声明初始变量，JS 用 element.style.setProperty() 实时更新：
:root {
--hour-rot: 0deg;
--minute-rot: 0deg;
--second-rot: 0deg;
}
JS 中计算角度并写入（注意：秒针每秒转 6°，分针每分钟转 0.1°，时针每小时转 30°，还要叠加分钟带来的偏移）：
-
const sec = now.getSeconds();→sec * 6度 -
const min = now.getMinutes() + sec / 60;→min * 6度（分针含秒偏移） -
const hr = (now.getHours() % 12) + min / 60;→hr * 30度（时针含分偏移）
然后统一写入：
document.documentElement.style.setProperty('--second-rot', `${secAngle}deg`);
document.documentElement.style.setProperty('--minute-rot', `${minAngle}deg`);
document.documentElement.style.setProperty('--hour-rot', `${hrAngle}deg`);
如何让指针用变量驱动旋转且带顺滑过渡
每个指针元素（如 .hour-hand）用 transform: rotate(var(--hour-rot));，同时加 transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.4, 1); —— 这样秒针跳变时，分针和时针会自然跟上，不突兀。
注意两点：
- 必须给指针设置
transform-origin: bottom center;（假设指针底部锚定在表盘中心），否则旋转中心错位 - 避免对
rotate()使用transition同时又用will-change: transform;，旧版 Safari 可能卡顿；现代浏览器可加will-change: transform;提升性能，但只在需要时启用
为什么秒针“跳动”而非“滑动”？怎么改成平滑扫秒
默认按秒取整（getSeconds()）导致秒针每秒突变一次。若要扫秒，需用 now.getMilliseconds() 补精度：
const sec = now.getSeconds() + now.getMilliseconds() / 1000; const secAngle = sec * 6;
但要注意：频繁触发 requestAnimationFrame 更新变量，比每秒 setInterval 消耗略高；且部分低端设备可能因重绘压力出现掉帧。实际项目中，优先保证分针/时针平滑，秒针是否扫秒取决于设计需求和性能权衡。
真正容易被忽略的是：CSS 变量更新本身是同步的，但浏览器何时应用、何时重绘、是否触发合成层提升，都依赖后续的渲染流水线。别指望 setProperty 后立刻看到变化——它只是“告诉 CSS 引擎该变了”，最终呈现仍由下一帧决定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
