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

Как создать анимированный градиентный текст с помощью ограниченных дополнительных параметров и свойства background-clip

Jhey Tompkins

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

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

<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.

Посмотрите короткое видео с этим советом. ⚡️

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

Оставайтесь потрясающими!