Hintergrundanimationen mit Farbverlauf können eine großartige Designtechnik sein, um Hintergrundfarben auf Ihrem Bildschirm zum Leben zu erwecken Website. Es ist eine perfekte Lösung für diejenigen, die etwas Realistischeres als eine statische Hintergrundfarbe wünschen, ohne auf einen langsam ladenden Videohintergrund zurückgreifen zu müssen. Die Grundidee hinter der Hintergrundanimation mit Farbverlauf besteht darin, mithilfe von CSS einen Hintergrund mit Farbverlauf zu vergrößern und zu animieren, um fließende Farbübergänge zu erzeugen.
In diesem Tutorial zeigen wir Ihnen, wie Sie Hintergrundanimationen mit Farbverlauf auf Divi erstellen. Diese Methode kombiniert ein benutzerdefiniertes CSS-Snippet, das die in den integrierten Divi-Einstellungen ausgewählten Verlaufsfarben animiert. Die Konfiguration ist für ein so schönes Ergebnis eigentlich recht einfach.
Lassen Sie uns beginnen!
Posisble Ergebnis
Hier ist eine Übersicht über die beiden Möglichkeiten, wie wir eine Hintergrundanimation mit Farbverlauf auf Divi erstellen können.
Voraussetzung für dieses Tutorial ist natürlich, dass Sie über eine Divi-Thema installiert und aktuell.
Erstellung einer Verlaufshintergrundanimation mit dem CSS-Extrakt und der Hintergrundoption von Divi
Fügen Sie zunächst eine Zeile mit einer Spalte zum Standardabschnitt in Divi Builder hinzu.
Abschnittseinstellungen
Aktualisieren Sie dann die Abschnittseinstellungen mit einem Hintergrundbild. Unser Verlaufshintergrund wird zu unserer Linie hinzugefügt, sodass er dieses Bild überlappt.
Aktualisieren Sie dann die Füllung wie folgt:
- Auffüllen: 0px hoch, 0px niedrig
Zeilen- und Spalteneinstellungen
Spaltenparameter
Öffnen Sie die Zeileneinstellungen und aktualisieren Sie die Spaltenfüllung wie folgt:
- Polsterung: über 12vw
Fügen Sie dann dem Hauptspaltenelement das folgende benutzerdefinierte CSS hinzu:
height: 40vw;
Leitungseinstellungen
Hintergrund mit Farbverlauf
Jetzt können wir der Linie den Verlaufshintergrund hinzufügen. Stellen Sie sicher, dass die Verlaufsfarben halbtransparent sind, wenn Sie das Hintergrundbild des Abschnitts sehen möchten.
Aktualisieren Sie die Zeilenparameter wie folgt:
- Hintergrundfarbe des linken Farbverlaufs: rgba (12,113,195,0.8)
- Hintergrundfarbe mit Farbverlauf rechts: rgba (131,0,233,0.8)
- Verlaufstyp: linear
- Gradientenrichtung: 45 Grad
Größe
Aktualisieren Sie dann die Zeilengröße wie folgt:
- Breite: 100%
- Maximale Breite: 100%
Benutzerdefinierte CSS-Klasse
Nachdem unser Verlaufshintergrund vorhanden ist, müssen wir die Animation über benutzerdefiniertes CSS hinzufügen. Vor dem Hinzufügen des CSS-Codes müssen wir eine benutzerdefinierte CSS-Klasse hinzufügen, um auf diese bestimmte Zeile abzuzielen.
Wechseln Sie zur Registerkarte "Erweitert" und fügen Sie die folgende CSS-Klasse hinzu:
- CSS-Klasse: Animationsgradient
Fügen Sie ein Codemodul hinzu
Fügen Sie der Zeile ein Codemodul hinzu, nachdem die CSS-Klasse zur Zeile hinzugefügt wurde.
Fügen Sie CSS in das Codemodul ein
Fügen Sie dann den folgenden CSS-Code in den Bereich Code Code Settings Module ein:
.animate-gradient {background-size: 400% 400%;animation: gradient 5s ease infinite;} @keyframes gradient {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}}
Stellen Sie sicher, dass Sie den Code in das Feld einschließen <style></style>Tags, weil wir es dem HTML-Code der Seite hinzufügen.
Ergebnis
Hier ist das bisherige Ergebnis. Der Verlaufshintergrund wurde auf 400% der Originalgröße vergrößert und durch Bewegen nach links und rechts animiert.
Fügen Sie einen Aufruf zur Aktion hinzu
Um das Design fertigzustellen, fügen wir ein Call-to-Action-Modul hinzu, das Teil des sein soll Inhalt.
Call-to-Action-Einstellungen
Inhalt
Aktualisieren Sie die Inhalt wie folgt:
- Fügen Sie einen Titel hinzu
- Schaltflächentext hinzufügen
- Fügen Sie Text hinzu
- URL des Links der Schaltfläche: #
- Hintergrundfarbe verwenden: NEIN
Technologie
Gehen Sie zur Registerkarte Design und aktualisieren Sie Folgendes:
- Titelschrift: Kaushan Script
- Titeltextgröße: 4vw (Desktop), 30px (Telefon)
- Titelzeile Höhe: 1,4 em
- Körperpolizei: Roboto
- Schaltflächentextgröße: 16px
- Textfarbe der Schaltfläche: # 555555
- Schaltflächenhintergrund: #ffffff
- Schaltflächenrandbreite: 0px
- Schaltflächenrandradius: 30 Pixel
- Tastenbuchstabenabstand: 3px
- Tastenschrift: Roboto komprimiert
- Schriftgröße der Schaltfläche: fett
Ergebnis
Überprüfen Sie nun das Ergebnis auf der Live-Seite mit dem Inhalt des Aufrufs zum Handeln vorhanden. Das wäre ein toller Header für Sie Website !
Denken Sie daran, dass Sie die Hintergrundfarben Ihrer Linie ganz einfach nach Belieben ändern können. Der Code wird weiterhin im Hintergrund ausgeführt, um den Hintergrund für Sie zu animieren.
Wenn Sie sich mit CSS auskennen, können Sie die Geschwindigkeit und Richtung der Animation anpassen, indem Sie die Werte der Animationseigenschaften ändern.
Ich hoffe, Sie fanden dieses Tutorial hilfreich. Zögern Sie nicht, Ihre Meinung dazu zu teilen.
