Maison > Article > interface Web > Comment créer un effet de rotation à 360 degrés au survol de la souris en CSS3
Comment créer un effet de rotation à 360 degrés au survol de la souris en CSS3
- WBOYoriginal
- 2022-03-30 11:48:313039parcourir
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.
Comment créer un effet de rotation à 360 degrés au survol de la souris avec CSS3
É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!