当前位置：首页 > CSS

css手工制作钟

2026-04-02 12:26:08CSS

使用CSS制作钟表

通过CSS和少量HTML可以创建一个模拟钟表，利用动画效果实现指针的旋转。以下是实现步骤：

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;
  background: #fff;
}

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

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

.second-hand {
  width: 2px;
  height: 80px;
  background: #f00;
  position: absolute;
  top: 20px;
  left: 99px;
  transform-origin: bottom center;
  animation: rotate-second 60s linear infinite;
}

.center-dot {
  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::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 15px;
  background: #333;
  top: 10px;
  left: 96px;
}

.clock::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 15px;
  background: #333;
  bottom: 10px;
  left: 96px;
}

实现实时时间同步

通过JavaScript使钟表显示当前真实时间：

css手工制作钟

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

  document.querySelector('.hour-hand').style.transform = 
    `rotate(${(hour * 30) + (minute * 0.5)}deg)`;
  document.querySelector('.minute-hand').style.transform = 
    `rotate(${minute * 6}deg)`;
  document.querySelector('.second-hand').style.transform = 
    `rotate(${second * 6}deg)`;
}

setInterval(updateClock, 1000);
updateClock();

优化指针动画

使用steps()函数使秒针跳动式移动：

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

添加数字刻度

在HTML中添加数字元素：

<div class="number number1">1</div>
<div class="number number2">2</div>
<!-- 其他数字... -->

对应的CSS定位：

.number {
  position: absolute;
  width: 20px;
  height: 20px;
  text-align: center;
  font-weight: bold;
}

.number1 { top: 20px; right: 40px; }
.number2 { top: 50px; right: 20px; }
<!-- 其他数字定位... -->

以上代码组合后可创建一个功能完整的CSS钟表，既可以是纯装饰性动画，也可以同步显示真实时间。