(Вы можете найти видеоверсию этой статьи на YouTube! 📺)

Проверьте интерактивная версия этого блога запись в моем собственном блоге! (Включает пользовательские виджеты, созданные, чтобы помочь вам быстрее понять ключевые понятия!)

Давайте узнаем, как создавать анимированные градиентные тексты (те, которые вы, возможно, знаете из vercel.com). Вот что мы построим! 👇🏻

анимированный заголовок с надписью анимированный.  градиент.  текст.

Мы будем использовать простой HTML и CSS, но не стесняйтесь использовать свой любимый пользовательский интерфейс или стиль.
библиотека, как вы следуете!


Создание градиентного текста (без анимации)

Сначала мы создадим текст с градиентным фоном, но нет анимация.

Для начала давайте добавим некоторую HTML-разметку для совместной работы и применим некоторые стандартные стили CSS:

<head>
  <style>
    body {
      background: #000;
      padding: 64px;
      margin: 0;
      font-family: sans-serif;

      /* make the rendered glyphs a bit smoother around the edges */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    h1 {
      margin: 0;
      font-size: 160px;
      font-weight: 800;
      color: #fff;
      letter-spacing: -0.03em;
    }

    .heading-line {
      line-height: 1;
      display: block;
      position: relative;
      text-align: center;
    }
  </style>
</head>

<body>
  <h1>
    <span class="heading-line heading-line-first">Animated.</span>
    <span class="heading-line heading-line-second">Gradient.</span>
    <span class="heading-line heading-line-third">Text.</span>
  </h1>
</body>
Войти в полноэкранный режим

Выйти из полноэкранного режима

Если хочешь, можешь надеть модные штаны. nth-child(...) селекторы вместо heading-line-first и т.д. 😇

Чтобы добавить градиенты, мы установим color к transparent, background-image к linear-gradient(...) с нашими любимыми цветами и background-clip к text чтобы отображать градиент только в пределах границ текста. 👇🏻

.heading-line {
  /* ... */

  /* set the color of the text to transparent */
  color: transparent;

  /* we need to clip the gradient background so that
  so only the text bit will have the gradient background
  (otherwise the entire rectangle the text is in would have it) */
  -webkit-background-clip: text;
  background-clip: text;
}

.heading-line-first {
  background-image: linear-gradient(to left, #ed8936, #ed64a6);
}

.heading-line-second {
  background-image: linear-gradient(to left, #38b2ac, #0bc5ea);
}

.heading-line-third {
  background-image: linear-gradient(to left, #ecc94b, #48bb78);
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Вот что у вас должно получиться 👇🏻

заголовок говоря анимированный.  градиент.  текст.  с градиентным фоном и без анимации


Анимация градиента

В этом разделе мы собираемся анимировать только градиент фон. Чтобы добавить в анимацию больше остроты, мы также собираемся анимировать белый предыстория каждого заголовка. Это будет рассмотрено в следующем разделе!

Теперь у нас есть прочная основа для реализации анимации!

Давайте подумаем, как анимация должна выглядеть с визуальной точки зрения.

Когда страница загружается, какого цвета должны быть все заголовки? Вероятно, это должно выглядеть так, где у первого заголовка градиентный фон, а у остальных белый фон 👇🏻

заголовок говоря анимированный.  градиент.  текст.  первая строка имеет градиентный фон, а остальные — белый фон

Затем, через некоторое время, первый градиент должен начать исчезать, а второй должен начать исчезать. 👇🏻

заголовок говоря анимированный.  градиент.  текст.  первые две строки имеют полуградиентный полубелый фон, а третья имеет полностью белый фон

Наконец, первая линия должна быть белой, а вторая должна иметь градиент. 👇🏻

заголовок говоря анимированный.  градиент.  текст.  первая и третья строки имеют градиентный фон, а вторая строка имеет белый фон

То же самое относится и к третьей строке. Как только это будет завершено, снова появится градиент первой линии, и цикл перезапустится.

Вы можете видеть, как градиенты появляются и исчезают, когда мы перемещаем ползунок 👇🏻

заголовки меняют цвет фона с градиента на белый при перемещении ползунка

Чтобы получить доступ к интерактивный виджет вы можете играть с, посмотреть эту статью в моем блоге

Чтобы сделать анимацию, мы хотим разделить ее на 6 частей. В каждой части либо

  • один заголовок будет иметь градиентный фон (остальные будут иметь белый фон)
  • два заголовка будут появляться/исчезать

Мы можем использовать таблицу ниже, чтобы узнать, какое именно поведение мы хотим смоделировать в CSS:

ЧастьЗаголовок 1Заголовок 2Заголовок 3
1ГрадиентНет градиентаНет градиента
2ИсчезновениеИсчезновениеНет градиента
3Нет градиентаГрадиентНет градиента
4Нет градиентаИсчезновениеИсчезновение
5Нет градиентаНет градиентаГрадиент
6ИсчезновениеНет градиентаИсчезновение

Сейчас мы сделали большую часть тяжелой работы. Теперь пришло время перевести приведенную выше таблицу в CSS.

Главное, что мы будем анимировать, это opacity градиент фона.

Когда мы хотим, чтобы градиент был виден, мы установим его на 1 и когда мы хотим, чтобы он был невидимым, мы установим его в 0.

Однако, прежде чем мы сможем это сделать, нам нужно убедиться, что под градиентом есть белый фон.

Для этого нам нужно обернуть строки заголовка в span элементы, добавить класс heading-line-gradient к ним и использовать ::before псевдоэлемент.

<h1>
  <span class="heading-line heading-line-first">
    <span class="heading-line-gradient">Animated.</span>
  </span>
  <span class="heading-line heading-line-second">
    <span class="heading-line-gradient">Gradient.</span>
  </span>
  <span class="heading-line heading-line-third">
    <span class="heading-line-gradient">Text.</span>
  </span>
</h1>
Войти в полноэкранный режим

Выйти из полноэкранного режима

.heading-line-gradient будет иметь градиентный фон и .heading-line::before будет иметь белый фон.

/* move these style from .heading-line 
   to .heading-line-gradient */
.heading-line-gradient {
  color: transparent;
  background-image: linear-gradient(to left, #ed8936, #ed64a6);
  -webkit-background-clip: text;
  background-clip: text;
}

/* move this from .heading-line-first */
.heading-line-first > .heading-line-gradient {
  background-image: linear-gradient(to left, #ed8936, #ed64a6);
}

/* move this from .heading-line-second */
.heading-line-second > .heading-line-gradient {
  background-image: linear-gradient(to left, #38b2ac, #0bc5ea);
}

/* move this from .heading-line-third */
.heading-line-third > .heading-line-gradient {
  background-image: linear-gradient(to left, #ecc94b, #48bb78);
}

/* white text underneath the gradient text */
.heading-line::before {
  line-height: 1;
  display: block;
  position: absolute;
  color: #fff;
  pointer-events: none;
  width: 100%;
}

.heading-line-first::before {
  content: "Animated.";
}

.heading-line-second::before {
  content: "Gradient.";
}

.heading-line-third::before {
  content: "Text.";
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Наконец, давайте сосредоточимся на анимации! Начнем с первого заголовка. Мы будем анимировать opacity принадлежащий heading-line-gradient учебный класс.

Чтобы определить анимацию, мы будем использовать @keyframes правило, и мы будем использовать animation свойство применять его.

Мы установим продолжительность анимации на 8s и установить infinite как количество итераций. 👇🏻

@keyframes first_heading_gradient {
  0%,
  /* 16.667 = 1/6 */
  16.667% {
    opacity: 1;
  }

  /* 33.333% = 2/6 */
  33.333%,
  /* 83.333% = 5/6 */
  83.333% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.heading-line-first > .heading-line-gradient {
  /* ... */
  animation: first_heading_gradient 8s infinite;
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Мы сделаем то же самое для второго и третьего заголовков. 👇🏻

@keyframes second_heading_gradient {
  0%,
  16.667% {
    opacity: 0;
  }

  33.333%,
  50% {
    opacity: 1;
  }

  66.667%,
  100% {
    opacity: 0;
  }
}

@keyframes third_heading_gradient {
  0%,
  50% {
    opacity: 0;
  }

  66.667%,
  83.333% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.heading-line-second > .heading-line-gradient {
  /* ... */
  animation: second_heading_gradient 8s infinite;
}

.heading-line-third > .heading-line-gradient {
  /* ... */
  animation: third_heading_gradient 8s infinite;
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Вот что у вас должно получиться 👇🏻

заголовок говоря анимированный.  градиент.  текст.  будучи анимированы.


Анимация белого фона

Чтобы анимация выделялась, нам нужно также анимировать белый фон заголовка.

Взгляните еще раз на то, чего мы хотим достичь 👇🏻

анимированный заголовок с надписью анимированный.  градиент.  текст.

Вы можете заметить, что белый фон как бы исчезает, когда исчезает градиент, и наоборот.

Эффект тонкий, но он придает анимации немного больше остроты.

Однако мы не можем анимировать белый фон на протяжении всей анимации градиента. Это выглядело бы странно, так как в какой-то момент текст был бы почти невидим.

Вместо этого мы начнем исчезать белый фон только тогда, когда градиент находится на полпути к анимации постепенного появления, и наоборот.

Поэкспериментируйте с этим виджетом, чтобы увидеть, как должна вести себя непрозрачность градиента и белого фона 👇🏻

одна строка заголовка анимируется при перемещении ползунка.  при перемещении ползунка можно увидеть, как меняется белый фон и непрозрачность градиента.

Теперь, когда мы лучше понимаем, когда анимировать белый фон, давайте создадим таблицу, которую позже переведем в CSS.

В этой таблице рассматривается только первый заголовок, но та же логика применима и ко второму и третьему заголовкам.

Теперь, когда мы анимируем и белый фон, нам нужно разделить анимацию на 12 шагов (вместо 6).

ЧастьНепрозрачность градиентаНепрозрачность белого фона
110
21 (начинают исчезать)0 (начинают исчезать)
30,5 (все еще исчезает)1 (уже исчез)
40 (исчез)1
501
601
701
801
901
100 (начать исчезать)1
110,5 (наполовину исчезло)1 (начать исчезать)
121 (исчез)0 (исчез)

Я знаю, что эта таблица кажется немного громоздкой и немного утомительной для составления.

Вы можете (и я настоятельно рекомендую вам) создать аналогичные таблицы для анимации второго и третьего заголовков.

В любом случае, мы проделали большую тяжелую работу, осталось выразить эту таблицу в CSS.

Начнем с первого заголовка. 👇🏻

@keyframes first_heading_white_text {
  0%,
  /* 16.667 = 2/12 */
  16.667% {
    opacity: 0;
  }

  /* 25% = 3/12 */
  25%,
  /* 16.667 = 9/12 */
  91.667% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.heading-line-first::before {
  /* ... */
  animation: first_heading_white_text 8s infinite;
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Аналогично, мы хотим анимировать белый фон второго и третьего заголовков. 👇🏻

@keyframes second_heading_white_text {
  0%,
  25% {
    opacity: 1;
  }

  33.333%,
  50% {
    opacity: 0;
  }

  58.333%,
  100% {
    opacity: 1;
  }
}

@keyframes third_heading_white_text {
  0%,
  58.333% {
    opacity: 1;
  }

  66.667%,
  83.333% {
    opacity: 0;
  }

  91.667%,
  100% {
    opacity: 1;
  }
}

.heading-line-second::before {
  /* ... */
  animation: second_heading_white_text 8s infinite;
}

.heading-line-third::before {
  /* ... */
  animation: third_heading_white_text 8s infinite;
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

🎉🥳 НАС ГОТОВО!!! 🥳🎉

анимированный заголовок с надписью анимированный.  градиент.  текст.


Исходный код

Вы можете найти исходный код для этого руководства на КодПесочница.

Если вам понравился этот урок, вы также можете проверить и подписаться на мой Канал YouTube а также мой блог!