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 Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.
Der Effekt, wenn die Maus nicht platziert ist:
Der Rotationseffekt, wenn die Maus platziert ist:
Übergang: alle 2,0 Sekunden; bedeutet, dass alle Attributtransformationen innerhalb von 2 Sekunden abgeschlossen sind;
transformation: rotieren (360 Grad); bedeutet, dass das Bild um 360 Grad gedreht wird.
nbsp;html> <meta> <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> <img alt="CSS3-Implementierung der Beispielfreigabe für den Avatar-Rotationseffekt" >
Verwandte Empfehlungen;
Detaillierte Beispiele für HTML5 und CSS3 zur Erzielung von 3D-Konvertierungseffekten
Detaillierte Erläuterung von CSS- und HTML-Anpassung Definieren Sie den Kontrollkästcheneffekt
Über die Implementierungsmethode von CSS3, bei der mehrere Elemente den Effekt nacheinander anzeigen
Das obige ist der detaillierte Inhalt vonCSS3-Implementierung der Beispielfreigabe für den Avatar-Rotationseffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!