Animația de fundal în gradient poate fi o tehnică excelentă de design pentru a aduce culorile de fundal la viață pe dvs site-ul web. Este o soluție perfectă pentru cei care doresc ceva mai realist decât o culoare de fundal statică, fără a fi nevoie să recurgă la un fundal video cu încărcare lentă. Ideea de bază din spatele animației de fundal cu gradient este de a folosi CSS pentru a crea mărirea și animarea unui fundal cu gradient pentru a crea tranziții de culoare în mișcare lină.
În acest tutorial, vă vom arăta cum să creați animații de fundal de gradient pe Divi. Această metodă combină un fragment CSS personalizat care animă culorile de gradient alese în setările Divi integrate. Configurarea este de fapt destul de simplă pentru un rezultat atât de frumos.
Să începem!
Rezultat pozitiv
Iată o imagine de ansamblu asupra celor două modalități prin care putem crea o animație de fundal gradient pe Divi.
Desigur, condiția prealabilă pentru acest tutorial este să aveți un Divi tema instalat și actualizat.
Crearea unei animații de fundal de gradient cu extractul CSS și opțiunea de fundal a Divi
Pentru a începe, adăugați un rând al unei coloane la secțiunea implicită din Divi Builder.
Setări secțiune
Apoi actualizați setările secțiunii cu o imagine de fundal. Fundalul nostru de gradient va fi adăugat la linia noastră, astfel încât să se suprapună peste această imagine.
Apoi actualizați umplutura după cum urmează:
- Garnitură: 0px înaltă, 0px mică
Setări pentru rânduri și coloane
Parametrii coloanei
Deschideți setările rândului, apoi actualizați completarea coloanei după cum urmează:
- Căptușeală: peste 12vw
Apoi adăugați următorul CSS personalizat la elementul coloanei principale:
height: 40vw;
Setări de linie
Fundal gradient
Acum putem adăuga fundalul de gradient la linie. Asigurați-vă că faceți culorile degradate semi-transparente dacă doriți să vedeți imaginea de fundal a secțiunii.
Actualizați parametrii liniei după cum urmează:
- Culoarea de fundal a gradientului stâng: rgba (12,113,195,0.8)
- Culoare de fundal gradient din dreapta: rgba (131,0,233,0.8)
- Tipul gradientului: liniar
- Direcția gradientului: 45 de grade
Dimensiune
Apoi actualizați dimensiunea liniei după cum urmează:
- Lățime: 100%
- Lățime maximă: 100%
Clasa CSS personalizată
Acum că fundalul nostru de gradient este la locul său, trebuie să adăugăm animația prin CSS personalizat. Înainte de a adăuga codul CSS, trebuie să adăugăm o clasă CSS personalizată pentru a viza acel rând specific.
Accesați fila avansată și adăugați următoarea clasă CSS:
- Clasa CSS: animare-gradient
Adăugați un modul de cod
După ce clasa CSS a fost adăugată la linie, adăugați un modul de cod la linie.
Lipiți CSS în modulul de cod
Apoi lipiți următorul cod CSS în zona Modulului Setări Cod Cod:
.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%;}}
Asigurați-vă că înfășurați codul în <style></style>etichete pentru că îl adăugăm la codul HTML al paginii.
rezultat
Iată rezultatul de până acum. Fundalul de gradient a fost mărit la 400% din dimensiunea originală și este animat prin deplasarea la stânga și la dreapta.
Adăugați un îndemn la acțiune
Pentru a finaliza designul, să adăugăm un modul de îndemn la acțiune pentru a face parte din cuprins.
Setări de apel la acțiune
Conținut
Actualizați cuprins după cum urmează:
- Adăugați un titlu
- Adăugați textul butonului
- Adăugați textul corpului
- URL-ul linkului butonului: #
- Folosiți culoarea de fundal: NU
Concepție
Accesați fila Proiectare și actualizați următoarele:
- Titlul fontului: Kaushan Script
- Dimensiunea textului titlului: 4vw (desktop), 30px (telefon)
- Înălțimea liniei de titlu: 1,4 em
- Corpul Poliției: Roboto
- Dimensiunea textului butonului: 16px
- Culoarea textului butonului: # 555555
- Fundal buton: #ffffff
- Lățimea marginii butonului: 0px
- Raza de margine a butonului: 30 pixeli
- Spațiu de litere pentru butoane: 3px
- Fontul butonului: Roboto condensat
- Greutatea fontului pentru buton: bold
rezultat
Acum verificați rezultatul pe pagina live cu cuprins a apelului la acțiune în vigoare. Acesta ar fi un antet grozav pentru dvs site-ul web !
Amintiți-vă, puteți schimba cu ușurință culorile de fundal ale liniei dvs. la orice doriți. Codul va continua să ruleze în fundal pentru a anima fundalul pentru dvs.
Dacă cunoașteți un pic de CSS, puteți regla viteza și direcția animației schimbând valorile proprietăților animației.
Sper că ți s-a părut util acest tutorial. Nu ezitați să ne împărtășiți opiniile cu privire la aceasta.
