! Сегодня

Рождественская анимация текста с помощью CSS

Если хочешь узнать человека, не слушай, что о нём говорят другие, послушай, что он говорит о других.

31-октября-2022, 21:36 300 0

Рождественская анимация текста с помощью CSS

Это простая, но симпатичная текстовая анимация на чистом 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;
  }
}