Gradientowa animacja tła może być świetną techniką projektowania, która ożywia kolory tła na Twoim Witryna internetowa. To idealne rozwiązanie dla tych, którzy chcą czegoś bardziej realistycznego niż statyczny kolor tła bez konieczności uciekania się do wolno ładującego się tła wideo. Podstawową ideą animacji tła gradientowego jest użycie CSS do tworzenia powiększenia i animowania tła gradientowego, aby uzyskać płynne przejścia kolorów.
W tym samouczku pokażemy, jak tworzyć animacje tła z gradientem w Divi. Ta metoda łączy niestandardowy fragment CSS, który animuje kolory gradientu wybrane we wbudowanych ustawieniach Divi. Konfiguracja jest w rzeczywistości dość prosta, aby uzyskać tak piękny wynik.
Zacznijmy!
Możliwy wynik
Oto przegląd dwóch sposobów tworzenia animacji tła gradientowego w Divi.
Oczywiście warunkiem wstępnym tego samouczka jest posiadanie Motyw Divi zainstalowane i aktualne.
Tworzenie animacji tła gradientowego za pomocą fragmentu kodu CSS i opcji tła Divi
Aby rozpocząć, dodaj wiersz z jedną kolumną do domyślnej sekcji w Divi Builder.
Ustawienia sekcji
Następnie zaktualizuj ustawienia sekcji za pomocą obrazu tła. Nasze wypełnienie gradientowe zostanie dodane do naszej linii, tak aby nałożyło się na ten obraz.
Następnie zaktualizuj dopełnienie w następujący sposób:
- Wypełnienie: 0px wysoki, 0px niski
Parametry wierszy i kolumn
Parametry kolumny
Otwórz ustawienia wierszy, a następnie zaktualizuj wypełnienie kolumn w następujący sposób:
- Wyściółka: top 12vw
Następnie dodaj następujący niestandardowy CSS do głównego elementu kolumny:
height: 40vw;
Ustawienia linii
Tło gradientowe
Możemy teraz dodać tło gradientowe do linii. Pamiętaj, aby kolory gradientu były półprzezroczyste, jeśli chcesz zobaczyć obraz tła sekcji.
Zaktualizuj parametry linii w następujący sposób:
- Kolor tła gradientu lewego: rgba(12,113,195,0.8)
- Kolor tła prawego gradientu: rgba(131,0,233,0.8)
- Rodzaj gradientu: liniowy
- Kierunek gradientu: 45 stopni
Rozmiar
Następnie zaktualizuj rozmiar wiersza w następujący sposób:
- Szerokość: 100%
- Maksymalna szerokość: 100%
Niestandardowa klasa CSS
Teraz, gdy nasze tło gradientowe jest na swoim miejscu, musimy dodać animację za pomocą niestandardowego CSS. Przed dodaniem kodu CSS musimy dodać niestandardową klasę CSS, aby kierować reklamy na tę konkretną linię.
Przejdź do zakładki zaawansowane i dodaj następującą klasę CSS:
- Klasa CSS: animowany gradient
Dodaj moduł kodu
Po dodaniu klasy CSS do wiersza dodaj moduł kodu do wiersza.
Wklej CSS do modułu kodu
Następnie wklej następujący kod CSS w obszarze Moduł ustawień kodu kodu:
.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%;}}
Pamiętaj, aby owinąć kod w <style></style>tagi, ponieważ dodajemy je do kodu HTML strony.
Wynik
Oto dotychczasowy wynik. Gradientowe tło zostało powiększone do 400% oryginalnego rozmiaru i jest animowane poprzez przesuwanie w lewo iw prawo.
Dodaj wezwanie do działania
Aby zakończyć projekt, dodajmy moduł wezwania do działania, który będzie częścią treść.
Ustawienia wezwania do działania
Treść
Zaktualizuj treść w następujący sposób:
- Dodaj tytuł
- Dodaj tekst przycisku
- Dodaj tekst podstawowy
- Adres URL linku do przycisku: #
- Użyj koloru tła: NIE
Koncepcja
Przejdź do zakładki Projekt i zaktualizuj następujące elementy:
- Czcionka tytułu: skrypt Kaushan
- Rozmiar tekstu tytułu: 4vw (komputer stacjonarny), 30 pikseli (telefon)
- Wysokość linii tytułu: 1,4 em
- Czcionka korpusu: Roboto
- Rozmiar tekstu przycisku: 16px
- Kolor tekstu przycisku: # 555555
- Tło przycisku: #ffffff
- Szerokość obramowania przycisku: 0px
- Promień obramowania przycisku: 30 pikseli
- Odstępy między literami przycisków: 3px
- Czcionka przycisku: Condensed Roboto
- Waga czcionki przycisku: pogrubiona
Wynik
Teraz sprawdź wynik na stronie na żywo za pomocą treść istniejącego wezwania do działania. To byłby świetny nagłówek dla Ciebie Witryna internetowa !
Pamiętaj, że możesz łatwo zmienić kolory tła swojego rzędu na dowolne. Kod będzie nadal działał w tle, aby animować tło dla Ciebie.
Jeśli znasz trochę CSS, możesz dostosować prędkość i kierunek animacji, zmieniając wartości właściwości animacji.
Mam nadzieję, że ten samouczek był dla Ciebie przydatny. Zapraszam do dzielenia się swoimi opiniami na jego temat.
