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

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

Самый лучший и самый правильный выход из ситуации: забыть все плохое, сохранить в памяти хорошие моменты, просто сказать спасибо за все что мы пережили. И пойти дальше. Потому что все, что с нами происходит — к лучшему.

196 0

31-октября-2022, 21:36   Web и Технологии

Рождественская анимация текста с помощью 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

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
Человек быстро решит загадку пять умножить на пять и минус 25 ?