Le code est "Element:hover{animation:name time}@keyframes name{100%{transform:rotate(rotation angle);}}" ; le sélecteur de survol définit le style de passage de la souris, l'animation et les @keyframes. définir l'animation de l'élément.
L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.
: Le survol est un style spécial ajouté lorsque la souris se déplace sur un lien.
: le sélecteur de survol peut être utilisé sur tous les éléments, pas seulement sur les liens.
Vous pouvez utiliser l'attribut animation pour lier une animation à un élément. L'attribut animation peut contrôler la durée et le nombre d'animations. La syntaxe est :
animation: name duration timing-function delay iteration-count direction;
Lorsque la valeur de l'attribut est définie sur "infini", il stipule que l'animation peut être jouée à l'infini. Lorsque vous liez une animation de rotation à un élément, celle-ci peut continuer à tourner.
Ensuite, définissez l'action de rotation de l'animation via les règles @keyframes.
L'exemple est le suivant :
<html>
<head>
<style>
div{
width:100px;
height:100px;
background-color:pink;
}
div:hover{animation:fadenum 5s;}
@keyframes fadenum{
100%{transform:rotate(360deg);}
}
</style>
</head>
<body>
<div></div>
</body>
</html>Résultat de sortie :
(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)
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)
