当前位置：首页 > CSS

css动画时钟制作

2026-01-28 18:21:36CSS

制作CSS动画时钟的方法

使用HTML和CSS创建一个动画时钟需要结合CSS动画和JavaScript来动态更新时间。以下是具体实现步骤：

HTML结构

创建一个基本的HTML结构，包含时钟的时针、分针和秒针：

css动画时钟制作

<div class="clock">
  <div class="hour-hand"></div>
  <div class="minute-hand"></div>
  <div class="second-hand"></div>
  <div class="center"></div>
</div>

CSS样式

为时钟和指针添加样式，并使用CSS动画让秒针持续旋转：

css动画时钟制作

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

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

.hour-hand {
  width: 6px;
  height: 60px;
  top: 50px;
  left: 97px;
}

.minute-hand {
  width: 4px;
  height: 80px;
  top: 30px;
  left: 98px;
}

.second-hand {
  width: 2px;
  height: 90px;
  top: 20px;
  left: 99px;
  background: red;
  animation: rotate 60s linear infinite;
}

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

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

JavaScript动态更新

使用JavaScript获取当前时间并更新时针和分针的位置：

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

  const hourDeg = (hours * 30) + (minutes * 0.5);
  const minuteDeg = minutes * 6;
  const secondDeg = seconds * 6;

  document.querySelector('.hour-hand').style.transform = `rotate(${hourDeg}deg)`;
  document.querySelector('.minute-hand').style.transform = `rotate(${minuteDeg}deg)`;
  document.querySelector('.second-hand').style.animation = 'none';
  setTimeout(() => {
    document.querySelector('.second-hand').style.animation = 'rotate 60s linear infinite';
  }, 10);
}

setInterval(updateClock, 1000);
updateClock();

优化时钟外观

可以添加时钟刻度和其他装饰元素增强视觉效果：

.clock::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* 添加时钟刻度 */
.clock::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(0deg, transparent 95%, #333 5%),
              linear-gradient(30deg, transparent 95%, #333 5%),
              linear-gradient(60deg, transparent 95%, #333 5%),
              linear-gradient(90deg, transparent 95%, #333 5%),
              linear-gradient(120deg, transparent 95%, #333 5%),
              linear-gradient(150deg, transparent 95%, #333 5%),
              linear-gradient(180deg, transparent 95%, #333 5%),
              linear-gradient(210deg, transparent 95%, #333 5%),
              linear-gradient(240deg, transparent 95%, #333 5%),
              linear-gradient(270deg, transparent 95%, #333 5%),
              linear-gradient(300deg, transparent 95%, #333 5%),
              linear-gradient(330deg, transparent 95%, #333 5%);
}