Wie drehe ich ein Bild beim Schweben mit CSS?

Hover-ausgelöstes Bilddrehen

Für viele Webanwendungen ist es wünschenswert, interaktive animierte Effekte hinzuzufügen, um die Benutzerinteraktion zu verbessern. Ein solcher Effekt besteht darin, ein Bild zu drehen oder zu drehen, wenn ein Benutzer mit der Maus darüber fährt. In diesem Artikel wird gezeigt, wie Sie diese Funktionalität mithilfe von CSS für ein kreisförmiges Bild erreichen.

CSS-Implementierung für die Bilddrehung

Um beim Schweben ein sich drehendes Bild zu erstellen, können Sie CSS3-Übergänge mit der Funktion „drehen(“ verwenden. )' Eigentum. Das folgende CSS-Code-Snippet stellt die notwendigen Stile bereit:

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

Erklärung:

• Die Eigenschaft „transition“ legt die Dauer und den Übergangseffekt für die „ transform'-Eigenschaftsänderungen. In diesem Fall dauert der Übergang 0,7 Sekunden mit einem „ease-in-out“-Effekt.
• Wenn der Benutzer mit der Maus über das Bild fährt, wird der „Hover“-Stil angewendet.
• Der Die Eigenschaft „transformieren“ mit „rotate(360deg)“ dreht das Bild um 360 Grad und erzeugt so den Rotationseffekt.

Anwenden des Stils auf HTML

Im folgenden HTML-Codeausschnitt wird ein Das Bild wird mit dem Tag „img“ eingebettet:

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

Durch die Verknüpfung des CSS-Codes mit dieser HTML-Seite dreht sich das Bild, wenn der Benutzer mit der Maus darüber fährt. Dies demonstriert eine einfache und effektive Technik zum Hinzufügen interaktiver Elemente zu Webanwendungen.

Das obige ist der detaillierte Inhalt vonWie drehe ich ein Bild beim Schweben mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!