Explication détaillée du code graphique sur la façon d'utiliser CSS pour obtenir l'effet de rotation de l'icône avec la souris-tutoriel CSS-php.cn

Explication détaillée du code graphique sur la façon d'utiliser CSS pour obtenir l'effet de rotation de l'icône avec la souris

黄舟

Libérer： 2017-06-18 13:16:58

original

1674 Les gens l'ont consulté

Cet article présente principalement CSS pour réaliser l'effet de rotation de l'icône avec la souris. Les amis qui en ont besoin peuvent s'y référer

L'effet de rotation de l'icône avec la souris est souvent utilisé dans les projets d'entreprise, en particulier dans la navigation supérieure. . colonne, par exemple :

L'étape suivante consiste à utiliser CSS pour obtenir l'effet de rotation de l'icône lorsque la souris monte.

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title></title>  
    <style>  
        p,img,body{  
            margin: 0;  
            padding: 0;  
        }  
        .box{  
            height: 150px;  
            width:300px;  
            background: #1b7b80;  
            margin: 0 auto;  
            padding: 20px;  
        }  
        .box:hover img{  
            transform: rotate(180deg);  
            -webkit-transform: rotate(180deg);  
            -moz-transform: rotate(180deg);  
            -o-transform: rotate(180deg);  
            -ms-transform: rotate(180deg);  
        }  
        img{  
            margin: 0 auto;  
            display: block;  
            transition: all 0.2s ease-in-out;  
            -webkit-transition: all 0.2s ease-in-out;  
            -moz-transition: all 0.2s ease-in-out;  
            -o-transition: all 0.2s ease-in-out;  
        }  
    </style>  
</head>  
<body>  
    <p class="box">  
        <img src="img/down.png" alt=""/>  
    </p>  
</body>  
</html>

Copier après la connexion

Une boîte est placée ici, et une image est placée dans la boîte Afin de la voir plus clairement, une plus grande. est placé ici l'image. L'effet à obtenir maintenant est que lorsque la souris se déplace sur la zone .box, l'icône img pivotera de 180 degrés. Dans le style

, la clé est le réglage de img et .box:hover img. Tout d'abord, nous devons définir l'attribut de transition pour img. Les attributs spécifient ici la méthode d'animation et la durée. . Ensuite, configurez le .box pour faire pivoter l'image de 180 degrés lorsque la souris bouge vers le haut :hover :