css动画时钟制作

使用CSS制作动画时钟

通过CSS的transform和animation属性可以创建平滑的时钟动画效果，结合JavaScript动态更新时间指针角度。

HTML结构

创建时钟的基本DOM结构，包含表盘、时针、分针和秒针：

<div class="clock">
  <div class="hand hour"></div>
  <div class="hand minute"></div>
  <div class="hand second"></div>
</div>

CSS样式

定义时钟外观和动画效果：

.clock {
  width: 200px;
  height: 200px;
  border: 10px solid #333;
  border-radius: 50%;
  position: relative;
  margin: 50px auto;
}

.hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: 50% 100%;
  background: #000;
}

.hour {
  width: 6px;
  height: 60px;
  margin-left: -3px;
}

.minute {
  width: 4px;
  height: 80px;
  margin-left: -2px;
}

.second {
  width: 2px;
  height: 90px;
  background: red;
  margin-left: -1px;
  transition: transform 0.2s cubic-bezier(0.4, 2.3, 0.3, 1);
}

JavaScript动态控制

通过计算当前时间确定指针角度：

function updateClock() {
  const now = new Date();
  const hour = now.getHours() % 12;
  const minute = now.getMinutes();
  const second = now.getSeconds();

  const hourDeg = (hour * 30) + (minute * 0.5);
  const minuteDeg = minute * 6;
  const secondDeg = second * 6;

  document.querySelector('.hour').style.transform = `rotate(${hourDeg}deg)`;
  document.querySelector('.minute').style.transform = `rotate(${minuteDeg}deg)`;
  document.querySelector('.second').style.transform = `rotate(${secondDeg}deg)`;
}

setInterval(updateClock, 1000);
updateClock();

纯CSS动画时钟方案

不需要JavaScript的简化版本，利用CSS变量和动画实现：

关键CSS代码

:root {
  --second: 0;
  --minute: 0;
  --hour: 0;
}

.second {
  animation: rotate 60s linear infinite;
}

.minute {
  animation: rotate 3600s linear infinite;
}

.hour {
  animation: rotate 43200s linear infinite;
}

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

添加时钟刻度

增强视觉效果的表盘刻度：

.clock::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  background: #333;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* 添加12个刻度 */
.clock {
  background: 
    linear-gradient(30deg, transparent 48%, #333 48%, #333 52%, transparent 52%),
    linear-gradient(60deg, transparent 48%, #333 48%, #333 52%, transparent 52%),
    linear-gradient(90deg, transparent 48%, #333 48%, #333 52%, transparent 52%),
    /* 其他角度省略... */
    white;
}