css3制作时钟

使用CSS3制作时钟

通过CSS3的动画和变换功能，可以创建一个动态的时钟效果。以下是实现方法：

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

为时钟添加样式和动画效果：

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

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

.hour-hand {
  width: 6px;
  height: 60px;
  top: 50px;
  left: 97px;
  animation: rotate-hour 43200s linear infinite;
}

.minute-hand {
  width: 4px;
  height: 80px;
  top: 30px;
  left: 98px;
  animation: rotate-minute 3600s linear infinite;
}

.second-hand {
  width: 2px;
  height: 90px;
  top: 20px;
  left: 99px;
  background: red;
  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::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.clock::after {
  background: 
    linear-gradient(30deg, transparent 48%, #333 48%, #333 52%, transparent 52%),
    linear-gradient(60deg, transparent 48%, #333 48%, #333 52%, transparent 52%),
    linear-gradient(90deg, transparent 48%, #333 48%, #333 52%, transparent 52%),
    linear-gradient(120deg, transparent 48%, #333 48%, #333 52%, transparent 52%),
    linear-gradient(150deg, transparent 48%, #333 48%, #333 52%, transparent 52%),
    linear-gradient(180deg, transparent 48%, #333 48%, #333 52%, transparent 52%),
    linear-gradient(210deg, transparent 48%, #333 48%, #333 52%, transparent 52%),
    linear-gradient(240deg, transparent 48%, #333 48%, #333 52%, transparent 52%),
    linear-gradient(270deg, transparent 48%, #333 48%, #333 52%, transparent 52%),
    linear-gradient(300deg, transparent 48%, #333 48%, #333 52%, transparent 52%),
    linear-gradient(330deg, transparent 48%, #333 48%, #333 52%, transparent 52%);
}

使用JavaScript同步时间

为获得准确时间，可以添加JavaScript代码：

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

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

setInterval(updateClock, 1000);
updateClock();

优化指针动画

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

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

通过以上方法，可以创建一个功能完整且视觉效果良好的CSS3时钟。可以根据需要调整大小、颜色和动画效果。