[分享]css3怎么画时钟

CSS3是一个非常强大的前端技术，可以实现各种各样的效果。其中，使用CSS3可以轻松地绘制时钟。

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

.clock::before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: 10px;
  left: 95px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 80px solid #ccc;
  transform-origin: bottom center;
  animation: hour 43200s linear infinite;
}

.clock::after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: 20px;
  left: 95px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 70px solid #333;
  transform-origin: bottom center;
  animation: minute 3600s linear infinite;
}

@keyframes hour {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes minute {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

上面的代码可以绘制一个简单的时钟，其中使用了“::before”和“::after”伪元素来绘制时针和分针。通过CSS3动画的方式，让时针和分针随着时间旋转，实现了一个真实的时钟效果。

需要注意的是，在CSS3中，使用旋转、缩放等变换效果时，一定要使用“transform-origin”属性来指定变换的中心点，否则会出现奇怪的效果。

总之，通过CSS3绘制时钟非常简单，只需要几行代码就可以实现。如果您想要绘制更加高级的时钟效果，可以使用CSS3的更多特性，如过渡效果、渐变效果等。