Вот так это будет выглядеть
Когда-то у меня на канале было видео, в котором я делал анимированную рамку для секций в элементор на вордпресс. Сейчас в элементоре немного изменилась структура и если вы используете флексбоксы, тогда по тому видео, у вас скорее всего не получится сделать нормальную рамку.
Держите код, для реализации рамки на флексбоксах и чуть ниже мы разберемся на какие строки нужно обратит внимание
.border-animation {
position: relative;
background: #000;
}
.border-animation:before,
.border-animation:after {
content: "";
position: absolute;
left: -2px;
top: -2px;
width: calc(100% + 4px);
height: calc(100% + 4px);
background: linear-gradient(
45deg,
#fb0094,
#0000ff,
#00ff00,
#ffff00,
#ff0000,
#fb0094,
#0000ff,
#00ff00,
#ffff00,
#ff0000
);
background-size: 400%;
z-index: -1;
animation: steam 20s linear infinite;
}
@keyframes steam {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
.border-animation:after {
filter: blur(50px);
}
.e-con-inner {
z-index: 2;
}
Первым делом вам нужно для вашего контейнера задать класс .border-animation. Для этого вам нужно зайти в настройки контейнера в раздел с “Расширенные” и в поле класс, вписать – border-animation (без точки!).
После этого вы копируете код, и добавляете его снова в этом же разделе с расширенными в раздел custom css (если вы используете Elementor PRO). Если вы используете бесплатную версию элементора, тогда заходите в админке в раздел “Внешний вид > Настроить” и переходите в раздел “Произвольные стили” и туда добавляете этот код.
Разбираем код
Строка 3.
Здесь вы задаете фон контейнера. В этом коде я указал цвет #000 (черный).
Строка 10 – 13.
Эти строки отвечаю за толщину рамки, в этом коде толщина 2 пикселя, но, если вы хотите сделать больше. Тогда в 10 и 11 строке укажите к примеру -4px (толщина 4 пикселя) и в 12-13 строки в скобках укажите (100% + 8px), то есть в скобках к 100 процентам мы добавляем толщину двух рамок.
Строка 14.
В этой строке вы задаёте цвета, которые будут переливаться в рамке, я добавил много цветов, но вы можете убрать часть из них и заменить на свои.
Строка 29.
В этой строке вы указываете длительность анимации. Сейчас стоит длительно 20s, но вы можете сделать что бы всё было быстрее и указать 10 секунд (10s).
Строка 44.
В этой строке вы можете изменить размер разброса тени. Сейчас тень отбрасывается на 50 пикселей от вашего контейнера, если это много – тогда сделайте меньше 🙂
