Анимация фона текста с градиентом CSS / Gradient Text Background Animation

Анимация текста играет важную роль в придании динамичных и привлекательных визуальных эффектов текстовому контенту любого веб-сайта. Анимация статического текста улучшает общий пользовательский интерфейс.

Использование данного эффекта поможет повысить вовлеченность пользователей, взаимодействие и внимание. Сегодня мы собираемся создать анимацию градиентного текста, которую можно использовать на главной странице веб-сайта или любом другом элементе. В следующем видеоуроке показаны шаги по ее созданию. Чтобы получить четкое представление, посмотрите видео.

На нашем канале есть еще много видео по веб-дизайну. Если вам понравилось видео, вы можете подписаться на наш канал ВКонтакте или Boosty.

Градиент CSS - это техника веб-дизайна, которая создает плавный переход между двумя или более цветами. Градиентный цвет может содержать один или несколько цветов. Домашняя страница или другой элемент, созданный с использованием градиентного фона CSS, обладает большей визуальной привлекательностью, чем любой другой элемент.

Анимация фона текста с градиентом CSS / Gradient Text Background Animation

СКАЧАТЬ

Эту анимацию градиента можно использовать в фоновых изображениях, кнопках, ссылках и других элементах интерфейса для придания им более привлекательного вида. Мы придали тексту заголовка в этом фрагменте градиентный цвет. Затем мы получили желаемую текстовую анимацию, изменив ее значение background-position с помощью свойства CSS keyframes animation.

Исходный код

Для создания этой анимации фона текста с градиентом вам необходимо создать HTML и CSS-файл. После этого скопируйте и вставьте следующие коды в свой проект. В случае возникновения какой-либо ошибки вы можете загрузить тот же код с помощью кнопки загрузки ниже.

Если у вас возникнут какие-либо проблемы при создании этого кода, вы можете скачать исходный код, нажав на кнопку скачать. Кроме того, оставляйте свои вопросы, предложения и отзывы в комментариях ниже.

HTML КОД:


<!DOCTYPE html>
<html lang="en">
   <!--divinectorweb.com  -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gradient text animation</title>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <h2>Gradient <span>text effect</span></h2>
</body>
</html>

CSS КОД:


body{
  display: flex;
  justify-content: center;  
  align-items: center;
  height: 100vh;
  background: #000;
}
h2 {
	font-size: 200px;
	font-family: bebas neue;
	background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 300%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: animate 5s ease-in-out infinite;
	text-align: center;
	line-height: 0.9;
}
h2 span{
  font-weight: 300;
  font-size: 163px;
  display: block;
}
@keyframes animate{
  0%{
    background-position: 0 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0 50%;
  }
}