刷新按钮旋转样式，兼容各浏览器

最新推荐文章于 2023-04-20 16:33:22 发布

原创最新推荐文章于 2023-04-20 16:33:22 发布 · 612 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文详细介绍了使用CSS实现元素的360度旋转动画效果，包括关键帧动画的定义及跨浏览器兼容性的处理方法。

.refresh-animation {
  animation: rotate 4s infinite;
  -webkit-animation: rotate 1s infinite; /*Safari and Chrome*/
}

@keyframes rotate {
  0%{
    transform:rotate(0deg);
    -webkit-transform: rotate(0deg);
    -ms-transform:rotate(0deg);     /* IE 9 */
    -moz-transform:rotate(0deg);    /* Firefox */
    -o-transform:rotate(0deg);
  }
  100% {
    transform:rotate(360deg);
    -webkit-transform: rotate(360deg);
    -ms-transform:rotate(360deg);   /* IE 9 */
    -moz-transform:rotate(360deg);  /* Firefox */
    -o-transform:rotate(360deg);
  }
}

@-webkit-keyframes rotate {
  0%{
    -webkit-transform: rotate(0deg);
  }
  100%{
    -webkit-transform: rotate(360deg);
  }
}
@-ms-keyframes rotate {
  0%{
    -ms-transform:rotate(0deg);
  }
  100%{
    -ms-transform:rotate(360deg);
  }
}
@-moz-keyframes rotate {
  0%{
    -moz-transform:rotate(0deg);
  }
  100%{
    -moz-transform:rotate(360deg);
  }
}
@-o-keyframes rotate {
  0%{
    -o-transform:rotate(0deg);
  }
  100%{
    -o-transform:rotate(360deg);
  }
}