Problème :
Aspirer à faire pivoter une icône de chargement en continu à l'aide de CSS, le code fourni ne parvient pas à produire l’animation souhaitée. Comment réaliser efficacement cette rotation en utilisant CSS ?
Solution :
Pour obtenir une rotation sans fin à l'aide de CSS, suivez les étapes suivantes :
Ajouter des images clés d'animation CSS :
Appliquer l'animation à l'élément cible :
Inclure les préfixes du fournisseur :
Exemple de code :
<code class="css">@-webkit-keyframes rotating { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .rotating { -webkit-animation: rotating 2s linear infinite; animation: rotating 2s linear infinite; }</code>
Html :
<code class="html"><div class="rotating" style="width: 100px; height: 100px; line-height: 100px; text-align: center;" >Rotate</div></code>
Ce code révisé assure une rotation continue de l'élément avec des itérations infinies, résolvant le problème rencontré avec la tentative précédente.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!