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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
