Utiliser CSS3 pour implémenter l'animation de l'effet de rotation de l'avatar

Cette fois, je vais vous apporter les précautions concernant l'utilisation de CSS3 pour implémenter l'animation de l'effet de rotation d'avatar. Voici les cas réels, jetons un coup d'œil.

Effet lorsque la souris n'est pas placée :

Tourner après la souris est placée Effet :

transition : tous les 2.0 ; signifie que toutes les transformations d'attribut sont terminées en 2 secondes ; 🎜>

transform: rotate(360deg); signifie que l'image est pivotée de 360 ​​degrés.

nbsp;html>

    
        <meta>
        <title></title>
        <style>
            img{
                border: #000 solid 2px;
                display: block;
                margin: 50px auto;
                border-radius: 50%;
                transition: all 2.0s;
            }
            img:hover{
                transform: rotate(360deg);
            }
        </style>
    
    
        <img  src="/static/imghwm/default1.png" data-src="img/03.jpg" class="lazy" alt="Utiliser CSS3 pour implémenter l'animation de l'effet de rotation de l'avatar" >
    

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Liste de prix pour l'implémentation de Bootstrap

Css pour créer une animation d'ondulation

Comment CSS gère-t-il le style par défaut du navigateur

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!