Heim >Web-Frontend >CSS-Tutorial >Beispielcode für die Implementierung des Avatar-Rotationseffekts mit CSS3
Beispielcode für die Implementierung des Avatar-Rotationseffekts mit CSS3
- 高洛峰Original
- 2017-03-15 09:07:011625Durchsuche
In diesem Artikel wird hauptsächlich der Effekt der Avatar-Rotation mit CSS3 vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor, um einen Blick darauf zu werfen
Der Effekt der Maus ist nicht platziert:
Rotationseffekt nach dem Platzieren der Maus:
Übergang: alle 2,0s bedeutet alle Attribute Die Transformation ist innerhalb von 2 Sekunden abgeschlossen;
transfürm: rotieren(360deg); bedeutet, dass das Bild um 360 Grad gedreht wird.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
border: #000 solid 2px;
display: block;
margin: 50px auto;
border-radius: 50%;
transition: all 2.0s;
}
img:hover{
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="img/03.jpg" / alt="Beispielcode für die Implementierung des Avatar-Rotationseffekts mit CSS3" >
</body>
</html>
Das obige ist der detaillierte Inhalt vonBeispielcode für die Implementierung des Avatar-Rotationseffekts mit CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!