В этой статье мы покажем, как легко анимировать фоновый градиент с помощью CSS.
В предыдущей статье мы показали, как добавить эффекты градиента и узоры к тексту.
Обязательно прочтите эту статью, если вы не уверены, как мы пришли к такому результату, поскольку мы будем опираться на этот пример ниже.
Ради этой демонстрации давайте добавим несколько дополнительных цветов к нашему градиентному фону:
h1 {
background-image: linear-gradient(
45deg,
#ffb3ba,
#c49c6e,
#bfbf76,
#77b084,
#ff7e74,
#3b82f6,
#c084fc,
#db2777
);
}
Если мы на мгновение отключим background-clip: text и text-color: transparent, то получим лучшее представление о том, как наш градиент заполняет поле содержимого текста.
Теперь давайте пройдемся по шагам анимации нашего фонового градиента.
Чтобы анимировать наш градиентный фон, нам нужно сделать его больше, чем поле содержимого текста, чтобы мы не могли видеть все сразу. Мы можем сделать это с помощью удобного свойства background-size. (Вы можете прочитать все о размере фона здесь.)
Я собираюсь установить ширину нашего фонового градиента в три раза больше ширины нашего элемента заголовка:
h1 {
background-size: 300% 100%;
}
Теперь в любой момент времени будет видна только треть градиентного фона, как показано ниже.
Далее мы настроим анимацию, которая будет перемещать фон, чтобы со временем мы могли видеть разные его части.
Мы можем настроить простое правило анимации следующим образом:
h1 {
animation: gradientAnimation 8s linear infinite;
}
Это позволит перемещать фон вперед-назад каждые 16 секунд.
Далее мы настроим оператор @keyframes:
@keyframes gradientAnimation {
0% {
background-position: 0;
}
to {
background-position: 100%;
}
}
Эта простая @keyframes инструкция будет перемещать наш фон из верхнего левого угла в нижний правый каждые восемь секунд.
На рисунке ниже мы снова отключили background-clip: text и color: transparent, чтобы видеть, что происходит в фоновом режиме.
Как только мы снова включим background-clip: text и color: transparent, мы увидим готовый продукт.
Довольно круто!
В нашей статье о добавлении эффектов градиента и узоров к тексту мы также использовали цветочное фоновое изображение.
Давайте попробуем анимировать и этот фон. Мы сделаем это немного по-другому, так как не хотим искажать фоновое изображение.
Давайте удалим background-size: contain из исходной демонстрации и вообще не будем устанавливать размер фона. Это оставляет нас с этим:
h1 {
color: transparent;
-webkit-background-clip: text; /* Edge, Chrome */
background-clip: text; /* Safari, FF */
background-image: url(floral.jpg);
-webkit-text-stroke: 1px #7512d7;
text-stroke: 1px #7512d7;
animation: gradientAnimation 20s linear infinite;
animation-direction: alternate;
}
@keyframes gradientAnimation {
0% {
background-position: 0;
}
to {
background-position: 100%;
}
}
Результат показан в демо-версии CodePen ниже.
Попробуйте отключить background-clip: text и text-color: transparent на мгновение, если хотите увидеть, что происходит в фоновом режиме.
Наше фоновое изображение по умолчанию повторяется, что выглядит не так уж плохо для данного конкретного изображения. (Просто из интереса попробуйте добавить background-repeat: no-repeat чтобы посмотреть, что получится без повторяющегося фона.) В других ситуациях, когда фоновое изображение не имеет хорошей мозаики, вы можете захотеть предотвратить повторение изображения, а затем использовать background-size, чтобы увеличить изображение, как мы сделали с градиентным фоном выше. Например:
h1 {
background-repeat: no-repeat;
background-size: 120%;
}
Вот результат этого в нашей цветочной демонстрации.
Мы могли бы создавать гораздо более эффектные анимации, чем эта, но целью было упростить ее здесь. Вы можете углубиться в ключевые кадры и анимацию CSS. Вы также можете поиграть со временем анимации, углом наклона градиента и так далее.
Как упоминалось в предыдущей статье, получайте удовольствие от этого, но не переусердствуйте, так как слишком большая часть такого рода анимации может раздражать. Тонкий анимированный фон в заголовке может просто добавить интерес или интригу, необходимые для привлечения вашей аудитории.
Другие статьи по теме:
<animateMotion> предоставляет способ определить, как элемент перемещается по траектории движения. В этой статье Пол Скэнлон делится идеей о том, как использовать это, анимируя гоночные автомобили в бесконечном цикле так же просто, как раз-два-три!
В этом взаимосвязанном мире, где у людей есть множество устройств, обеспечение бесперебойной работы вашего сайта на всех из них — это необходимость, а не опция.
clip-path в CSS позволяет указать конкретную область элемента для отображения, а остальная часть скрыта (или “обрезана”)...
grid-template-rows и grid-template-columns свойства теперь можно анимировать во всех основных веб-браузерах! Что ж, CSS Grid уже давно технически поддерживает анимацию, так как она встроена прямо в спецификацию модуля компоновки CSS Grid Level 1.
Существует множество вариантов для определения размера и расположения фоновых изображений с помощью CSS. В этой статье мы рассмотрим, как использовать object-fit для размещения изображений на определенном пространстве и как использовать object-position для правильного позиционирования в этом пространстве.
Первая статья в этом году будет полностью посвящена цитатам в тексте и такому замечательному CSS тегу, как <blockquote>, а также оформлению цитат с помощью CSS стилей.
