! Сегодня
Главная » Web и Технологии » Рождественская анимация текста с помощью CSS

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

Настоящее хобби нашего поколения - это нытье и тупая болтовня ни о чем! Неудачные отношения, проблемы с учёбой, начальник-мудак. Это всё полная фигня. Если у тебя ничего не получается, то есть только один мудак - это ты. И ты сильно удивишься, если узнаешь, как много можно изменить, просто оторвав жопу от дивана!

31-октября-2022, 21:36   296   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;
  }
}

Поделиться

Tags

Имя Гагарина ?