小开

工作顺利:

#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;
}

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

小开

@-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;
}

<div
class="rotating"
style="width: 100px; height: 100px; line-height: 100px; text-align: center;"
>Rotate</div>

小开

CSS 中的无限旋转动画

/* 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;
}

<span class="spinner rotate"></span>

MDN - Web CSS Animation

小开

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


</style>
</head>


<body>
<div><img src="1.png" height="200px" width="200px"/></div>
</body>

小开

没有任何前缀，例如:

.loading-spinner {
animation: rotate 1.5s linear infinite;
}


@keyframes rotate {
to {
transform: rotate(360deg);
}
}

小开

最佳答案

适用于所有现代浏览器

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

小开

在添加类上旋转

  .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);
}
}

小开

@keyframes rotate {
100% {
transform: rotate(1turn);
}
}


div{
animation: rotate 4s linear infinite;
}

小开

最简单的方法是通过添加“ fa-spin”类来使用字体图标。例如:

<i class="fas fa-spinner fa-3x fa-spin"></i>

你可以节省一些代码行，但当然你只限于从字体的图标真棒。我总是用它装载纺纱机

在这里你可以看到来自字体真棒的文档: Https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use

小开

试试这个，效果很好

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


#loading {
width: 16px;
height: 16px;
-webkit-animation: loading 2s linear infinite;
-moz-animation: loading 2s linear infinite;
}

<div class="loading-test">
<svg id="loading" aria-hidden="true" focusable="false" role="presentation" class="icon icon-spinner" viewBox="0 0 20 20"><path d="M7.229 1.173a9.25 9.25 0 1 0 11.655 11.412 1.25 1.25 0 1 0-2.4-.698 6.75 6.75 0 1 1-8.506-8.329 1.25 1.25 0 1 0-.75-2.385z" fill="#919EAB"/></svg>
</div>

无穷无尽的旋转动画

CSS 中的无限旋转动画