[分享]css动画rotate一圈

CSS动画中的rotate属性可以实现元素在旋转的动画效果，并且可以旋转一定的角度。在动画过程中，可以通过设定动画时间、动画延时、动画方式等参数，来控制动画的效果。.rotate { animatio...

CSS动画中的rotate属性可以实现元素在旋转的动画效果，并且可以旋转一定的角度。在动画过程中，可以通过设定动画时间、动画延时、动画方式等参数，来控制动画的效果。

.rotate {
  animation-name: rotate360;  /* 动画的名称 */
  animation-duration: 3s;   /* 动画的持续时间 */
  animation-timing-function: ease; /* 动画的方式 */
  animation-iteration-count: 1;   /* 动画的次数 */
}

@keyframes rotate360 {
  from {
    transform: rotate(0deg);   /* 动画开始时的角度 */
  }
  to {
    transform: rotate(360deg); /* 动画结束时的角度 */
  }
} 

在上面的示例代码中，我们创建了一个名为rotate360的动画，指定了动画的效果为从0度旋转到360度，动画持续时间为3秒，动画方式为ease，并且只播放一次。

如果我们想让元素无限循环旋转下去，只需要将animation-iteration-count属性的值修改为inifinite：

.rotate {
  animation-name: rotate360;  
  animation-duration: 3s;   
  animation-timing-function: ease; 
  animation-iteration-count: infinite;   /* 无限循环 */
} 

这样，我们就实现了一个旋转一圈的CSS动画，让元素更加生动、形象，让页面更加活泼。