Активный
- Регистрация
- 28 Дек 2023
- Сообщения
- 251
- Автор темы
- #1
Данная модификация позволит сделать анимированные заголовки блоков
Less:
@90lvru-blurple: #5865F2;
@90lvru-green: #57F287;
@90lvru-fuchsia: #EB459E;
@keyframes fireGradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.block {
position: relative;
overflow: hidden;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, @90lvru-green, @90lvru-blurple, @90lvru-fuchsia);
background-size: 200% 200%;
animation: fireGradient 3s ease infinite;
}
}
@media (max-width: 900px) {
.block::before {
height: 2px;
}
}
Последнее редактирование модератором: