Как сделать анимацию для текста используя HTML & CSS шаг за шагом || Text animation CSS

Всем привет!

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

Если вам понравится данное видео, поставьте пожалуйста лайк и напишите комментарий в поддержку.

Это способствует развитию канала.

Спасибо и приятного просмотра!

Итак, приступим к созданию анимации для текста.

У нас есть файл index.html, style.css, стили подключены, также подключены шрифты.

И в стилях добавлены простые обнуляющие стили и добавлены стили для изменения бэкграунда и размещения элемента по центру.

Итак, давайте в index.html добавим разметку, создадим заголовок первого типа с названием класса Text и туда добавим.

Укажем «Content Web Design».

Откроем структуру.

Откроем страницу в браузере с помощью Live Server.

И посмотрим, что у нас добавилось.

Итак, как мы видим, элемент сразу размещается по центру.

И есть наш контент.

Давайте свернем браузер в половину и Visual Studio Code, чтобы лучше было видно, что меняется на странице.

Перейдем во вкладку «Стили».

И здесь добавим некоторые стили для того, чтобы применить анимацию для этого текста.

Обратимся к селектору класса Text и изменим размер Shift.

Добавим фон сайз, выберем функцию Calc и сделаем, чтобы Shift был адаптивный.

Укажем 10VW+.

Плюс 5 рэм укажем, чтобы у нас был шрифт побольше.

И он у нас соответственно адаптировался при уменьшении и увеличении ширины области просмотра.

Также добавим еще тень для текста с помощью свойства TextShadow.

Смещение по горизонтали будет 0, 0,5 рэм по вертикали, 1 рэм будет размытие.

И выберем также функцию RGP, функцию цвета темного 0,0,0 с затемнением на 30%.

Добавим Background.

Background у нас будет функция Linear Gradient.

Разворот на 45 градусов.

Первый цвет будет у нас темный на 20%.

Второй цвет это будет синий цвет с таким вот цветовым кодом на 70%.

И также добавим еще третий цвет, также темный на 80%.

И так вот у нас отображается линейный градиент для бэкграунда.

Теперь нам нужно добавить еще свойство WebKit.

BackgroundClip и укажем текст.

И также добавим бэкграунд.

клип также значением text чтобы наш бэкграунд исчез и он как бы был позади этих букв также еще добавим webkit text fill color заполнение добавим значение transparent и получится добавить такой вот эффект то есть у нас как бы этот бэкграунд стал

Не позади всего элемента, а конкретно внутри этих букв.

Теперь нам нужно добавить Background Size.

Размер укажем 300% и Auto.

И добавим свойство Animation.

Дадим название для анимации Text.

Укажем продолжительность 7 секунд.

Скорость укажем Easy In Out.

Выберем, чтобы она была бесконечной, Infinite.

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

Для этого нужно указать Alternate.

Теперь нам нужно эту анимацию активировать.

Для этого мы будем использовать правило Keyframes.

Вместо Identifier отсюда скопируем название анимации, вставляем сюда.

И указываем 0%.

Background Position будет у нас на 200%.

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

То есть она проходит в одну сторону и возвращается обратно.

Если мы, например, уберем Alternate.

Давайте отсюда вырежем его.

То анимация будет идти только в одну сторону.

И будет идти такой вот скачок.

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

Если мы добавим, вернем обратно Alternate, то будет более аккуратно.

Анимация двигается в одну сторону и возвращается плавно обратно.

И так по бесконечному кругу.

Также мы можем управлять размером бэкграунда.

Можем указать 400%, сделать его побольше.

Будет немного изменяться у нас.

Вид для анимации для текста.

Также можем указать, к примеру, 100%.

И так далее.

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

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

На этом все.

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

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