Как реализовать анимацию переливающегося текста css?

Question

Цвет по тексту должен плавно переливаться по буквам. Например как на этом сайте - https://bulavin-dubai.com/

Answer 1

Такого эффекта можно добиться и средствами CSS. Поиграться можно здесь (CodePen).

h1, h2 {
  text-align: center;
  font-family: Roboto, Arial, Helvetica, sans-serif;
  color: transparent;

  background-image: linear-gradient(to right, #000 50%, transparent 50%);
  background-size: 200%;
  background-repeat: no-repeat;
  
  animation: slide-bg 10s linear infinite;
}

h1 {
  -webkit-text-stroke: 1px #000;
  text-stroke: 1px #000;
  -webkit-background-clip: text;
  background-clip: text;
}

h2 {
  -webkit-text-stroke: 1px #bebebe;
  text-stroke: 1px #bebebe;
}

@keyframes slide-bg {
  from {
    background-position-x: 100%;
  }
  to {
    background-position-x: -100%;
  }
}

<link href="https://necolas.github.io/normalize.css/8.0.1/normalize.css" rel="stylesheet">

<h1>Vestibulum interdum, nulla id venenatis viverra.</h1>
<h2>How it works</h2>

БЛОГ НА HUSL

Как реализовать анимацию переливающегося текста css?

Ответы (1 шт):