css3图标一直旋转样式

CSS3图标一直旋转是一种很炫酷的样式效果。它常用于网页中的loading图标或动态图标设计。在CSS3中，我们可以很轻松地实现这种效果，下面就让我们一起来看看如何实现吧。

.icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 5px solid #fff;
  border-top-color: #16a085;
  animation: spin 2s linear infinite;
}

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

以上是实现CSS3图标一直旋转的样式代码。其中，我们首先定义了一个类名为“icon”的元素，对其进行了基本的样式设置，如宽高和边框等。

接着，我们使用CSS3的关键帧动画（keyframes）来定义图标旋转的规则。通过设置初始位置“from”和最终位置“to”的角度，我们将图标绕Y轴旋转。这里设置的旋转时间为2秒，并使用“linear”函数来控制速度。

最后，在样式表中将图标元素与动画关联起来，使用“infinite”属性来连续旋转。

经过以上设置，我们就可以在网页或应用程序中使用这种效果来增加用户体验和视觉效果，让页面更加吸引人。