! Сегодня

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

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

Поделиться

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
2+2*2= ?

Редакторы выбирают

Web и Технологии