Бегающая градиентная обводка вокруг шейпа в Тильда
Код создать эффект вращающегося бордер шейпа в Тильда.
С помощью этого кода вы сможете сделать такой же эффект анимированного бордер у shape в Tilda.
С помощью этого кода вы сможете сделать такой же эффект анимированного бордер у shape в Tilda.
Инструкция:
- Добавляем шейп в Zero-Block, задаем ему ширину, высоту и цвет.
- Задаем CSS-class «card» этому шейпу
- Копируем код ниже и вставляем в блок T123.
- Меняем в коде цвет на цвет шейпа из Zero-Block вот здесь «background-color: #0F0F0F» (это почти в самом конце кода).
<!--Бегающая обводка шейпа в Zero Block. Больше кода найду тут - https://t.me/breeze_tilda-->
<style>
@property --angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
.card {
width: 190px;
height: 254px;
background: #07182E;
position: relative;
display: flex;
place-content: center;
place-items: center;
overflow: hidden;
border-radius: 20px;
}
.card::before {
content: '';
position: absolute;
width: 200%;
height: 200%;
background: conic-gradient(
from var(--angle),
rgb(0, 183, 255) 0deg,
rgb(255, 48, 255) 90deg,
rgb(0, 183, 255) 180deg,
rgb(255, 48, 255) 270deg,
rgb(0, 183, 255) 360deg
);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: rotBGimg 3s linear infinite;
z-index: 0;
}
.card::after {
content: '';
position: absolute;
background: #07182E;
inset: 5px;
border-radius: 15px;
z-index: 1;
}
@keyframes rotBGimg {
to {
--angle: 360deg;
}
}
</style><!--Бегающая обводка шейпа в Zero Block. Больше кода найду тут - https://t.me/breeze_tilda-->
<style>
@property --angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
.card {
width: 190px;
height: 254px;
background:
linear-gradient(#07182E, #07182E) padding-box,
conic-gradient(from var(--angle), rgb(0, 183, 255), rgb(255, 48, 255)) border-box;
border: 5px solid transparent;
border-radius: 20px;
display: flex;
place-content: center;
place-items: center;
animation: rotBGimg 3s linear infinite;
}
@keyframes rotBGimg {
to {
--angle: 360deg;
}
}
</style>