当前位置：首页 > CSS

css3制作时钟样式

2026-02-12 16:58:28CSS

CSS3 制作时钟样式

通过CSS3的动画、变换和伪元素等特性，可以创建一个动态的时钟样式。以下是实现方法：

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>

基础样式

.clock {
  width: 200px;
  height: 200px;
  border: 10px solid #333;
  border-radius: 50%;
  position: relative;
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

时钟刻度

css3制作时钟样式

.clock::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: #333;
  border-radius: 50%;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

指针样式

.hour-hand {
  width: 6px;
  height: 50px;
  background: #333;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: bottom center;
  transform: translate(-50%, -100%) rotate(0deg);
}

.minute-hand {
  width: 4px;
  height: 70px;
  background: #666;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: bottom center;
  transform: translate(-50%, -100%) rotate(0deg);
}

.second-hand {
  width: 2px;
  height: 80px;
  background: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: bottom center;
  transform: translate(-50%, -100%) rotate(0deg);
}

中心点样式

css3制作时钟样式

.center-dot {
  width: 12px;
  height: 12px;
  background: #333;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

动画效果

@keyframes rotate {
  100% {
    transform: translate(-50%, -100%) rotate(360deg);
  }
}

.second-hand {
  animation: rotate 60s linear infinite;
}

.minute-hand {
  animation: rotate 3600s linear infinite;
}

.hour-hand {
  animation: rotate 43200s linear infinite;
}

实时更新指针 如果需要实时显示当前时间，可以添加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 = 
    `translate(-50%, -100%) rotate(${seconds * 6}deg)`;

  document.querySelector('.minute-hand').style.transform = 
    `translate(-50%, -100%) rotate(${minutes * 6}deg)`;

  document.querySelector('.hour-hand').style.transform = 
    `translate(-50%, -100%) rotate(${hours * 30 + minutes * 0.5}deg)`;
}

setInterval(updateClock, 1000);
updateClock();

优化建议