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

4 года назад

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

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

Ответы

Вы можете использовать свойство 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 можно проверить реализовано ли данное свойство в конкретном браузере.

2 года назад

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

1 месяц

Анимация CSS

Навык создания анимаций в CSS для улучшения пользовательского опыта и повышения востребованности на рынке

1 месяц

Позиционирование в CSS

Навык разработки адаптивных интерфейсов, позволяющий создавать удобные и функциональные решения для различных устройств

5 месяцев

Профессиональная верстка

Навык адаптивной вёрстки с современными подходами для корректного отображения сайтов на любых устройствах и разрешениях

1 месяц

Основы веб-разработки

Основы HTML, CSS, блочная модель, основы Javascript, синтаксис, арифметика, условия, циклы, функции, поиск ошибок

10 месяцев

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

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