当前位置：首页 > CSS

css怎么制作时钟

2026-02-26 23:21:57CSS

使用CSS制作时钟

基础结构

创建一个HTML文件，包含时钟的基本结构。通常需要一个圆形表盘和三个指针（时、分、秒）。

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

表盘样式

使用CSS设置表盘的圆形外观和指针的初始位置。表盘通常是一个固定大小的圆，指针通过绝对定位居中。

.clock {
  width: 200px;
  height: 200px;
  border: 10px solid #333;
  border-radius: 50%;
  position: relative;
  margin: 50px auto;
}
.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;
}

动画效果

通过CSS的transform属性和@keyframes实现指针旋转动画。秒针每分钟旋转360度，分针每小时旋转360度，时针每12小时旋转360度。

.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); }
}

动态更新

如果需要实时显示当前时间，可以结合JavaScript动态计算指针角度。

function updateClock() {
  const now = new Date();
  const seconds = now.getSeconds();
  const minutes = now.getMinutes();
  const hours = now.getHours() % 12;

  document.querySelector('.second-hand').style.transform = `rotate(${seconds * 6}deg)`;
  document.querySelector('.minute-hand').style.transform = `rotate(${minutes * 6}deg)`;
  document.querySelector('.hour-hand').style.transform = `rotate(${hours * 30 + minutes * 0.5}deg)`;
}
setInterval(updateClock, 1000);
updateClock(); // 初始化

刻度标记

为表盘添加刻度标记，增强视觉效果。可以通过伪元素或额外的HTML元素实现。

.clock::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  width: 4px;
  height: 15px;
  background: #333;
  transform: translateX(-50%);
}

通过以上步骤，可以创建一个功能完整且视觉效果良好的CSS时钟。

css怎么制作时钟