当前位置：首页 > CSS

css制作小时钟

2026-02-13 07:40:12CSS

使用CSS制作小时钟

制作一个纯CSS的小时钟需要结合HTML结构、CSS样式以及少量JavaScript来实现动态效果。以下是具体实现方法：

HTML结构

创建一个包含时钟表盘、时针、分针和秒针的基础结构：

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

CSS样式

设置时钟的外观和指针动画：

.clock {
  width: 200px;
  height: 200px;
  border: 10px solid #333;
  border-radius: 50%;
  position: relative;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

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

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

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

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

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

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

JavaScript动态调整

通过JavaScript获取当前时间并调整指针初始位置：

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

  const hourDeg = (hour * 30) + (minute * 0.5);
  const minuteDeg = minute * 6;
  const secondDeg = second * 6;

  document.querySelector('.hour-hand').style.transform = `rotate(${hourDeg}deg)`;
  document.querySelector('.minute-hand').style.transform = `rotate(${minuteDeg}deg)`;
  document.querySelector('.second-hand').style.transform = `rotate(${secondDeg}deg)`;
}

setInterval(updateClock, 1000);
updateClock(); // 初始化

优化建议

刻度标记：添加12个刻度元素或使用伪元素标记小时刻度。

平滑动画：将秒针动画改为steps(60)实现跳秒效果：

.second-hand {
  animation: rotate-second 60s steps(60) infinite;
}

响应式设计：通过CSS变量动态调整时钟大小：

:root {
  --clock-size: 200px;
}
.clock {
  width: var(--clock-size);
  height: var(--clock-size);
}

纯CSS替代方案（无JavaScript）

通过CSS变量和calc()动态计算旋转角度：

.clock {
  --hour: 0;
  --minute: 0;
  --second: 0;
}
.hour-hand {
  transform: rotate(calc(var(--hour) * 30deg + var(--minute) * 0.5deg));
}
.minute-hand {
  transform: rotate(calc(var(--minute) * 6deg));
}
.second-hand {
  transform: rotate(calc(var(--second) * 6deg));
}

需配合服务端渲染或内联样式注入当前时间。

以上方法可根据需求选择纯CSS或结合JavaScript实现动态效果。

css制作小时钟