Comment créer un effet de rotation à 360 degrés au survol de la souris en CSS3-Questions et réponses frontales-php.cn

Table des matières

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

Maison

interface Web

Questions et réponses frontales

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

Mar 30, 2022 am 11:48 AM

css

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>

Copier après la connexion

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 de ce site Web

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