当前位置：首页 > CSS

css3制作时钟

2026-03-31 20:44:08CSS

CSS3 制作时钟的方法

使用CSS3的transform和animation属性可以创建一个动态的时钟效果。以下是一个完整的实现步骤：

HTML结构

css3制作时钟

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

CSS样式

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

.hour-hand, .minute-hand, .second-hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: 50% 100%;
}

.hour-hand {
  width: 6px;
  height: 50px;
  background: #333;
  margin-left: -3px;
  animation: rotate 43200s linear infinite;
}

.minute-hand {
  width: 4px;
  height: 80px;
  background: #666;
  margin-left: -2px;
  animation: rotate 3600s linear infinite;
}

.second-hand {
  width: 2px;
  height: 90px;
  background: #f00;
  animation: rotate 60s linear infinite;
}

.center {
  width: 12px;
  height: 12px;
  background: #333;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -6px 0 0 -6px;
}

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

实现原理

时钟的表盘通过一个圆形边框的div实现，时针、分针和秒针分别用不同长度的矩形div表示。每个指针的旋转中心通过transform-origin设置为底部中心点。

css3制作时钟

animation属性控制指针的旋转速度和方向：

秒针：60秒完成一圈（360度）
分针：3600秒（60分钟）完成一圈
时针：43200秒（12小时）完成一圈

增强效果

可以添加刻度标记和数字使时钟更真实：

<div class="clock">
  <!-- 原有指针 -->
  <div class="mark mark-12">12</div>
  <div class="mark mark-3">3</div>
  <div class="mark mark-6">6</div>
  <div class="mark mark-9">9</div>
</div>

.mark {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 16px;
}

.mark-12 { transform: rotate(0deg); }
.mark-3 { transform: rotate(90deg); }
.mark-6 { transform: rotate(180deg); }
.mark-9 { transform: rotate(270deg); }