Анимированный текст используя HTML & CSS || Animation Text using HTML & CSS

Всем привет!

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

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

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

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

Теперь перейдем в стили.

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

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

Давайте свернем браузер в половину и Visual Studio Code.

перейдем в стиле обратимся к универсальному селектору обнулим margin padding и добавим свойства box-sizing border-box теперь обратимся к селектору тега body для него укажем минимальная высота 100мм ширина будет 100% и сделаем размещение элемента по центру укажем display flex justify content center и align items также будет центр видим элемент разместился у нас

центру теперь обратимся к заголовку первого типа на него укажем font-size 13w как мы видим shift у нас увеличился и добавим background background у нас будет лайнер градиент разворот на 45 градусов запятая и давайте будем добавлять цвета первый цвет у нас будет красный 2 фиолетовый 3

Желтый.

Четвертый синий.

Пятый бирюзовый.

И последний шестой цвет будет зеленый.

Мы видим добавился у нас бэкграунд на заднем фоне.

Давайте теперь укажем также.

Бэкграунд клип будет текст.

И также укажем.

WebKit.

Бэкграунд клип.

Также значением Text.

И теперь нам нужно указать еще WebKit Stroke обводка.

Значение будет 0.5 Rem и Transparent.

Мы видим, есть вот такая вот обводка.

И давайте еще добавим для Body Background темного цвета.

Видимо, вводка применилась для текста.

И теперь давайте еще для заголовка первого типа добавим такой же цвет.

Так, это есть.

И давайте будем добавлять теперь анимацию для этого текста.

Добавим Background Size 400%.

У нас Background размер для

бэкграунда увеличился.

Теперь добавим анимацию.

Добавим свойство Animation.

Дадим название Text Animation.

Длина будет 12 секунд.

Linear и бесконечная.

Теперь обратимся к Keyframe и отсюда скопируем название Text Animation и вставим

сюда и значение у нас будут следующие 0 процентов будет background position left а для 100 процентов background position будет right и теперь у нас вот идет для текста такая вот анимация меняются цвета также мы можем здесь поменять к примеру указать не

400 background size для элемента 200.

50.

Будет у нас изменение или же, например, 500%.

Также будет немного по-другому у нас работа длины градиент по цветам.

Также здесь мы можем изменить.

К примеру, можем указать right, а здесь left.

И цвета будут отображаться также по-другому.

Увеличить скорость анимации.

Здесь вместо 12 секунд указать, к примеру, 5 секунд.

За 5 секунд будет проходить у нас этот вот цикл.

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

Также можем еще добавлять цвета и так далее.

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

На этом все.

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

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