Maison > Article > interface Web > CSS fait pivoter l'icône lorsque la souris monte
CSS fait pivoter l'icône lorsque la souris monte
- php中世界最好的语言original
- 2018-03-21 17:18:342049parcourir
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>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);
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!