css3制作时钟

CSS3 制作时钟

使用 CSS3 和少量 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;
  margin: 50px auto;
  background: #fff;
}

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

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

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

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

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

使用 JavaScript 实现动态效果

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::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: 
    linear-gradient(0deg, transparent 45%, #333 45%, #333 55%, transparent 55%),
    linear-gradient(30deg, transparent 45%, #333 45%, #333 55%, transparent 55%),
    linear-gradient(60deg, transparent 45%, #333 45%, #333 55%, transparent 55%),
    linear-gradient(90deg, transparent 45%, #333 45%, #333 55%, transparent 55%),
    linear-gradient(120deg, transparent 45%, #333 45%, #333 55%, transparent 55%),
    linear-gradient(150deg, transparent 45%, #333 45%, #333 55%, transparent 55%),
    linear-gradient(180deg, transparent 45%, #333 45%, #333 55%, transparent 55%),
    linear-gradient(210deg, transparent 45%, #333 45%, #333 55%, transparent 55%),
    linear-gradient(240deg, transparent 45%, #333 45%, #333 55%, transparent 55%),
    linear-gradient(270deg, transparent 45%, #333 45%, #333 55%, transparent 55%),
    linear-gradient(300deg, transparent 45%, #333 45%, #333 55%, transparent 55%),
    linear-gradient(330deg, transparent 45%, #333 45%, #333 55%, transparent 55%);
}

动画效果优化

为秒针添加平滑过渡效果：

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

将以上代码整合到 HTML 文件中，即可实现一个完整的 CSS3 时钟。时钟会每秒自动更新，显示当前时间。