Хотите выделить определенную часть страницы? Сегодня мы покажем вам, как создавать анимированные рамки, чтобы выделить содержание вашей страницы. Мы создадим эти анимированные границы, используя шаблон App Developer Layout Pack, доступный по адресу Divi Строитель. Однако вы можете использовать эту технику для любого типа Веб-сайт что вы создаете. Это определенно поможет вам добавить дополнительное измерение на вашу страницу. Мы надеемся, что этот урок вдохновит вас на создание собственных анимированных наложений границ.
обследование
Прежде чем мы углубимся в руководство, давайте быстро взглянем на результат этих трех примеров. Вы также можете ожидать аналогичного результата на небольших экранах.
Создайте новую страницу с помощью целевой страницы App Developer Layout Pack
Первое, что нужно сделать, это создать новую страницу и использовать пакет макетов разработчика приложений.
Клон Герой Раздел
Наш пример будет создан в разделе героя. Напомним, вот что мы создадим:
Добавьте новую строку в раздел героев
Структура столбца
Давайте начнем воссоздавать первый пример! Добавьте новую строку в специализированном разделе, используя следующую структуру столбцов:
Добавить текстовый модуль
Оставьте содержимое пустым
Добавьте в строку новый текстовый модуль и не забудьте оставить текстовое поле. содержание пустой. Мы используем модуль из-за его встроенных возможностей дизайна, а не для отображения контента. содержание пишу.
расстояние
Перейдите к настройкам интервала текстового модуля и придайте ему форму, добавив собственные внутренние и нижние поля. Создайте перекрытие между этим модулем и предыдущими модулями, также добавив отрицательное верхнее поле.
- Верхнее поле: -480px
- Лучший отступ: 223px
- Нижняя обивка: 223px
Граница
Затем перейдите к настройкам границ модуля и добавьте границы по вашему выбору.
- Ширина границы: 9px
- Цвет границы: #0ae2ff
- Стиль границы: Outset
Shadow box
Добавьте шкатулку тоже.
- Box Shadow Blur Force: 1px
- Толщина тени коробки: 15 пикселей
- Цвет тени: rgba (10,226,255,0.59)
Анимация
И поэкспериментируйте с настройками анимации, чтобы отобразить контент. Однако следует отметить, что вы можете использовать тот вариант, который вам больше всего нравится.
- Анимация стиля: Flip
- Повтор анимации: один раз
- Направление анимации: Право
- Продолжительность анимации: 1500 мс
- Задержка анимации: 1500 мс
- Анимация интенсивности: 500%
обследование
Теперь, когда мы прошли все этапы, давайте еще раз посмотрим на результат трех примеров, которые мы воссоздали в этом уроке.
Заключительные мысли
В этом уроке мы показали вам, как выделить контент с помощью анимированных наложений границ. Это отличный способ привлечь внимание к определенной части страницы и сделать это стильно. Вы можете использовать эту технику для любого типа Веб-сайт что вы строите. Если у вас есть какие-либо вопросы или предложения, не забудьте оставить комментарий в разделе комментариев ниже!
