CSS-Funktionen dazu gehören nicht nur das Erstellen eines stilvollen und interaktiven Designs, sondern auch das Animieren von Elementen auf einer Webseite. Mit CSS-Animationen können Sie spektakuläre und ansprechende Ergebnisse erzielen. Eine der beliebtesten Möglichkeiten, CSS zu animieren, ist die Hintergrundanimation. In dieser exemplarischen Vorgehensweise erfahren Sie, wie Sie Hintergrundanimationen mit CSS erstellen.
Ansatz - Dies ist die Erstellung eines Containers, in dem sich ein animierter Hintergrund befindet. Verwenden Sie dazu ein HTML-Tag mit einer eindeutigen ID oder Klasse, damit Sie Stile und Animationen mithilfe von CSS anwenden können.
Zweiter Schritt - dies ist die Definition von Stilen für Hintergrundanimationen. Wenden Sie dazu die CSS-Eigenschaft an background-image zum ausgewählten Container und geben Sie den Pfad zu dem Bild an, das Sie als Hintergrund verwenden möchten. Fügen Sie dann die CSS-Eigenschaft hinzu animation, um den Animationstyp, die Dauer, die Verzögerung usw. zu bestimmen.
Was ist Hintergrundanimation?
Mit Hintergrundanimationen können Sie verschiedene Effekte wie Bewegung, Farbwechsel, Dimmen, Aufhellen usw. erstellen. Dies kann für die Erstellung von Parallaxeffekten, animierten Hintergrundbildern, glatten Übergängen zwischen Farben und anderen kreativen Lösungen nützlich sein, die dazu beitragen, dass eine Webseite attraktiver und lesbarer wird.
Die Hintergrundanimation wird erreicht, indem mithilfe von CSS die Animationseigenschaften eines Hintergrundelements oder Containers festgelegt werden. Dies kann mit Keyframes, Transformationen, Übergängen und anderen CSS-Eigenschaften erfolgen, mit denen Sie verschiedene Animationseffekte erstellen können.
Moderne Webbrowser bieten umfangreiche Möglichkeiten zum Erstellen von Hintergrundanimationen mit CSS, und dieser Ansatz wird bei Website-Entwicklern immer beliebter. Es hilft nicht nur, die visuelle Benutzeroberfläche der Website zu verbessern, sondern macht sie auch für Besucher attraktiver und verbessert die allgemeine Benutzererfahrung.
Vorbereitung
Bevor Sie mit dem Erstellen einer Hintergrundanimation mit CSS beginnen, benötigen Sie einige Quellmaterialien. Hier ist eine Liste von dem, was Sie brauchen:
1. Hintergrundbild: Wählen Sie das Bild aus, das als Hintergrund für Ihre Animation verwendet werden soll. Stellen Sie sicher, dass das Bild eine ausreichend hohe Auflösung hat und Ihren Anforderungen an Stil und Farbpalette entspricht.
2. Code-Editor: sie benötigen einen Code-Editor, um CSS- und HTML-Dateien zu erstellen und zu bearbeiten. Sie können einen beliebigen Code-Editor Ihrer Wahl verwenden, z. B. Visual Studio Code, Sublime Text oder Atom.
3. Browser: Um Ihre Animation anzuzeigen und zu überprüfen, benötigen Sie einen Browser. Es wird empfohlen, die neueste Version eines beliebten Browsers wie Google Chrome, Mozilla Firefox oder Safari zu verwenden.
Vorbereiten des Bildes
Bevor Sie mit dem Erstellen einer Hintergrundanimation mit CSS beginnen, müssen Sie ein geeignetes Bild vorbereiten. Es ist wichtig, ein Bild mit einer guten Auflösung und dem richtigen Inhalt für Ihre Animation auszuwählen.
Das Bild kann im JPEG-, PNG- oder GIF-Format bereitgestellt werden. Stellen Sie sicher, dass es den richtigen Abmessungen entspricht und über eine ausreichende Auflösung für die Anzeige auf dem Bildschirm des Benutzers verfügt.
Wenn das Bild, das Sie verwenden möchten, nicht mit den gewünschten Einstellungen übereinstimmt, können Sie es mit einem Bildbearbeitungsprogramm wie Adobe Photoshop oder GIMP bearbeiten. Ändern Sie die Größe, Ausrichtung oder fügen Sie zusätzliche Effekte hinzu, um das Bild für Ihre Hintergrundanimation perfekt zu machen.
Wenn Sie das gewünschte Bild vorbereitet haben, speichern Sie es in einem praktischen Format und verschieben Sie es in einen Ordner mit Ihrem Projekt.
Vorbereiten des CSS-Codes
Um eine Hintergrundanimation mit CSS zu erstellen, müssen Sie den entsprechenden Code vorbereiten. Zuerst erstellen wir die Struktur des HTML-Dokuments und beginnen dann mit dem Schreiben des CSS-Codes.
Zuerst müssen wir eine Stylesheet-Datei haben. Fügen Sie dazu die folgende Zeile zum Abschnitt hinzu
Als nächstes in der Styles-Datei.css Wir definieren die Stile für die Hintergrundanimation. Hier ist ein Beispiel:
| Selektor | Eigenschaft | Bedeutung |
|---|---|---|
| body | background-color | #000000 |
| body | animation | gradientAnimation 30s infinite |
| @keyframes gradientAnimation | 0% | |
| @keyframes gradientAnimation | 100% |
Im obigen Beispiel legen wir einen schwarzen Hintergrund für das body-Element fest ( background-color: #000000 ) und erstellen eine gradientAnimation, die für 30 Sekunden ( 30s infinite ) endlos wiederholt wird.
Als nächstes definieren wir zwei Animationspunkte (@keyframes gradientAnimation): anfangs (0%) und endend (100%). Am Startpunkt wird ein Hintergrund mit Farbverlauf von Weiß (#ffffff) bis Schwarz (#000000) und am Endpunkt von schwarz (#000000) bis weiß (#ffffff) festgelegt.
Auf diese Weise bewegt sich der Hintergrund beim Starten der Animation innerhalb von 30 Sekunden von Weiß nach Schwarz und wieder zurück.
Erstellen einer Hintergrundanimation
Sie können eine Hintergrundanimation mithilfe der CSS-Eigenschaft background-image erstellen. Zuerst müssen Sie das Bild definieren, das als Hintergrund verwendet werden soll.
Zum Beispiel, um ein Bild mit dem Titel "background.jpg", müssen Sie den folgenden CSS-Code angeben:
| body |
| background-image: url("background.jpg"); |
| > |
Um eine Hintergrundanimation zu erstellen, können Sie die CSS-Eigenschaft animation verwenden. Es ermöglicht Ihnen, glatte Übergänge zwischen verschiedenen Hintergrundzuständen zu erstellen.
Um beispielsweise eine pulsierende Hintergrundanimation zu erstellen, können Sie den folgenden CSS-Code verwenden:
| @keyframes pulsate |
| 0% |
| opacity: 1; |
| > |
| 50% |
| opacity: 0.5; |
| > |
| 100% |
| opacity: 1; |
| > |
| > |
Als nächstes müssen Sie die erstellte Animation auf den Hintergrund anwenden:
| body |
| animation: pulsate 2s infinite; |
| > |
Als Ergebnis wird der Hintergrund von einem vollständig undurchsichtigen Zustand (opacity: 1>) in einen durchscheinenden Zustand (opacity: 0.5>) und dann wieder zurück übergehen.
Dies ist nur ein Beispiel für Hintergrundanimationen, die mit CSS erstellt werden können. Durch die Kombination verschiedener Eigenschaften und Werte können Sie einzigartige und interessante Hintergrundanimationen für verschiedene Elemente auf einer Webseite erstellen.
Anwenden von Animationen auf ein Bild
Dazu müssen Sie die Animationseigenschaft verwenden. Sie können eine Animation mithilfe von Keyframes oder einer Funktion festlegen, die die Änderung der Bildeigenschaften im Laufe der Zeit bestimmt.
Hier ist ein einfaches Beispiel für die Verwendung von Animation :
/* HTML */
/* CSS */#myImage @keyframes spin 100% >In diesem Beispiel erstellen wir eine Bildrotationsanimation. Das Bild beginnt sich bei 0 Grad zu drehen und dreht sich 2 Sekunden lang mit einer linearen Glättungsfunktion um 360 Grad. Die Animation wird endlos fortgesetzt, da wir den Wert infinite für die Animation-Eigenschaft verwendet haben.
Sie können die Bildeigenschaften für jedes Keyframe ändern, um verschiedene Animationseffekte zu erstellen. Sie können beispielsweise die Position, Größe, Transparenz oder Filter eines Bildes ändern.
