Maison > interface Web > tutoriel CSS > Comment créer une animation de rotation CSS sans fin ?

Comment créer une animation de rotation CSS sans fin ?

DDD
Libérer: 2024-11-06 13:12:02
original
760 Les gens l'ont consulté

How to Create an Endless CSS Rotation Animation?

Implémenter une animation de rotation CSS sans fin

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 :

  1. Ajouter des images clés d'animation CSS :

    • Définissez les images clés rotatives dans la notation @keyframes.
    • Définissez les états de et vers pour la transformation de rotation.
  2. Appliquer l'animation à l'élément cible :

    • Créez une classe tournante dans votre CSS.
    • Appliquez l'animation à l'élément souhaité en utilisant le nom d'animation, la durée d'animation et le nombre d'itérations d'animation.
  3. Inclure les préfixes du fournisseur :

    • Ajoutez les préfixes -webkit-, -moz-, etc. pour la compatibilité entre navigateurs.

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>
Copier après la connexion

Html :

<code class="html"><div 
  class="rotating"
  style="width: 100px; height: 100px; line-height: 100px; text-align: center;" 
 >Rotate</div></code>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal