[分享]css3怎么让一个圆转圈

CSS3 有很多酷炫的特性，其中之一就是可以让一个圆转圈。下面我们将演示如何使用 CSS3 实现这个效果。

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

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

首先我们定义了一个圆的样式，使用 border-radius: 50% 设置圆角，背景色为红色。使用 position: relative 可以让后面的动画定位生效，animation: rotate 2s linear infinite; 代表动画是旋转效果，持续2s，线性的变化，无限次循环播放。

然后我们定义了一个 @keyframes，从 0 度开始旋转到 360 度，这样就会营造出一个圆圆旋转的效果。

<div class="circle"></div> 

最后，在 HTML 中添加一个 class 为 circle 的 div 就可以实现圆圆转圈的效果了。