用 requestAnimationFrame 每帧根据 Date.now() 计算真实经过毫秒数，结合秒/分/时及毫秒偏移动态算角度（如秒针：(s + ms/1000)×6°），并设 transform-origin: center 确保绕中心旋转，同时移除所有指针的 transition 和 animation。
transform: rotate() 的角度怎么随时间动态更新
CSS 时钟指针不能靠 animation 写死一圈 60 秒——秒针要实时贴合系统时间，否则一刷新就跳或不同步。核心是用 JS 每秒读取 new Date()，算出当前秒/分/时对应的角度，再写进 style.transform。
关键不是“怎么转”，而是“什么时候算、怎么算准”：
- 秒针：每秒走 6°（360° ÷ 60），但得包含毫秒偏移，否则会卡顿。用
seconds + milliseconds / 1000再 × 6 - 分针：每分钟走 6°，但也要叠加秒带来的偏移（
seconds / 60），否则分针整点才动 - 时针：每小时走 30°（360° ÷ 12），偏移来自分钟（
minutes / 60）和秒（seconds / 3600）
requestAnimationFrame 而不是 setInterval(, 1000)
用 setInterval(fn, 1000) 更新指针，表面看是每秒一次，实际执行时机不可控：可能延迟、可能堆积、在后台标签页还会被节流，导致指针跳秒或滞后。
正确做法是用 requestAnimationFrame 驱动，配合时间戳做差值计算：
立即学习“前端免费学习笔记（深入）”；
- 每次回调拿到高精度时间戳（
performance.now()或Date.now()） - 跟上一次时间对比，算出真实经过的毫秒数，再推算角度
- 这样即使帧率波动，指针旋转依然线性、无跳变
示例关键逻辑：
function tick(timestamp) {
const now = new Date();
const secs = now.getSeconds() + now.getMilliseconds() / 1000;
const degSec = secs * 6;
secondHand.style.transform = `rotate(${degSec}deg)`;
requestAnimationFrame(tick);
}
rotate() 的起点和中心点必须设对
默认 transform-origin 是元素左上角，指针会绕着角落甩圈，不是绕表盘中心转。必须显式设为 center 或具体坐标。
常见错误写法：transform-origin: 50% 50% 看似合理，但若指针元素本身有 margin/padding/border，或父容器用了 transform，50% 可能错位。
- 最稳方案：给指针元素加
transform-origin: center（现代浏览器全支持） - 确保指针的 DOM 结构是绝对定位，且 top/left 设为表盘中心（比如
top: 50%; left: 50%），再用translate(-50%, -50%)回拉锚点 - 避免用
px值硬写 origin，响应式下会失效
linear 动画曲线其实在 JS 驱动下是多余的
标题里说“利用 linear 匀速旋转”，但真正在 JS 里每帧手动设置 transform，CSS 的 transition 或 @keyframes 就不该存在——它会干扰 JS 直接写入的值，造成拖影、回弹或延迟生效。
- 删掉所有针对指针的
transition: transform ... - 不要给指针加
animation，哪怕只是infinite linear - 如果想让指针初始入场柔和，只在首次渲染后加一次
transition，且 100ms 内结束，之后立刻移除
真正“匀速”的来源是 JS 每帧按真实时间比例算角度，不是靠 CSS 缓动函数撑场面。
最容易被忽略的是毫秒级偏移的处理和 transform-origin 的实际生效位置——这两处一错，指针看着在转，但不是“走时”，而是“表演转”。
