Heim >Web-Frontend >CSS-Tutorial >CSS sorgt dafür, dass sich das Symbol dreht, wenn die Maus nach oben bewegt wird
CSS sorgt dafür, dass sich das Symbol dreht, wenn die Maus nach oben bewegt wird
- php中世界最好的语言Original
- 2018-03-21 17:18:342102Durchsuche
Dieses Mal bringe ich Ihnen CSS mit, um das Symbol zu drehen, wenn die Maus nach oben bewegt wird. Was sind die Vorsichtsmaßnahmen, um die Drehung des Symbols zu realisieren, wenn die Maus nach oben bewegt wird? Fall, werfen wir einen Blick darauf.
Der Rotationseffekt des Mouse-Up-Symbols wird häufig in Unternehmensprojekten verwendet, insbesondere in der oberen Navigationsleiste, z. B.:
Nächste Einfach verwenden CSS, um den Symbolrotationseffekt zu erzielen, wenn die Maus nach oben bewegt wird.
<!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>Eine Box wird hier platziert, und ein Bild wird in die Box gelegt, so dass Es ist zu sehen. Für mehr Klarheit hier ein größeres Bild. Der nun zu erreichende Effekt besteht darin, dass sich das Symbol img um 180 Grad dreht, wenn die Maus über das .box-Feld bewegt wird. Im
Stil ist der Schlüssel die Einstellung von img und .box:hover img. Zuerst müssen wir das Übergangsattribut für img festlegen. Das Attribut hier gibt die Animationsmethode und -dauer an. Stellen Sie dann die .Box so ein, dass sie sich um 180 Grad dreht, wenn sich die Maus nach oben bewegt: Bewegen Sie den Mauszeiger:
transform: rotate(180deg);
unten. Zum Beispiel die Einstellungen von -webkit- sind hauptsächlich darauf ausgelegt, mit Browsern verschiedener Hersteller kompatibel zu sein.
Der erzielte Effekt ist in der folgenden Abbildung dargestellt:
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall hier gelesen haben Artikel, bitte kommen Sie für weitere spannende Informationen. Achten Sie auf andere verwandte Artikel auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Detaillierte Erläuterung spezieller Techniken zur Verwendung von CSS-Rändern
Optimieren Sie den Stil von Optionsfeldern und Kontrollkästchen
Das obige ist der detaillierte Inhalt vonCSS sorgt dafür, dass sich das Symbol dreht, wenn die Maus nach oben bewegt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!