So verwenden Sie CSS, um den rotierenden Hintergrundanimationseffekt von Elementen zu erzielen-CSS-Tutorial-php.cn

So verwenden Sie CSS, um den rotierenden Hintergrundanimationseffekt von Elementen zu erzielen

WBOY

Freigeben： 2023-11-21 09:05:20

Original

1285 Leute haben es durchsucht

So verwenden Sie CSS, um den rotierenden Hintergrundanimationseffekt von Elementen zu erzielen

Der Hintergrundanimationseffekt kann die visuelle Attraktivität und das Benutzererlebnis der Webseite erhöhen. In diesem Artikel wird erläutert, wie Sie mithilfe von CSS den rotierenden Hintergrundanimationseffekt von Elementen erzielen, und es werden spezifische Codebeispiele bereitgestellt.

Zuerst müssen wir ein Hintergrundbild vorbereiten, das ein beliebiges Bild sein kann, beispielsweise ein Bild der Sonne oder eines elektrischen Ventilators. Speichern Sie das Bild und nennen Sie es „bg.png“.

Als nächstes erstellen Sie eine HTML-Datei, fügen der Datei ein div-Element hinzu und legen es als das Element fest, dem Sie ein Hintergrundbild hinzufügen möchten. Zum Beispiel:

<!DOCTYPE html>
<html>
<head>
    <title>旋转背景图动画</title>
    <style>
        .element {
            width: 300px;
            height: 300px;
            background-image: url("bg.png");
            background-size: cover;
            animation: rotate 5s infinite linear;
        }
        
        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }
            
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="element"></div>
</body>
</html>

Nach dem Login kopieren

Im obigen Code definieren wir zunächst eine CSS-Klasse mit dem Namen „element“ und wenden sie auf das div-Element an, wo ein Hintergrundbild hinzugefügt werden muss. Die Breite und Höhe des div-Elements werden auf 300 Pixel eingestellt. Das Hintergrundbild verwendet das zuvor vorbereitete „bg.png“, und das Hintergrundbild wird proportional skaliert und deckt das gesamte div-Element über das Attribut „Hintergrundgröße“ ab.

Als nächstes haben wir dem div-Element mithilfe des Animationsattributs eine Rotationsanimation namens „rotate“ hinzugefügt. Die Animation wird 5 Sekunden lang in einer Endlosschleife mit linearer Geschwindigkeit abgespielt.

In der @keyframes-Regel definieren wir die Keyframes der Animation. Stellen Sie im 0 %-Keyframe den Drehwinkel des Bildes auf 0 Grad ein; im 100 %-Keyframe stellen Sie den Drehwinkel des Bildes auf 360 Grad ein, um den Effekt einer vollständigen Drehung zu erzielen.

Schließlich haben wir ein div-Element innerhalb des Body-Tags hinzugefügt und die zuvor definierte CSS-Klasse „element“ auf dieses Element angewendet.

Speichern Sie die HTML-Datei und führen Sie sie aus. Sie werden sehen, wie sich das Hintergrundbild im div-Element zu drehen beginnt. So animieren Sie mit CSS den rotierenden Hintergrund eines Elements.

Zusammenfassung:

Durch die Definition einer Rotationsanimation und die Verwendung des Hintergrundbildattributs können wir den rotierenden Hintergrundbildanimationseffekt des Elements erzielen. Wir können unterschiedliche Effekte erzielen, indem wir Attribute wie Animationszeit, Rotationsrichtung und Geschwindigkeit anpassen. Die oben bereitgestellten Codebeispiele können Ihnen den Einstieg in die Erstellung Ihrer eigenen rotierenden Hintergrundanimation erleichtern. Ich hoffe, dieser Artikel kann Ihnen hilfreich sein!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS, um den rotierenden Hintergrundanimationseffekt von Elementen zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!