Анимация текста играет важную роль в придании динамичных и привлекательных визуальных эффектов текстовому контенту любого веб-сайта. Анимация статического текста улучшает общий пользовательский интерфейс.
Использование данного эффекта поможет повысить вовлеченность пользователей, взаимодействие и внимание. Сегодня мы собираемся создать анимацию градиентного текста, которую можно использовать на главной странице веб-сайта или любом другом элементе. В следующем видеоуроке показаны шаги по ее созданию. Чтобы получить четкое представление, посмотрите видео.
Вы можете посмотреть видео демонстрацию, попробовать сверстать самому по видео или скачать архив с готовым кодом. Если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент.
В архиве находится:
- Исходные файлы HTML
- Исходные файлы CSS
- Иконки шрифтов
Градиент CSS - это техника веб-дизайна, которая создает плавный переход между двумя или более цветами. Градиентный цвет может содержать один или несколько цветов. Домашняя страница или другой элемент, созданный с использованием градиентного фона CSS, обладает большей визуальной привлекательностью, чем любой другой элемент.
Эту анимацию градиента можно использовать в фоновых изображениях, кнопках, ссылках и других элементах интерфейса для придания им более привлекательного вида. Мы придали тексту заголовка в этом фрагменте градиентный цвет. Затем мы получили желаемую текстовую анимацию, изменив ее значение background-position с помощью свойства CSS keyframes animation.
Исходный код
Для создания этой анимации фона текста с градиентом вам необходимо создать HTML и CSS-файл. После этого скопируйте и вставьте следующие коды в свой проект. В случае возникновения какой-либо ошибки вы можете загрузить тот же код с помощью кнопки загрузки ниже.
Если у вас возникнут какие-либо проблемы при создании этого кода, вы можете скачать исходный код, нажав на кнопку скачать. Кроме того, оставляйте свои вопросы, предложения и отзывы в комментариях ниже.
HTML КОД:
<!DOCTYPE html>
<html lang="xxz">
<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 КОД:
<style>
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%;
}
}
</style>
