[分享]css写一个时钟

CSS可以用来创建各种各样的效果，包括时钟效果。下面的示例展示了如何使用CSS来创建一个简单的时钟。

.clock {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  position: relative;
  margin: 0 auto;
  transform: translateY(-50%);
}
.clock:after {
  content: ';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background-color: #000;
  border-radius: 50%;
  margin: -5px 0 0 -5px;
}
.clock .hour {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 6px;
  background-color: #000;
  transform-origin: 0 50%;
  transform: rotate(90deg) translateX(30px) translateY(-50%);
}
.clock .minute {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 4px;
  background-color: #000;
  transform-origin: 0 50%;
  transform: rotate(90deg) translateX(40px) translateY(-50%);
}
.clock .second {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 2px;
  background-color: #f00;
  transform-origin: 0 50%;
  transform: rotate(90deg) translateX(50px) translateY(-50%);
  animation: rotateSeconds 60s linear infinite;
}
@keyframes rotateSeconds {
  100% {
    transform: rotate(450deg) translateX(50px) translateY(-50%);
  }
} 

如上所示，HTML中需要一个包含“clock”类的元素，它定义了时钟的外观和大小。此外，还需要使用伪元素“:after”来定义时钟的中心点。

时钟的小时、分钟和秒针都是定位元素，它们使用不同的长度和颜色，并使用transform属性对其进行旋转和平移。秒针还使用了CSS动画来实现旋转的效果。

通过上述代码，我们就可以轻松地使用CSS来创建一个简单的时钟效果。