css3实现无限旋转360度

最新推荐文章于 2026-05-19 07:34:22 发布

原创最新推荐文章于 2026-05-19 07:34:22 发布 · 1.4w 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

CSS3 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用CSS实现的无限360度旋转的Loading动画效果。通过定义关键帧动画并应用到图标上，实现了平滑且连续的旋转动画。适用于网页加载提示等场景。

工作中遇到需要无限旋转360度的loading圈，亲测下面css样式可用。

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

.icon {
  -webkit-animation: animal 1s infinite linear ;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
}