[分享]css做一个旋转的圆

CSS在网页设计中有非常重要的作用，它可以让我们实现各种炫酷的效果。今天，我们来学习如何使用CSS制作一个旋转的圆。.circle { width: 100px; height: 100px; bac...

CSS在网页设计中有非常重要的作用，它可以让我们实现各种炫酷的效果。今天，我们来学习如何使用CSS制作一个旋转的圆。

.circle {
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
  animation: rotate infinite 2s linear;
}

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

首先，在HTML中创建一个div，设置宽高为100px，背景颜色为红色，使用border-radius属性设置圆形。这个div就是我们要制作的圆。

我们使用CSS3中的animation属性来实现旋转的效果。animation有几个可选的参数，其中我们需要用到的是animation-name和animation-duration。animation-name用于指定动画名称，也就是我们下面要定义的@keyframes。animation-duration用于指定动画时长。

@keyframes用于定义动画关键帧，我们在0%和100%的关键帧上分别设置rotate(0)和rotate(360deg)，表示从0度旋转到360度。使用transform:rotate()实现旋转效果。

最后，我们将.animation应用到我们的div上，使用infinite可以让动画不断进行循环。

到这里，我们已经完成了一个简单的旋转圆的效果。如果想要实现更多的旋转效果，可以使用animation-timing-function属性来定义动画的缓动效果。