Градиентная фоновая анимация может стать отличной дизайнерской техникой, позволяющей оживить фоновые цвета на вашем экране. Веб-сайт. Это идеальное решение для тех, кто хочет чего-то более реалистичного, чем статичный фоновый цвет, не прибегая к медленно загружаемому фоновому видео. Основная идея анимации градиентного фона заключается в использовании CSS для увеличения и анимации градиентного фона для создания плавных движущихся цветовых переходов.
В этом уроке мы покажем вам, как создавать градиентную фоновую анимацию в Divi. Этот метод объединяет настраиваемый фрагмент CSS, который анимирует цвета градиента, выбранные во встроенных настройках 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 для этой конкретной строки.
Перейдите на вкладку Advanced и добавьте следующий класс 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
- Тело полиции: Робото
- Размер текста кнопки: 16px
- Цвет текста кнопки: # 555555
- Фон кнопки: #ffffff
- Ширина границы кнопки: 0 пикселей
- Радиус границы кнопки: 30 пикселей
- Интервал между кнопками: 3px
- Шрифт кнопки: Roboto сжатый
- Вес шрифта кнопки: жирный
Результат
Теперь проверьте результат на живой странице с помощью содержание призыва к действию на месте. Это будет отличный заголовок для вашего Веб-сайт !
Помните, что вы можете легко изменить цвет фона вашей линии на все, что захотите. Код будет продолжать работать в фоновом режиме, чтобы анимировать фон для вас.
Если вы немного знакомы с CSS, вы можете настроить скорость и направление анимации, изменив значения свойств анимации.
Надеюсь, вы нашли этот урок полезным. Не стесняйтесь делиться своим мнением по этому поводу.
