Градиентната фонова анимация може да бъде чудесна дизайнерска техника, за да оживите фоновите цветове на вашия уеб сайт. Това е идеално решение за тези, които искат нещо по-реалистично от статичен фонов цвят, без да се налага да прибягват до бавно зареждащ се видео фон. Основната идея зад градиентната фонова анимация е да се използва CSS за създаване на увеличен и анимиран градиентен фон, за да се създадат плавни движещи се цветови преходи.

В този урок ще ви покажем как да създадете анимации с градиентен фон на Divi. Този метод комбинира персонализиран CSS фрагмент, който анимира цветовете на градиента, избрани в интегрираните настройки на Divi. Конфигурацията всъщност е доста проста за такъв красив резултат.

Нека да започнем!

Възможен резултат

Ето преглед на двата начина, по които можем да създадем градиентна анимация на фона на Divi.

Разбира се, необходимото условие за този урок е да имате Тема на Divi инсталиран и актуален.

Създаване на градиентна анимация на фон с CSS екстракт и опцията за фон на Divi

За да започнете, добавете ред от една колона към раздела по подразбиране в Divi Builder.

Настройки на секцията

След това актуализирайте настройките на раздела с фоново изображение. Нашият градиентен фон ще бъде добавен към нашата линия, така че да припокрива това изображение.

След това актуализирайте попълването, както следва:

• Подплащане: 0px високо, 0px ниско

Настройки на редове и колони

Параметри на колоната

Отворете настройките на реда, след което актуализирайте попълването на колоните, както следва:

• Подложка: над 12vw

След това добавете следния персонализиран CSS към елемента на основната колона:

height: 40vw;

Настройки на линията

Градиентен фон

Сега можем да добавим градиентния фон към линията. Уверете се, че сте направили цветовете на градиента полупрозрачни, ако искате да видите фоновото изображение на раздела.

Актуализирайте параметрите на реда, както следва:

• Цвят на фона на левия градиент: rgba (12,113,195,0.8)
• Цвят на градиентния фон вдясно: rgba (131,0,233,0.8)
• Тип градиент: линеен
• Посока на градиента: 45 градуса

размер

След това актуализирайте размера на реда, както следва:

• Ширина: 100%
• Максимална ширина: 100%

Персонализиран клас CSS

Сега, когато фоновият ни фон е на мястото си, трябва да добавим анимацията чрез персонализиран CSS. Преди да добавим CSS кода, трябва да добавим персонализиран CSS клас, за да насочим към този конкретен ред.

Отидете в раздела за напреднали и добавете следния клас CSS:

• CSS клас: анимация-градиент

Добавете кодов модул

След като клас CSS е добавен към реда, добавете кодов модул към реда.

Поставете CSS в кодовия модул

След това поставете следния CSS код в областта на модула за настройка на код код:

.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%;}}

Не забравяйте да увиете кода в <style></style>тагове, защото го добавяме към HTML кода на страницата.

резултат

Ето резултата до момента. Градиентният фон е увеличен до 400% от първоначалния размер и е анимиран чрез преместване наляво и надясно.

Добавете призив за действие

За да завършим дизайна, нека добавим модул с призив за действие, който да бъде част от съдържанието.

Настройки за призив за действие

Съдържание

Актуализирайте съдържанието, както следва:

• Добавете заглавие
• Добавете текст на бутона
• Добавете текст на тялото
• URL адрес на връзката на бутона: #
• Използвайте цвят на фона: НЕ

Концепция

Отидете в раздела Дизайн и актуализирайте следното:

• Шрифт на заглавието: Kaushan Script
• Размер на текста на заглавието: 4vw (десктоп), 30px (телефон)
• Височина на заглавния ред: 1,4 em
• Полиция на тялото: Roboto
• Размер на текста на бутона: 16px
• Цвят на текста на бутона: # 555555
• Фон на бутона: #ffffff
• Ширина на рамката на бутона: 0px
• Радиус на рамката на бутона: 30 пиксела
• Разстояние между буквите на бутон: 3px
• Шрифт на бутона: Roboto кондензирано
• Тегло на шрифта на бутона: удебелен

резултат

Сега проверете резултата на активната страница с поставеното съдържание с подканваща фраза. Това би било чудесно заглавие за вашето уеб сайт !

Не забравяйте, че можете лесно да промените цветовете на фона на вашата линия, както искате. Кодът ще продължи да работи във фонов режим, за да анимира фона за вас.

Ако знаете малко CSS, можете да регулирате скоростта и посоката на анимацията, като промените стойностите на свойствата на анимацията.

Надявам се, че този урок ви е бил полезен. Не се колебайте да споделите мнението си по него.