当前位置：首页 > CSS

css3制作时钟

2026-01-08 17:38:36CSS

使用CSS3制作时钟

通过CSS3的动画和变换特性可以创建一个动态的时钟效果，无需JavaScript即可实现基本功能。以下是实现方法：

时钟结构

HTML部分需要包含时钟的表盘、时针、分针和秒针：

css3制作时钟

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

基础样式

设置时钟表盘和指针的初始样式：

css3制作时钟

.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: #000;
}

.minute-hand {
  width: 4px;
  height: 80px;
  background: #555;
}

.second-hand {
  width: 2px;
  height: 90px;
  background: #f00;
}

动画实现

使用@keyframes创建无限旋转动画：

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

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

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

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

刻度标记（可选）

添加时钟刻度增强视觉效果：

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

/* 添加12个刻度 */
.clock::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 15px;
  background: #333;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

/* 其他刻度可以通过伪元素或额外元素实现 */