Heim > Artikel > Web-Frontend > 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:342039Durchsuche

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verwenden Sie CSS3, um einen Fortschrittsbalken zu erstellenNächster Artikel：Verwenden Sie CSS3, um einen Fortschrittsbalken zu erstellen

In Verbindung stehende Artikel

Mehr sehen