当前位置：首页 > CSS

css怎么制作钟

2026-03-11 19:24:11CSS

使用CSS制作钟表

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

.hour-hand, .minute-hand, .second-hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: 50% 100%;
}

.hour-hand {
  width: 6px;
  height: 60px;
  background: #333;
  margin-left: -3px;
}

.minute-hand {
  width: 4px;
  height: 80px;
  background: #666;
  margin-left: -2px;
}

.second-hand {
  width: 2px;
  height: 90px;
  background: red;
  margin-left: -1px;
}

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

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();

添加钟表刻度

要增加刻度标记，可以在HTML中添加元素：

css怎么制作钟

<div class="clock">
  <!-- 原有指针元素 -->
  <div class="mark mark-12"></div>
  <div class="mark mark-3"></div>
  <div class="mark mark-6"></div>
  <div class="mark mark-9"></div>
</div>

CSS样式：

.mark {
  position: absolute;
  width: 4px;
  height: 15px;
  background: #333;
  left: 50%;
  margin-left: -2px;
}

.mark-12 { top: 10px; transform: rotate(0deg); }
.mark-3 { 
  top: 50%;
  right: 10px;
  left: auto;
  margin-top: -7.5px;
  transform: rotate(90deg);
}
.mark-6 { bottom: 10px; transform: rotate(180deg); }
.mark-9 { 
  top: 50%;
  left: 10px;
  margin-top: -7.5px;
  transform: rotate(270deg);
}

纯CSS钟表(无JavaScript)

创建静态钟表只需固定指针角度：

.hour-hand {
  transform: rotate(30deg); /* 指向1点 */
}
.minute-hand {
  transform: rotate(180deg); /* 指向6点 */
}
.second-hand {
  transform: rotate(270deg); /* 指向9点 */
}

这种方法适合不需要动态更新的装饰性钟表。要实现动态效果，必须使用JavaScript定时更新指针角度。

标签: css