Wie erstelle ich mit CSS ein schwebend animiertes, sich drehendes oder rotierendes Bild?

So erstellen Sie ein schwebend animiertes, sich drehendes oder rotierendes Bild mit CSS

Das Drehen oder Drehen von Bildern beim Schweben ist ein häufiger und optisch ansprechender Effekt Das steigert die Benutzereinbindung. Um diesen Effekt mit CSS zu erzielen, befolgen Sie diese Schritte:

Stellen Sie zunächst sicher, dass das Bild einen kreisförmigen Rand hat. Dies kann erreicht werden, indem der Randradius auf 50 % gesetzt wird, wie im folgenden Code dargestellt:

<code class="css">img {
  border-radius: 50%;
}</code>

Fügen Sie als Nächstes CSS3-Animationen zur Transformationseigenschaft des Bildes hinzu. Transition ermöglicht sanfte Übergänge zwischen Zuständen, während rotieren() den gewünschten Rotationseffekt anwendet:

<code class="css">img {
  transition: transform .7s ease-in-out;
}
img:hover {
  transform: rotate(360deg);
}</code>

In diesem Beispiel dreht sich das Bild beim Schweben um volle 360 ​​Grad, wodurch ein sanfter Rotationseffekt entsteht. Sie können den Winkel „rotate()“ anpassen, um den Rotationsbetrag anzupassen.

Zu Demonstrationszwecken finden Sie hier ein Beispiel für einen HTML-Codeausschnitt:

<code class="html"><img src="https://i.sstatic.net/BLkKe.jpg" width="100" height="100"/></code>

Durch die Kombination dieser CSS- und HTML-Elemente können Sie dies tun Erstellen Sie effektiv ein schwebend animiertes, sich drehendes oder rotierendes Bild.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS ein schwebend animiertes, sich drehendes oder rotierendes Bild?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!