当前位置：首页 > CSS

css3制作时钟样式

2026-01-08 20:06:14CSS

CSS3 制作时钟样式

使用 CSS3 可以创建一个美观且动态的时钟样式，结合 transform 和 animation 属性实现指针的旋转效果。

HTML 结构

时钟的基本 HTML 结构包括一个容器和时、分、秒指针。

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

CSS 样式

通过 CSS3 设置时钟的外观和动画效果。

css3制作时钟样式

时钟容器样式

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

指针通用样式

css3制作时钟样式

.hour-hand, .minute-hand, .second-hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: 50% 100%;
}

.hour-hand {
  width: 6px;
  height: 50px;
  background: #000;
  margin-left: -3px;
}

.minute-hand {
  width: 4px;
  height: 70px;
  background: #555;
  margin-left: -2px;
}

.second-hand {
  width: 2px;
  height: 80px;
  background: #f00;
  margin-left: -1px;
}

动画效果 使用 @keyframes 定义指针的旋转动画。

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

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

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

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

完整代码示例

将上述 HTML 和 CSS 结合，即可实现一个简单的 CSS3 时钟样式。如需更复杂的设计，可以添加刻度、数字或背景图案。

<!DOCTYPE html>
<html>
<head>
  <style>
    .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: 50px;
      background: #000;
      margin-left: -3px;
    }

    .minute-hand {
      width: 4px;
      height: 70px;
      background: #555;
      margin-left: -2px;
    }

    .second-hand {
      width: 2px;
      height: 80px;
      background: #f00;
      margin-left: -1px;
    }

    @keyframes rotate {
      100% {
        transform: rotate(360deg);
      }
    }

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

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

    .hour-hand {
      animation: rotate 43200s linear infinite;
    }
  </style>
</head>
<body>
  <div class="clock">
    <div class="hour-hand"></div>
    <div class="minute-hand"></div>
    <div class="second-hand"></div>
  </div>
</body>
</html>

动态更新

若需实现实时动态效果，可通过 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();