Guide d'animation CSS : vous apprenez étape par étape à créer un effet de roulement continu-tutoriel CSS-php.cn

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

PHPz

Libérer： 2023-10-21 08:41:08

original

1478 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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!