时钟指针加载动画（Clock Loader 秒针环绕表盘）

效果演示（真实可交互）

表盘中秒针每秒环绕一圈，分针与时针按 1:12:144 的真实钟表比例转动，指针运动完全符合真实时钟逻辑。浅色 / 深色表盘一键切换，速度滑块 0.3× - 3× 实时生效。

完整代码

HTML 结构：

<div class="cl-clock">
  <span class="cl-dial"></span>            <!-- 刻度层 -->
  <span class="cl-hand cl-hour"></span>    <!-- 时针 -->
  <span class="cl-hand cl-minute"></span>  <!-- 分针 -->
  <span class="cl-hand cl-second"></span>  <!-- 秒针 -->
  <span class="cl-pin"></span>             <!-- 中心轴 -->
</div>

CSS 核心：

.cl-clock {
  --cl-dur: 1.6s;               /* 秒针一圈的时长 */
  position: relative; width: 150px; height: 150px;
  border-radius: 50%; border: 2px solid #e3e8f5;
}

/* 12 个刻度：repeating-conic-gradient 一步画出，免去 12 个节点 */
.cl-dial { position: absolute; inset: 7px; border-radius: 50%;
  background: repeating-conic-gradient(#c8d0e8 0deg 1.5deg, transparent 1.5deg 30deg); }

/* 指针统一定位：底部中心为旋转轴 */
.cl-hand { position: absolute; left: 50%; bottom: 50%;
           transform-origin: 50% 100%; border-radius: 6px; }
.cl-hour   { width: 5px; height: 34px; margin-left: -2.5px;
             animation: cl-spin calc(var(--cl-dur) * 144) linear infinite; }
.cl-minute { width: 3.5px; height: 48px; margin-left: -1.75px;
             animation: cl-spin calc(var(--cl-dur) * 12) linear infinite; }
.cl-second { width: 2px; height: 54px; margin-left: -1px;
             animation: cl-spin var(--cl-dur) linear infinite; }

@keyframes cl-spin { to { transform: rotate(360deg); } }

JS（调速）： 只改 --cl-dur 一个变量，三根指针按倍率同步加速/减速，比例关系不变。

参数说明

兼容性与性能

• 动画只动 transform: rotate，合成层动画，60fps 流畅；刻度由单个渐变绘制，无额外 DOM 节点
• repeating-conic-gradient 需要 Chrome 69+ / Firefox 83+ / Safari 12.1+，旧浏览器可用 12 个绝对定位 <i> 代替
• 兼容 Chrome / Firefox / Safari / Edge 最新版，移动端一致
• 三根指针 + 中心轴共 4 个动画节点，开销极小
• 适合”等待计时”类场景：表单倒计时、问卷作答、支付超时提醒等，时钟语义天然传递”时间正在流逝”

常见问题

Q: 想让秒针走”滴答”式而非平滑转动？ 把 animation-timing-function 改为 steps(60, end)，秒针就会一秒一格地跳动，更像真实机械表。

Q: 需要显示真实的当前时间怎么办？ 用 JS 读取 Date 计算三根指针的初始角度，再叠加 CSS 动画即可；秒针初值 = seconds / 60 * 360deg，分针要加上秒针带来的微小偏移才精确。

Q: 为什么时针要转 144 圈才转完一圈？ 因为演示里秒针 1.6s 转一圈（相当于”1 秒”），按真实比例时针一圈 = 144 个秒针周期；实际使用时可单独调整三根指针的时长，比例不必严格。

Q: 刻度在部分浏览器渲染偏细或发虚？ 把渐变的实线角度从 1.5deg 加大到 2.5deg，或在 .cl-dial 上加 transform: translateZ(0) 强制走 GPU 层即可改善。