Как добавить анимацию цветов внутри текста используя HTML & CSS || Gradient Text Animation CSS

Всем привет!

В этом видео я покажу, как сделать анимацию линейного градиента внутри текста, используя HTML и CSS шаг за шагом.

Приступим к созданию анимации линейного градиента внутри текста.

У нас есть файл index.html, есть стили, стили подключены и внутри баги.

Добавим заголовок первого типа и туда укажем content.gradient.text.animation.

Перейдем в стили, обратимся к универсальному селектору, обнулим менеджеры, пэддинги и добавим свойства box-size в border-box.

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

Итак, мы видим, есть наш заголовок первого типа.

Давайте свернем браузер половину и визуал студио код.

Обратимся в стиле к баги и для него укажем высота 100, VH.

Бэкграунд сделаем затемненным темного цвета.

И размещение сделаем нашего заголовка по центру.

Укажем display flex, justify content будет центр и align icons также будет центр.

Теперь обратимся к заголовку первого типа и для него укажем font-size 100px, background-clip у нас будет text и также нужно добавить свойство WebKit, background-clip также с значением text.

Укажем color с ключевым словом transparent.

У нас текст исчез, но на странице есть, просто его не видно из-за того, что есть добавлено

свойства color со значением transfer и давайте добавим background-image сюда добавим линейный градиент и укажем 45 градусов будет разворот и добавим цвета для этого нам нужно перейти на сайт colorion.co и отсюда мы можем

Взять цвета, нажимаем на вкладку Tools и здесь есть Base Colors, основные цвета.

Можно отсюда брать цвета, допустим скопируем Deep Ink, ставим сюда и через запятую.

красный темно-оранжевый желтый лайм можно вот такой вот цвет выбрать бирюзовый

Аква.

Синий.

Допустим, какой-то такой, к примеру.

Сюда мы добавили разных цветов.

Видим, вот есть уже градиент.

Он добавился внутри текста.

Теперь нам нужно сделать анимационный эффект для нашего линейного градиента.

Здесь мы также укажем свойства background-size будет 400% и 400% и нам нужно добавить анимации.

Свойства Animation, добавим название, 10 секунд, easy и бесконечность.

Теперь обратимся к функции keyframes.

Укажем туда название анимации Move.

И здесь внутри укажем 0% и Background Position, чтобы было смещение.

Первое значение в нуле будет 0,0.

И скопируем этот элемент еще 4 раза.

И здесь укажем 25%.

Значение меняется на 0.

50 процентов значение меняется на 0 и 100 процентов 75 точнее здесь на 50 процентов будет сто процентов и не сто процентов а для 70 75 процентов у нас будет значение

будет также 00.

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

Вот этот линейный градиент у нас переливается внутри текста.

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

На этом все.

Спасибо за просмотр и успехов в обучении.

Если вам понравилось данное видео, ставьте лайк и подписывайтесь на мой канал.