css+360度旋转不停

今天和大家分享一下CSS的一个小技巧，就是利用CSS对元素进行 360 度的不停旋转！首先，让我们来看一下下面这段 CSS 代码：

.rotate {
  animation: rotate 3s linear infinite;
}

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

这段代码里，我们定义了一个名为 “rotate” 的样式类，并在 keyframes 中定义了从零度到 360 度的旋转。接着，在 .rotate 类中使用 animation 属性进行设置，指定动画名称、持续时间、模式（这里是线性模式）和循环次数（指定为“无限”）。这样，指定了这些样式之后，就可以得到一个可以持续旋转的元素了。

如果我们想要让元素旋转更为流畅，可以把线性模式改为 ease（平滑模式），这样就可以得到更为自然的旋转效果。另外，我们还可以在 .rotate 类中添加一个 transition 属性，以达到更好的过渡效果，可以尝试设置它的持续时间、模式和延迟时间等属性。

.rotate {
  animation: rotate 3s linear infinite;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

最后，总结一下：使用 CSS 可以轻松地实现元素的 360 度不停旋转，只需几个简单的样式设置就可以搞定。如有需要，还可以添加 transition 属性等其他样式，以获得更为自然流畅的旋转效果。让我们一起来动手试试吧！