Быстрый совет по CSS! Анимированный градиентный текст

Давайте создадим эффект анимированного градиентного текста с заданными настройкой и параметром background-clip.

Джей Томпкинс

Перейдите на CodePen и создайте новый пример.

Создайте разметку для вашего текста. Давайте используем заголовок со словом "Speedy":

<h1 class="boujee->text&q<uot>;Hello!/h1

Затем давайте придадим нашему body более темный background-color :

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: hsl(0 0% 20%);
}

Увеличьте font-size нашего текста. Используйте clamp для адаптивного отображения:

.boujee-text {
  font-size: clamp(3rem, 25vmin, 8rem);
}

Создайте два пользовательских свойства для используемых цветов. Примените linear-gradient к background , используя эти цвета, и поверните его на 90 градусов:

.boujee-text {
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / 100% 100%;
}

Создайте пользовательское свойство, которое можно использовать для горизонтального размера фона. Используйте его для background-size-x :

.boujee-text {
  --bg-size: 400%;
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / var(--bg-size) 100%;
}

Чтобы обрезать фон по тексту, установите color на transparent и задайте background-clip: text :

.boujee-text {
  --bg-size: 400%;
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / var(--bg-size) 100%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

На этом этапе вы можете оставить все как есть и поэкспериментировать с параметром background-position и градиентом, используемым в background-image . Или же вы можете анимировать этот градиент по тексту. Сначала определите ключевой кадр для анимации. Для этого будет использоваться пользовательское свойство --bg-size которое вы определили ранее. Это хороший пример пользовательских свойств с ограниченной областью видимости, упрощающих поддержку.

@keyframes move-bg {
  to {
    background-position: var(--bg-size) 0;
  }
}

Затем примените анимацию с помощью animation :

.boujee-text {
  --bg-size: 400%;
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / var(--bg-size) 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  animation: move-bg 8s infinite linear;
}

Чтобы пойти еще дальше, вы можете обернуть свой код анимации в медиазапрос, чтобы учитывать предпочтения пользователя в отношении движения:

@media (prefers-reduced-motion: no-preference) {
  .boujee-text {
    animation: move-bg 8s linear infinite;
  }
  @keyframes move-bg {
    to {
      background-position: var(--bg-size) 0;
    }
  }
}

Готово! 🎉 Вы создали анимированный градиентный текст с помощью CSS, используя ограниченные по области видимости пользовательские свойства и свойство background-clip .

Вот этот совет в коротком видеоформате! ⚡️

Предпочитаете в формате твита ? 🐦

Оставайтесь великолепными!