当前位置：首页 > CSS

纯css制作时钟

2026-04-02 12:02:14CSS

纯CSS制作时钟

使用纯CSS制作时钟需要结合HTML结构和CSS动画技术，通过transform和animation属性模拟时钟指针的旋转效果。以下是实现方法：

HTML结构

创建一个基础的HTML结构，包含时钟的表盘和三个指针（时、分、秒）：

纯css制作时钟

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

CSS样式

通过CSS定义时钟的外观和动画效果：

纯css制作时钟

.clock {
  width: 200px;
  height: 200px;
  border: 10px solid #333;
  border-radius: 50%;
  position: relative;
  margin: 50px auto;
  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: #000;
  animation: rotate-hour 43200s linear infinite;
}

.minute-hand {
  width: 4px;
  height: 70px;
  background: #555;
  animation: rotate-minute 3600s linear infinite;
}

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

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

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

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

指针初始位置调整

为了使时钟显示当前时间，需通过transform设置初始角度。例如：

.hour-hand {
  transform: rotate(90deg); /* 初始指向3点 */
}
.minute-hand {
  transform: rotate(180deg); /* 初始指向6点 */
}
.second-hand {
  transform: rotate(270deg); /* 初始指向9点 */
}

刻度标记

添加刻度标记以增强真实感：

<div class="clock">
  <!-- 指针 -->
  <div class="hour-hand"></div>
  <div class="minute-hand"></div>
  <div class="second-hand"></div>
  <!-- 刻度 -->
  <div class="mark mark-12"></div>
  <div class="mark mark-3"></div>
  <div class="mark mark-6"></div>
  <div class="mark mark-9"></div>
</div>

.mark {
  position: absolute;
  width: 4px;
  height: 15px;
  background: #333;
}

.mark-12 { top: 10px; left: 50%; transform: translateX(-50%); }
.mark-3 { top: 50%; right: 10px; transform: translateY(-50%); }
.mark-6 { bottom: 10px; left: 50%; transform: translateX(-50%); }
.mark-9 { top: 50%; left: 10px; transform: translateY(-50%); }

优化细节

使用box-shadow添加表盘立体感：

.clock {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

添加中心轴点：

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