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

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

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

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

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

<h1 class="boujee-text">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%;
}

Чтобы прикрепить фон к тексту, установите transparent color и установите 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 .

Вот этот совет в быстрой видео-форме! ⚡️

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

Оставайся потрясающим! ʕ •ᴥ•ʔ

Изображение героя Владислава Клапина на Unsplash