Gradient bakgrundsanimering kan vara en bra designteknik för att ge bakgrundsfärger liv på din webbplats. Det är en perfekt lösning för dem som vill ha något mer realistiskt än en statisk bakgrundsfärg utan att behöva ta till en långsamt laddad videobakgrund. Grundidén bakom tonad bakgrundsanimering är att använda CSS för att skapa förstoring och animera en gradientbakgrund för att skapa mjuka rörliga färgövergångar.
I den här handledningen visar vi dig hur du skapar bakgrundsanimationer med övertoningar på Divi. Denna metod kombinerar ett anpassat CSS-utdrag som animerar gradientfärgerna som valts i de integrerade Divi-inställningarna. Konfigurationen är faktiskt ganska enkel för ett så vackert resultat.
Låt oss börja!
Posisble resultat
Här är en översikt över de två sätten vi kan skapa en gradientbakgrundsanimation på Divi.
Naturligtvis är förutsättningen för denna handledning att du har en Divi-tema installerad och uppdaterad.
Skapande av en gradient bakgrundsanimering med CSS-utdraget och bakgrundsalternativet för Divi
För att börja, lägg till en rad av en kolumn i standardavsnittet i Divi Builder.
Avsnitt inställningar
Uppdatera sedan sektionsinställningarna med en bakgrundsbild. Vår tonad bakgrund läggs till i vår linje så att den överlappar den här bilden.
Uppdatera sedan fyllningen enligt följande:
- Polstring: 0px hög, 0px låg
Rad- och kolumninställningar
Kolumnparametrar
Öppna radinställningarna och uppdatera sedan kolumnfyllningen på följande sätt:
- Polstring: över 12vw
Lägg sedan till följande anpassade CSS till huvudkolumnelementet:
height: 40vw;
Linjeinställningar
Lutningbakgrund
Nu kan vi lägga till lutningsbakgrunden till raden. Se till att göra lutningsfärgerna halvtransparenta om du vill se sektionens bakgrundsbild.
Uppdatera radparametrarna enligt följande:
- Bakgrundsfärg på vänster lutning: rgba (12,113,195,0.8)
- Lutningsbakgrundsfärg till höger: rgba (131,0,233,0.8 XNUMX)
- Lutningstyp: linjär
- Lutningsriktning: 45 grader
storlek
Uppdatera sedan radstorleken enligt följande:
- Bredd: 100%
- Max bredd: 100%
Anpassad CSS-klass
Nu när vår lutningsbakgrund är på plats måste vi lägga till animationen via anpassad CSS. Innan vi lägger till CSS-koden måste vi lägga till en anpassad CSS-klass för att rikta in den specifika raden.
Gå till fliken avancerad och lägg till följande CSS-klass:
- CSS-klass: animerande gradient
Lägg till en kodmodul
När CSS-klassen har lagts till i raden, lägg till en kodmodul till raden.
Klistra in CSS i kodmodulen
Klistra sedan in följande CSS-kod i området Code Code Settings Module Module:
.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%;}}
Se till att slå in koden i <style></style>taggar eftersom vi lägger till den i sidens HTML-kod.
Resultat
Här är resultatet hittills. Lutningsbakgrunden har förstorats till 400% av originalstorleken och animeras genom att flytta åt vänster och höger.
Lägg till en uppmaning
För att avsluta designen, låt oss lägga till en uppmaningsmodul för att vara en del av innehåll.
Inställningar för uppmaning till handling
Innehåll
Uppdatera innehåll enligt följande:
- Lägg till en titel
- Lägg till knapptext
- Lägg till huvudtext
- URL till knappens länk: #
- Använd bakgrundsfärg: NEJ
Conception
Gå till fliken Design och uppdatera följande:
- Titel typsnitt: Kaushan manus
- Titeltextstorlek: 4vw (skrivbord), 30px (telefon)
- Titelradshöjd: 1,4 em
- Body Police: Roboto
- Knapptextstorlek: 16px
- Knappens textfärg: # 555555
- Knappbakgrund: #ffffff
- Knappens bredd: 0px
- Knappens radie: 30 pixlar
- Avstånd för knappbokstäver: 3px
- Knappsnitt: Roboto kondenserad
- Knappsnittets vikt: fetstil
Resultat
Kontrollera nu resultatet på livesidan med innehåll av uppmaningen till handling. Detta skulle vara ett bra header för din webbplats !
Kom ihåg att du enkelt kan ändra bakgrundsfärgerna på din linje till vad du vill. Koden fortsätter att köras i bakgrunden för att animera bakgrunden åt dig.
Om du känner till lite CSS kan du justera hastigheten och riktningen för animeringen genom att ändra värdena för animationsegenskaperna.
Jag hoppas att du tyckte att den här handledningen var användbar. Tveka inte att dela dina åsikter om det.
