[分享]css3怎样做钟

CSS3是一个很强大的工具，可以实现很多有趣的效果，比如制作钟表。在CSS3中，我们可以使用transform来实现钟表指针的旋转动画。下面是一段使用CSS3制作钟表的代码：.clock { : re...

CSS3是一个很强大的工具，可以实现很多有趣的效果，比如制作钟表。在CSS3中，我们可以使用transform来实现钟表指针的旋转动画。下面是一段使用CSS3制作钟表的代码：

.clock {
  position: relative;
  width: 300px;
  height: 300px;
  border: 10px solid black;
  border-radius: 50%;
}

.hour-hand, .minute-hand, .second-hand {
  position: absolute;
  left: 50%;
  top: 50%;
  background-color: black;
}

.hour-hand {
  width: 8px;
  height: 60px;
  border-radius: 8px 8px 0 0;
  transform-origin: bottom center;
}

.minute-hand {
  width: 6px;
  height: 80px;
  border-radius: 6px 6px 0 0;
  transform-origin: bottom center;
}

.second-hand {
  width: 4px;
  height: 100px;
  border-radius: 4px 4px 0 0;
  transform-origin: bottom center;
}

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

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

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

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

以上代码中，我们首先使用CSS3来设置钟表的基本样式，包括宽度、高度、边框、圆角等。然后，我们使用三个类分别表示钟表的时针、分针和秒针，并设置它们的样式，包括颜色、宽度、高度、边界半径和transform-origin。

此后，我们定义了一个关键帧动画rotate，它根据给定的时间间隔，从0度旋转到360度。最后，我们将时针、分针和秒针分别应用到自己的关键帧动画上，并设置无限循环的动画。

通过这样的代码，我们可以制作出一个完整的钟表效果，并且可以通过调整关键帧动画的时间间隔来改变钟表指针的旋转速度。