当前位置：首页 > CSS

css代码制作时钟

2026-04-02 12:03:45CSS

CSS代码制作时钟

制作一个纯CSS时钟需要结合HTML、CSS以及少量的JavaScript来实现动态效果。以下是一个完整的实现方案：

css代码制作时钟

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: 300px;
  height: 300px;
  border: 10px solid #333;
  border-radius: 50%;
  position: relative;
  margin: 50px auto;
  background: #fff;
}

.hour-hand {
  width: 8px;
  height: 80px;
  background: #333;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(0deg);
}

.minute-hand {
  width: 4px;
  height: 120px;
  background: #666;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(0deg);
}

.second-hand {
  width: 2px;
  height: 140px;
  background: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(0deg);
}

.center {
  width: 15px;
  height: 15px;
  background: #333;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

JavaScript动态效果

function updateClock() {
  const now = new Date();
  const hour = now.getHours() % 12;
  const minute = now.getMinutes();
  const second = now.getSeconds();

  const hourDegrees = (hour * 30) + (minute * 0.5);
  const minuteDegrees = minute * 6;
  const secondDegrees = second * 6;

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

setInterval(updateClock, 1000);
updateClock();

实现原理

时钟表盘通过border-radius设置为圆形，三个指针通过绝对定位固定在表盘中心。transform-origin属性设置旋转中心点为指针底部，JavaScript计算当前时间对应的旋转角度并实时更新。

css代码制作时钟

美化增强

可以添加刻度标记增强视觉效果：

/* 添加刻度标记 */
.clock::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: #333;
  border-radius: 50%;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}
/* 类似添加其他刻度... */

这个实现方案包含了完整的时钟功能，CSS负责样式和布局，JavaScript处理动态时间更新，每秒钟刷新一次指针位置。可以根据需要调整尺寸、颜色等样式参数。