blocks|key|645177|text|工作得很好：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|645178|​|645179|#test+{
++++width:+11px;
++++height:+14px;
++++background:+url('data:image/gif;base64,R0lGOD+lhCwAOAMQfAP////7%2B/vj4%2BHh4eHd3d/v7%2B/Dw8HV1dfLy8ubm5vX19e3t7fr+6%2Bnl5edra2nZ2dnx8fMHBwYODg/b29np6eujo6JGRkeHh4eTk5LCwsN3d3dfX+13Jycp2dnevr6////yH5BAEAAB8ALAAAAAALAA4AAAVq4NFw1DNAX/o9imAsB+tKpxKRd1%2BYEWUoIiUoiEWEAApIDMLGoRCyWiKThenkwDgeGMiggDLEXQkDoTh+CKNLpQDgjeAsY7MHgECgx8YR8oHwNHfwADBACGh4EDA4iGAYAEBAcQIg0Dk+gcEIQA7');
}

@-webkit-keyframes+rotating+{
++++from{
++++++++-webkit-transform:+rotate(0deg);
++++}
++++to{
++++++++-webkit-transform:+rotate(360deg);
++++}
}

.rotating+{
++++-webkit-animation:+rotating+2s+linear+infinite;
}|code-block|syntax|javascript|645180|<div+id='test'+class='rotating'></div>|645181|645182|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Working nice:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#test {
    width: 11px;
    height: 14px;
    background: url('data:image/gif;base64,R0lGOD lhCwAOAMQfAP////7+/vj4+Hh4eHd3d/v7+/Dw8HV1dfLy8ubm5vX19e3t7fr 6+nl5edra2nZ2dnx8fMHBwYODg/b29np6eujo6JGRkeHh4eTk5LCwsN3d3dfX 13Jycp2dnevr6////yH5BAEAAB8ALAAAAAALAA4AAAVq4NFw1DNAX/o9imAsB tKpxKRd1+YEWUoIiUoiEWEAApIDMLGoRCyWiKThenkwDgeGMiggDLEXQkDoTh CKNLpQDgjeAsY7MHgECgx8YR8oHwNHfwADBACGh4EDA4iGAYAEBAcQIg0Dk gcEIQA7');
}

@-webkit-keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}

.rotating {
    -webkit-animation: rotating 2s linear infinite;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='test' class='rotating'&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|645194|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|645195|@-webkit-keyframes+rotating+/*+Safari+and+Chrome+*/+{
++from+{
++++-webkit-transform:+rotate(0deg);
++++-o-transform:+rotate(0deg);
++++transform:+rotate(0deg);
++}
++to+{
++++-webkit-transform:+rotate(360deg);
++++-o-transform:+rotate(360deg);
++++transform:+rotate(360deg);
++}
}
@keyframes+rotating+{
++from+{
++++-ms-transform:+rotate(0deg);
++++-moz-transform:+rotate(0deg);
++++-webkit-transform:+rotate(0deg);
++++-o-transform:+rotate(0deg);
++++transform:+rotate(0deg);
++}
++to+{
++++-ms-transform:+rotate(360deg);
++++-moz-transform:+rotate(360deg);
++++-webkit-transform:+rotate(360deg);
++++-o-transform:+rotate(360deg);
++++transform:+rotate(360deg);
++}
}
.rotating+{
++-webkit-animation:+rotating+2s+linear+infinite;
++-moz-animation:+rotating+2s+linear+infinite;
++-ms-animation:+rotating+2s+linear+infinite;
++-o-animation:+rotating+2s+linear+infinite;
++animation:+rotating+2s+linear+infinite;
}|code-block|syntax|javascript|645196|<div+
++class="rotating"
++style="width:+100px;+height:+100px;+line-height:+100px;+text-align:+center;"+
+>Rotate</div>|645197|645198|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div 
  class="rotating"
  style="width: 100px; height: 100px; line-height: 100px; text-align: center;" 
 &gt;Rotate&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|862451|text|CSS中的无限旋转动画|type|unstyled|depth|inlineStyleRanges|entityRanges|data|862452|​|862453|/*+ENDLESS+ROTATE+*/
.rotate{
++animation:+rotate+1.5s+linear+infinite;+
}
@keyframes+rotate{
++to{+transform:+rotate(360deg);+}
}


/*+SPINNER+JUST+FOR+DEMO+*/
.spinner{
++display:inline-block;+width:+50px;+height:+50px;
++border-radius:+50%25;
++box-shadow:+inset+-2px+0+0+2px+#0bf;
}|code-block|syntax|javascript|862454|<span+class="spinner+rotate"></span>|862455|862456|MDN+-+Web+CSS+Animation|offset|length|862457|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/animation^0|0|0|0|0|0|0|N|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|12|8|@]|9|@$N|13|O|14|1|15]]|A|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W]]]]

<h1>Infinite rotation animation in CSS</h1>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* ENDLESS ROTATE */
.rotate{
  animation: rotate 1.5s linear infinite; 
}
@keyframes rotate{
  to{ transform: rotate(360deg); }
}


/* SPINNER JUST FOR DEMO */
.spinner{
  display:inline-block; width: 50px; height: 50px;
  border-radius: 50%;
  box-shadow: inset -2px 0 0 2px #0bf;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="spinner rotate"&gt;&lt;/span&gt;</code></pre>
</div>
</div>
</p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation" rel="noreferrer">MDN - Web CSS Animation</a></p>


blocks|key|645261|text|<style>
div
{++
+++++height:200px;
+++++width:200px;
+++++-webkit-animation:+spin+2s+infinite+linear;++++
}
@-webkit-keyframes+spin+{
++++0%25++{-webkit-transform:+rotate(0deg);}
++++100%25+{-webkit-transform:+rotate(360deg);}+++
}

</style>
</head>

<body>
<div><img+src="1.png"+height="200px"+width="200px"/></div>
</body>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|645262|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;style&gt;
div
{  
     height:200px;
     width:200px;
     -webkit-animation: spin 2s infinite linear;    
}
@-webkit-keyframes spin {
    0%  {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}   
}

&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div&gt;&lt;img src="1.png" height="200px" width="200px"/&gt;&lt;/div&gt;
&lt;/body&gt;
</code></pre>


blocks|key|862483|text|不带任何前缀，例如at+it's+simplest：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|862484|.loading-spinner+{
++animation:+rotate+1.5s+linear+infinite;
}

@keyframes+rotate+{
++to+{
++++transform:+rotate(360deg);
++}
}|code-block|syntax|javascript|862485|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Without any prefixes, e.g. at it's simplest:</p>

<pre><code>.loading-spinner {
  animation: rotate 1.5s linear infinite;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
</code></pre>


blocks|key|645294|text|适用于所有现代浏览器|type|unstyled|depth|inlineStyleRanges|entityRanges|data|645295|.rotate{
+animation:+loading+3s+linear+infinite;
+@keyframes+loading+{
++0%25+{+
++++transform:+rotate(0);+
++}
++100%25+{+
++++transform:+rotate(360deg);
++}
+}
}|code-block|syntax|javascript|645296|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Works in all modern browsers</p>

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


blocks|key|862527|text|添加类.active时的循环|type|unstyled|depth|inlineStyleRanges|entityRanges|data|862528|++.myClassName.active+{
++++++++++++++++-webkit-animation:+spin+4s+linear+infinite;
++++++++++++++++-moz-animation:+spin+4s+linear+infinite;
++++++++++++++++animation:+spin+4s+linear+infinite;
++++++++++++++}



@-moz-keyframes+spin+{
+++++++100%25+{
++++++++-moz-transform:+rotate(360deg);
++++++}
+++++}
+++++@-webkit-keyframes+spin+{
++++++100%25+{
+++++++++-webkit-transform:+rotate(360deg);
+++++++}
+++++}
+++++@keyframes+spin+{
+++++++100%25+{
+++++++++-webkit-transform:+rotate(360deg);
+++++++++transform:+rotate(360deg);
+++++++}
+++++}|code-block|syntax|javascript|862529|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Rotation on add class .active</p>

<pre><code>  .myClassName.active {
                -webkit-animation: spin 4s linear infinite;
                -moz-animation: spin 4s linear infinite;
                animation: spin 4s linear infinite;
              }



@-moz-keyframes spin {
       100% {
        -moz-transform: rotate(360deg);
      }
     }
     @-webkit-keyframes spin {
      100% {
         -webkit-transform: rotate(360deg);
       }
     }
     @keyframes spin {
       100% {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
       }
     }
</code></pre>


blocks|key|862535|text|@keyframes+rotate+{
++++100%25+{
++++++++transform:+rotate(1turn);
++++}
}

div{
+++animation:+rotate+4s+linear+infinite;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|862536|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

div{
   animation: rotate 4s linear infinite;
}
</code></pre>


blocks|key|645359|text|最简单的方法是通过添加"fa-spin“类来使用字体图标。例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|645360|<i+class="fas+fa-spinner+fa-3x+fa-spin"></i>|code-block|syntax|javascript|645361|您可以节省一些代码行，但当然，您只能使用font+awesome中的图标。我总是用它来加载微调器|645362|这里有来自font+awesome：https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use的文档|offset|length|645363|entityMap|0|LINK|mutability|MUTABLE|url|https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use^0|0|0|0|I|27|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>the easiest way to do it is using font awesome icons by adding the &quot;fa-spin&quot; class. for example:</p>
<pre><code>&lt;i class=&quot;fas fa-spinner fa-3x fa-spin&quot;&gt;&lt;/i&gt;
</code></pre>
<p>you can save some lines of code but of course you are limited to the icons from font awesome. I always use it for loading spinners</p>
<p>here you have the documentation from font awesome:
<a href="https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use" rel="nofollow noreferrer">https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use</a></p>


<p>I want to make a rotation of my loading icon by CSS.</p>

<p>I have an icon and the following code:</p>

<pre><code>&lt;style&gt;
#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;
}
&lt;/style&gt;

&lt;div id='test' class='rotating'&gt;&lt;/div&gt;
</code></pre>

<p>But it doesn't work. How can the icon be rotated using CSS?</p>


CSS endless rotation animation

我想让我的加载图标的CSS旋转。我有一个图标和以下代码：<style>#test {    width: 32px;    height: 32px;    background: url('refresh.png');}.rotating {    -webkit-transform: rotate(360deg);...

问CSS无限旋转动画
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS无限旋转动画EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS无限旋转动画
EN