Бегающая градиентная обводка вокруг шейпа в Тильда
Код создать эффект вращающегося бордер шейпа в Тильда.
С помощью этого кода вы сможете сделать такой же эффект анимированного бордер у shape в Tilda.
С помощью этого кода вы сможете сделать такой же эффект анимированного бордер у shape в Tilda.
Инструкция:
- Добавляем шейп в Zero-Block, задаем ему ширину, высоту и цвет.
- Задаем CSS-class «box» этому шейпу
- Копируем код ниже и вставляем в блок T123.
- Меняем в коде цвет на цвет шейпа из Zero-Block вот здесь «background-color: #0F0F0F» (это почти в самом конце кода).
<!--Бегающая обводка шейпа в Zero Block. Больше кода найду тут - https://t.me/breeze_tilda-->
<style>
.box {
position: relative;
display: flex;
justify-content: center;
overflow: hidden;
align-items: center;
border-radius: 20px; /*здесь можно менять значение скргления шейпа*/
}
.box::before {
position: absolute;
content: '';
width: 130px;
height: 140%;
background: linear-gradient(#f00, #0f0); /*здесь можно указать цвета бегающей обводки*/
animation: animate 5s linear infinite;
}
@keyframes animate {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.box::after {
position: absolute;
content: '';
inset: 4px; /*здесь можно поменять ширину бегающей обводки*/
background-color: #0F0F0F; /*здесь укажите тот цвет, который указали в шейпе в Zero Block*/
border-radius: 16px; /*здесь также можно менять значение скргления внутреннего шейпа*/
}
</style>