CSS fait pivoter l'icône lorsque la souris monte-tutoriel CSS-php.cn

CSS fait pivoter l'icône lorsque la souris monte

php中世界最好的语言

Libérer： 2018-03-21 17:18:34

original

2062 Les gens l'ont consulté

Cette fois, je vais vous apporter du CSS pour faire pivoter l'icône lorsque la souris est déplacée vers le haut. Quelles sont les précautions pour réaliser la rotation de l'icône lorsque la souris est déplacée vers le haut. cas, jetons un coup d'oeil.

L'effet de rotation de l'icône avec la souris vers le haut est souvent utilisé dans les projets d'entreprise, en particulier dans la barre de navigation supérieure, tels que :

Suivant Utilisez simplement 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, de sorte que on peut le voir Pour plus de clarté, voici une image plus grande. 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. L'attribut spécifie ici la méthode d'animation et la durée. Ensuite, réglez la .box pour qu'elle pivote de 180 degrés lorsque la souris monte : survolez :

transform: rotate(180deg);

Copier après la connexion

ci-dessous Par exemple, les paramètres de -webkit- sont principalement configurés pour être compatibles avec les navigateurs de différents fabricants.

L'effet obtenu est présenté dans la figure ci-dessous :

Je crois que vous maîtrisez la méthode après avoir lu le cas dans ce article. Veuillez venir pour des informations plus intéressantes. Faites attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des techniques spéciales d'utilisation de la marge CSS

Optimiser le style des boutons radio et des cases à cocher

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!