CSS-Code-Sharing für Spezialeffekte der Maus-oben-Icon-Rotation-CSS-Tutorial-php.cn

CSS-Code-Sharing für Spezialeffekte der Maus-oben-Icon-Rotation

零下一度

Freigeben： 2017-06-19 10:25:40

Original

1520 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich CSS vorgestellt, um den Mouse-Up-Icon-Rotationseffekt zu realisieren. Freunde, die es benötigen, können darauf verweisen

Der Mouse-Up-Icon-Rotationseffekt wird häufig in Unternehmensprojekten verwendet, insbesondere in der oberen Navigation . Spalte, zum Beispiel:

Der nächste Schritt besteht darin, CSS zu verwenden, 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>

Nach dem Login kopieren

Hier wird ein Kästchen platziert, und ein Bild wird in das Kästchen gelegt, um es klarer zu sehen ist hier platziert. 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 . Stellen Sie dann die .box so ein, dass das Bild um 180 Grad gedreht wird, wenn die Maus nach oben bewegt wird:hover:

transform: rotate(180deg);

Nach dem Login kopieren

Die Einstellungen wie -webkit- unten dienen hauptsächlich der Kompatibilität Browser jedes Herstellers.

Das Ergebnis ist wie folgt:

Das obige ist der detaillierte Inhalt vonCSS-Code-Sharing für Spezialeffekte der Maus-oben-Icon-Rotation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!