loadding图片360度旋转

最新推荐文章于 2023-04-06 16:07:05 发布

原创最新推荐文章于 2023-04-06 16:07:05 发布 · 241 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文介绍了一种使用CSS实现的旋转加载图标效果。通过关键帧动画定义了从0到360度的旋转过程，并应用到了一个名为.loading-icon的类上，确保了在多种浏览器下的一致性表现。

.loading-icon {
  @keyframes rotation {
    from {
      -webkit-transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
    }
  }
  transform: rotate(360deg);
  animation: rotation 3s linear infinite;
  -moz-animation: rotation 3s linear infinite;
  -webkit-animation: rotation 3s linear infinite;
  -o-animation: rotation 3s linear infinite;
  vertical-align: middle;
}