Maison > Article > interface Web > Guide d'animation CSS : vous apprenez étape par étape à créer un effet de roulement continu

Guide d'animation CSS : vous apprenez étape par étape à créer un effet de roulement continu

PHPzoriginal: 2023-10-21 08:41:081405parcourir

Guide danimation CSS : vous apprenez étape par étape à créer un effet de roulement continu

Guide d'animation CSS : vous apprenez étape par étape comment créer des effets spéciaux de défilement continu

Dans la conception et le développement Web, les effets d'animation sont l'un des facteurs importants pour améliorer l'expérience utilisateur. L'animation CSS est l'une des méthodes courantes pour obtenir divers effets dynamiques. Cet article vous apprendra étape par étape comment créer une animation CSS avec des effets de roulement continus et présentera en détail le processus de mise en œuvre de chaque étape à travers des exemples de code spécifiques.

Tout d’abord, nous avons besoin d’un fichier HTML et des feuilles de style CSS associées.

La structure du fichier HTML est la suivante :

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="box" id="box"></div>
</body>
</html>

Ensuite, nous devons définir les styles pertinents dans la feuille de style CSS.

La feuille de style CSS est la suivante :

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

Ensuite, nous utilisons la règle @keyframes pour définir l'effet d'animation. Les règles @keyframes sont utilisées pour créer des animations. En définissant différents styles pour un certain pourcentage d'images clés, le navigateur anime les modifications apportées à ces styles.

Ajoutez la règle @keyframes à la feuille de style CSS :

@keyframes roll {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}

Ensuite, nous appliquons une animation à l'élément .box. Ceci peut être réalisé en utilisant l'attribut d'animation.

Modifiez le style .box dans la feuille de style CSS :

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: roll 2s linear infinite;
}

Enfin, nous devons utiliser JavaScript pour contrôler le démarrage et la pause de l'animation.

Ajoutez le code JavaScript suivant en tête du fichier HTML :

<script>
  var box = document.getElementById("box");
  box.addEventListener("click", function() {
    if (box.style.animationPlayState === "paused") {
      box.style.animationPlayState = "running";
    } else {
      box.style.animationPlayState = "paused";
    }
  });
</script>

Jusqu'à présent, nous avons terminé l'animation CSS de l'effet de roulement continu. Les utilisateurs peuvent cliquer sur l'élément .box pour contrôler la pause et le début de l'animation.

Résumé :
Grâce à l'introduction et aux exemples de code spécifiques de cet article, nous avons appris à utiliser l'animation CSS pour créer des effets de roulement continus. Avec seulement quelques lignes de code CSS et quelques contrôles JavaScript, vous pouvez obtenir un effet dynamique attrayant. J'espère que cet article vous a été utile et je vous souhaite du succès dans la mise en œuvre des effets d'animation !

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!

JavaScript css html 样式表 animation

Déclaration：

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

Article précédent：Conseils et méthodes pour utiliser CSS pour obtenir des effets de gigue lorsque la souris survoleArticle suivant：Conseils et méthodes pour utiliser CSS pour obtenir des effets de gigue lorsque la souris survole

Articles Liés

Voir plus