当前位置：首页 > CSS

css制作钟表

2026-02-12 19:59:18CSS

CSS制作钟表的方法

通过CSS和少量JavaScript可以创建一个动态的钟表。以下是实现步骤：

HTML结构

css制作钟表

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

.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-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #333;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin: -6px 0 0 -6px;
}

JavaScript动画

css制作钟表

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

  const hourDegrees = (hours * 30) + (minutes * 0.5);
  const minuteDegrees = minutes * 6;
  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();

优化建议

为钟表添加刻度可以增强视觉效果：

.clock::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: 
    /* 12点刻度 */
    linear-gradient(0deg, #333 0%, #333 4%, transparent 4%) 0% 0%,
    /* 3点刻度 */
    linear-gradient(90deg, #333 0%, #333 4%, transparent 4%) 100% 0%,
    /* 6点刻度 */
    linear-gradient(180deg, #333 0%, #333 4%, transparent 4%) 100% 100%,
    /* 9点刻度 */
    linear-gradient(270deg, #333 0%, #333 4%, transparent 4%) 0% 100%;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

响应式调整

通过CSS变量可以轻松调整钟表大小：

.clock {
  --size: 200px;
  width: var(--size);
  height: var(--size);
  /* 其他尺寸相关属性使用calc()计算 */
}

.hour-hand {
  height: calc(var(--size) * 0.3);
}

这种方法创建的钟表会实时显示当前时间，秒针会平滑移动。如需更高级效果，可以考虑使用CSS动画或SVG实现。