Логотип Хекслета
/
Вопросы и ответы
/
HTML
/

Как сделать переливающийся текст в html

Как сделать переливающийся текст в html

4 года назад

Человек-Молекула

Присоединяйтесь к нашему Telegram-сообществу

Ответы

1

Вы можете использовать свойство CSS background-clip и background-image в сочетании с linear-gradient, чтобы создать переливающийся текст в HTML.

Например, следующий код создаст текст, который переливается от красного до синего цвета:

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      background: linear-gradient(to right, red, blue);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
  </style>
</head>
<body>
  <h1>Переливающийся текст</h1>
</body>
</html>

Здесь мы установили фоновое изображение как линейный градиент, который идет от красного до синего цвета с помощью linear-gradient. Затем мы применили свойство background-clip к тексту, чтобы оно совпадало с фоном и стало переливаться в соответствии с ним. Свойство color было установлено на transparent, чтобы сделать текст невидимым и позволить фону показаться внутри текста.

Обратите внимание, что это свойство не поддерживается во всех браузерах. На сайте Can I use можно проверить реализовано ли данное свойство в конкретном браузере.

3 года назад

Алексей Алешин

Похожие вопросы