Рождественская анимация текста с помощью CSS
31-октября-2022, 21:36 301 0
Это простая, но симпатичная текстовая анимация на чистом CSS , которая позволяет добавить на ваш веб-сайт приятный текстовый эффект рождественской конфеты. Эффект имитирует традиционные европейские красные и белые полосы для текста. Ну и сам пример.
HTML
<h1>Пример</h1>CSS
h1 {
--color1: #1528ec;
--color2: #ff0a0a;
font-family: "Open Sans", sans-serif;
text-align: center;
font-size: 46px;
background: repeating-linear-gradient(
45deg,
var(--color1),
var(--color1) 30px,
var(--color2) 30px,
var(--color2) 60px
);
background-clip: text;
color: transparent;
-webkit-background-clip: text;
animation: 40s linear 0s infinite move;
}
@keyframes move {
from {
background-position: 0px;
}
to {
background-position: 1000px;
}
}
