当前位置：首页 > CSS

css怎么制作时钟

2026-03-31 22:35:05CSS

使用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样式

为时钟添加样式，包括表盘和指针的定位与动画：

css怎么制作时钟

.clock {
  width: 200px;
  height: 200px;
  border: 10px solid #333;
  border-radius: 50%;
  position: relative;
  margin: 50px auto;
  background: #fff;
}

.hour-hand {
  width: 6px;
  height: 50px;
  background: #333;
  position: absolute;
  top: 50px;
  left: 97px;
  transform-origin: bottom center;
}

.minute-hand {
  width: 4px;
  height: 70px;
  background: #666;
  position: absolute;
  top: 30px;
  left: 98px;
  transform-origin: bottom center;
}

.second-hand {
  width: 2px;
  height: 90px;
  background: red;
  position: absolute;
  top: 10px;
  left: 99px;
  transform-origin: bottom center;
}

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

JavaScript动态更新

使用JavaScript获取当前时间并更新指针位置：

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

  const hourDegrees = (hours * 30) + (0.5 * minutes);
  const minuteDegrees = (minutes * 6) + (0.1 * seconds);
  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怎么制作时钟

.clock::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* 添加12个刻度 */
.clock::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 10px;
  background: #333;
  top: 5px;
  left: 99px;
  transform-origin: bottom center;
}

/* 使用伪元素或额外HTML元素创建更多刻度 */

平滑动画效果

为指针添加过渡效果：

.hour-hand, .minute-hand {
  transition: transform 0.3s cubic-bezier(0.4, 2.3, 0.3, 1);
}

.second-hand {
  transition: transform 0.2s cubic-bezier(0.4, 2.8, 0.3, 1);
}

纯CSS动画时钟（无JavaScript）

仅使用CSS动画实现静态时钟（不显示实时时间）：

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

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

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

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