CSS 无限旋转动画

小编典典

CSS 无限旋转动画

all

我想通过 CSS 旋转我的加载图标。

我有一个图标和以下代码：

<style>
#test {
    width: 32px;
    height: 32px;
    background: url('refresh.png');
}

.rotating {
    -webkit-transform: rotate(360deg);
    -webkit-transition-duration: 1s;
    -webkit-transition-delay: now;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}
</style>

<div id='test' class='rotating'></div>

但它不起作用。如何使用 CSS 旋转图标？

阅读 108

2022-08-02

共1个答案

小编典典

适用于所有现代浏览器

.rotate{
 animation: loading 3s linear infinite;
 @keyframes loading {
  0% { 
    transform: rotate(0); 
  }
  100% { 
    transform: rotate(360deg);
  }
 }
}

2022-08-02