Анимированный градиентный текст в CSS
На вашем веб-сайте могут быть некоторые элементы, на которые вы, возможно, захотите обратить внимание своих пользователей. Например, заголовок вашего поста в блоге, важное объявление или кнопка с призывом к действию.
И один из способов сделать это - использовать градиентные шрифты. Но еще лучше, если вы сможете анимировать эффект градиента на шрифте. Это выйдет более интереснее.
Оказывается, добиться такого эффекта не так уж сложно. Рассмотрим следующую HTML-разметку.
<div>
<p>Memento Mori</p>
</div>Мы будем использовать следующий CSS для анимации эффекта градиента в тексте.
p {
background: linear-gradient(
to right,
#7953cd 20%,
#00affa 30%,
#0190cd 70%,
#764ada 80%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
background-size: 500% auto;
animation: textShine 5s ease-in-out infinite alternate;
}Наряду с приведенным выше CSS, нам также нужно будет добавить следующую анимацию ключевого кадра.
@keyframes textShine {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}Здесь происходит следующее: мы анимируем свойство background-position элемента p от 0% до 100% в течение 5 секунд (5s) с помощью функции синхронизации easy-in-out. И мы делаем эту анимацию бесконечно.
Установка для свойства background-size значения 500% auto гарантирует, что эффект градиента будет применен ко всему тексту. А для свойства background-clip установлено значение text, чтобы эффект градиента применялся только к тексту, а не к фону.
Для свойств --webkit-text-fill-color и text-fill-color установлено значение transparent, чтобы текст не был виден. А в свойстве background установлен эффект градиента, который будет использоваться в качестве основы для анимации.
И это в значительной степени все. Вы можете настроить продолжительность анимации, функцию синхронизации и эффект градиента по своему вкусу. Например, создание анимированного абзаца или же небольшого текста.
Мы предоставляем CodePen, чтобы вы могли поиграть с приведенным выше кодом:
