当前位置：首页 > CSS

用css制作时钟

2026-04-02 00:17:57CSS

使用CSS制作时钟

以下是一个使用HTML和CSS制作简单时钟的方法。该方法利用CSS的transform和animation属性来实现时钟指针的旋转效果。

HTML结构

<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;
  margin: 50px auto;
  background: #fff;
}

.hour-hand, .minute-hand, .second-hand {
  position: absolute;
  background: #333;
  transform-origin: bottom center;
}

.hour-hand {
  width: 6px;
  height: 60px;
  top: 50px;
  left: 97px;
  animation: rotate-hour 43200s linear infinite;
}

.minute-hand {
  width: 4px;
  height: 80px;
  top: 30px;
  left: 98px;
  animation: rotate-minute 3600s linear infinite;
}

.second-hand {
  width: 2px;
  height: 90px;
  top: 20px;
  left: 99px;
  background: red;
  animation: rotate-second 60s linear infinite;
}

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

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

说明

.clock定义了时钟的外框，包括大小、边框和圆角。
.hour-hand、.minute-hand和.second-hand分别定义了时针、分针和秒针的样式和位置。
transform-origin: bottom center确保指针围绕底部中心旋转。
animation属性通过@keyframes定义了指针的旋转动画，时间分别为12小时、60分钟和60秒。

改进建议

如果需要更精确的时间显示，可以结合JavaScript动态更新指针的角度，而不是依赖CSS动画。例如：

用css制作时钟

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

  const hourDegrees = (hours * 30) + (minutes * 0.5);
  const minuteDegrees = minutes * 6;
  const secondDegrees = seconds * 6;

  document.querySelector('.hour-hand').style.transform = `rotate(${hourDegrees}deg)`;
  document.querySelector('.minute-hand').style.transform = `rotate(${minuteDegrees}deg)`;
  document.querySelector('.second-hand').style.transform = `rotate(${secondDegrees}deg)`;
}

setInterval(updateClock, 1000);
updateClock();

这种方法可以确保时钟与实际时间同步，且无需依赖CSS动画的精确性。