Анимация градиентов текста с помощью CSS


НАДЕЛЕНИЕ ТЕКСТА СВЕРХСПОСОБНОСТЯМИ С ПОМОЩЬЮ CSS.

Каждый сайт должен содержать надписи о том, о чем бы он ни был. При создании сайтов разработчику приходится изменять текст, чтобы придать ему привлекательный вид с помощью CSS.

Анимация градиентов текста с помощью css

Градиенты – это способ сочетания двух или более цветов вместе, с помощью прогрессивных переходов, т.е. когда два цвета сочетаются, они не сочетаются в равных пропорциях, они смешиваются, постепенно переходя в свои цвета.

Пример равного соотношения,

Пример прогрессивных переходов (градиенты)

Этапы анимации текстового градиента

i. Добавьте свойство background в нужный селектор и определите тип градиента, который вы хотите использовать.
Вы можете посмотреть типы градиентов и их примеры здесь В этой статье я буду использовать свойство фона под названием linear-gradient.
Выберите два или более цветов, с которыми вы хотите работать, и добавьте их.
Полученный код должен выглядеть следующим образом

Используя linear-gradients, вы можете указать направление, в котором вы хотите, чтобы цвета переходили друг в друга.
Например, сверху вниз, снизу вверх, справа вверху, слева вверху, слева внизу.
Вы также можете указать направления в углах.

Вот формат;

Для этой статьи я укажу направления в углах.
Результирующий код должен быть

.selector{
background: linear-gradient( -46deg, #6bc5f8, #cf59e6);
}

ii. Добавьте в селектор CSS background clip: text; и background size: 400% 400%;. Это свойство указывает фону принимать форму текста, который он покрывает.
Это свойство CSS принимается не всеми браузерами, поэтому мы должны добавить еще одно свойство, чтобы оно правильно функционировало в большинстве браузеров.

В результате код снова будет выглядеть следующим образом:

.selector{
background: linear-gradient( -46deg, #6bc5f8, #cf59e6);
background-clip: text;
background size: 400% 400%;
-webkit-background-clip: text;
}
Вход в полноэкранный режим Выход из полноэкранного режима

iii. С помощью описанных выше шагов вы успешно создали текстовый градиент. Вам осталось добавить свойство color к вашим селекторам, чтобы цвет текста не влиял на градиент. Это можно сделать, добавив в код свойство -webkit-text-fill-color: transparent;.
Это дает:

.selector{
background: linear-gradient( -46deg, #6bc5f8, #cf59e6);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Таким образом, вы успешно создали текстовый градиент с помощью CSS.
Вы должны знать, что текстовые градиенты не анимируются в CSS, поэтому для их анимирования нужно добавить несколько трюков (почему бы и нет, мы же на css-tricks.com).

АНИМИРОВАТЬ ТЕКСТОВЫЙ ГРАДИЕНТ.

Шаги:
i. Как и все анимации в CSS, вы должны задать вашему селектору свойство animation, которое включает в себя animation name, animation-duration, animatio-iteration-count(Это свойство определяет, сколько раз будет запущена анимация. Мы пишем код для текстового градиента, поэтому анимация должна запускаться бесконечно), animation-timing-function (Функция анимации).

В результате код будет выглядеть следующим образом

.selector{
background: linear-gradient( -46deg, #6bc5f8, #cf59e6);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: textGradient;
animation-duration: 2s,
animation-iteration-count: infinite;
animation-timing-function: ease;
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Шаг ii.

Создаем ключевые кадры (Если вы не знаете, ключевые кадры – это способ создания анимации в CSS. Вот ссылка, чтобы прочитать об этом)

Дальше читайте внимательно.
Хитрость успешной анимации текстового градиента заключается в изменении его исходной позиции.
Это CSS свойство устанавливает начальную позицию для каждого фона. и позиция является относительной к его слою.
О свойстве background читайте здесь

Это будет окончательный код для анимации ключевых кадров

@keyframes Textgradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
Вход в полноэкранный режим Выход из полноэкранного режима

Объясняя этот код, мы имеем

0%{
background-position: 0% 50%
}

Это относительно свойства animation-duration. Это означает, что в 0% от 2с, что равно 0%, т.е. в начале анимации, установите background-position в 0% 50%.

50% {
background-position: 100% 50%;
}

Это означает, что при 50% от 2 с, что составляет 50%, т.е. 1 с анимации, установите положение фона на 100% 50%

100% {
background-position: 0% 50%;
}

Это означает, что на 100% от 2 с, что составляет 100%, т.е. в конце анимации, установите положение фона на 0% 50%.

Таким образом, вы успешно анимировали текстовый градиент.

Пожалуйста, комментируйте любые вопросы, и я постараюсь ответить на них как можно лучше.

Оцените статью
Procodings.ru
Добавить комментарий