Maison > Article > interface Web > Comment utiliser CSS pour obtenir l'effet de rotation de l'icône lorsque la souris monte

Comment utiliser CSS pour obtenir l'effet de rotation de l'icône lorsque la souris monte

不言original: 2018-06-20 16:00:302453parcourir

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>

Une boîte est placée ici, et une image est placée dans la boîte Afin de la voir plus clairement, une image plus grande est placée ici. . 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 le .box pour qu'il pivote de 180 degrés lorsque la souris monte : survolez :

transform: rotate(180deg);

paramètres tels que -webkit- ci-dessous Il est principalement configuré pour être compatible avec les navigateurs de différents fabricants.

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

Ce qui précède est l'intégralité du contenu de cet article, je l'espère. sera utile à l'étude de chacun, veuillez faire attention au site Web chinois PHP pour plus de contenu connexe !

Recommandations associées :

Utilisez CSS3 et jQuery pour réaliser des secousses de haut en bas en suivant le mouvement de la souris

Utilisez CSS3 et jQuery pour réaliser du texte Suivez le mouvement de haut en bas de la souris

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!

php jquery css css3 webkit transition

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

Article précédent：Comment résoudre le problème de l'ajustement invalide de l'attribut z-index de la couche divArticle suivant：Comment résoudre le problème de l'ajustement invalide de l'attribut z-index de la couche div

Articles Liés

Voir plus