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

WBOY
WBOYoriginal
2022-03-30 11:48:313030parcourir

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.

Comment créer un effet de rotation à 360 degrés au survol de la souris en CSS3

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 :

Comment créer un effet de rotation à 360 degrés au survol de la souris en CSS3

(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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn