Maison > Article > interface Web > Comment créer un effet de rotation à 360 degrés au survol de la souris en CSS3
Méthode : 1. Utilisez "element:hover{animation:name time;}" pour lier le style d'animation lorsque la souris survole ; 2. Utilisez "keyframes name {100%{transform:rotate(360deg);}}" Spécifiez simplement une action de rotation à 360 degrés.
L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.
Étape 1 : Utilisez le sélecteur :hover pour définir le style de l'élément lorsque la souris survole.
: Un style spécial ajouté par survol lorsque la souris passe sur un lien.
Astuce : Le sélecteur :hover peut être utilisé sur tous les éléments, pas seulement sur les liens.
L'attribut animation peut lier un style d'animation à un élément.
Étape 2 : Utilisez les règles d'images clés et transform:rotate pour définir la rotation à 360° de l'élément.
En utilisant les règles @keyframes, vous pouvez créer des animations.
Créez des animations en passant progressivement d'un paramètre de style CSS à un autre.
Vous pouvez modifier les paramètres de style CSS plusieurs fois pendant le processus d'animation.
Spécifiez quand le changement se produit en utilisant %, ou les mots-clés « de » et « à », qui sont identiques à 0 % à 100 %.
L'exemple est le suivant :
<html> <head> <style> div{ width:100px; height:100px; background-color:pink; } div:hover{ animation:fadenum 3s; } @keyframes fadenum{ 100%{transform:rotate(360deg);} } </style> </head> <body> <div>360度</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!