Как сделать анимированный текст на HTML & CSS || Animated text using only HTML & CSS step by step

Всем привет!

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

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

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

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

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

У нас есть файл индекс.html, style.css.

В стиле подключены также подключены шрифты и добавлены простые обновляющие стили.

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

Создадим заголовок первого типа и внутри будет размещаться элемент span.

Этих элементов у нас должно быть 8.

Итак, первый элемент уже есть.

Ставим сюда курсор, зажимаем shift-alt и стрелочку вниз и копируем еще 7 раз.

1, 2, 3, 4, 5, 6, 7.

И туда добавим контент.

отдельно каждую букву в каждый span слово будет animated анимированный так теперь давайте перейдем в стиле в стилях обратимся к селектору tag body для него укажем ширина 100% минимальная высота будет 100 bh добавим background color

С ключевым словом цвета синего.

Также размещение укажем по центру для этих элементов.

Укажем Display Flex, Justify Content Center и Align Items.

Также будет центр.

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

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

Итак, как мы видим, у нас есть наша надпись.

Animated, поменялся Background.

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

И будем стилизовать далее эти элементы.

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

Для него укажем position relative, относительное позиционирование.

Укажем top 20 пикселей.

Display укажем inline block.

Font size сделаем побольше.

Укажем 10vw.

Цвет будет белый.

И также давайте добавим текст shadow.

Сделаем такой вот объемный текст.

Для этого нам нужно здесь указать 0 смещение по горизонтали.

1 пиксель смещение по вертикали.

И укажем 0 размытие.

Цвет будет у нас такой вот серый.

Давайте немного расширим здесь.

И через запятую нам нужно отсюда скопировать этот элемент.

и добавить еще несколько раз чтобы здесь мы могли указать смещение пол в вертикали будет 2 пикселя также здесь указываем 3 пикселя 4 цвет такой же остается 5 пикселей 6

и цвет меняем на transparent прозрачный так так же будет для 7 пикселей и цвет так же будет transparent давайте отсюда скопируем чтобы не прописывать постоянно transparent так же поскольку у нас дальше будет такой же цвет так для 8 пикселей и для 9 и последний у нас будет

Здесь смещение по вертикали 10 пикселей и также будет размытие 10 пикселей.

И добавим цвет RGBA с значением 0,0,0.

Темный цвет и на 50% будет он у нас затемнен.

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

Итак, давайте посмотрим.

У нас вот есть такой вот получился объем для текста.

Он, как мы видим, немного приподнят.

Так, с этим также разобрались.

Теперь давайте здесь ниже добавим свойство Animation.

И туда укажем Animate, 1 секунда, Easy, бесконечность и Alternate.

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

Добавим span.

И entail child.

Добавим сюда класс entail child.

И будем обращаться к второму элементу здесь.

Нам нужно добавить задержку.

Укажем animation delay на 0.1 секунду.

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

Здесь меняем на 3.0.2.

секунды и опять же копируем 4 у нас 0 3 секунды 5 0 4 для каждой буквы у нас будет идти задержка до 6 идет 05

и здесь укажем для седьмого элемента 06 и для восьмого последней буквы 07 так теперь давайте добавим анимацию добавили задержку для каждой буквы чтобы каждая буква у нас подымалась по определенной периодичности с определенной задержкой которую мы здесь указали так теперь здесь обращаемся к правилу keyframes и туда нам нужно скопировать отсюда этот

название анимации здесь вместо вместо identify указываем название здесь animate так будет правильно теперь обращаюсь здесь указываем сто процентов и внутри укажем топ минус 20 пикселей чтобы элементы у нас поднимались вверх мы видим вот есть сейчас у нас такая вот

Анимация, давайте посмотрим.

Но также еще можем сделать тень у нее.

Отсюда нам нужно скопировать свойства TextShadow с этими значениями.

Здесь сюда мы их вставляем.

И здесь нам нужно вместо Transparent добавить вот этот цвет.

Копируем его и здесь параллельно

Ставим сюда.

Как сделать параллельно?

Ставим сюда курсор и кликаем, зажимаем Alt и кликаем курсором.

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

Сюда нам нужно указать теперь 50 пикселей.

Это будет смещение по, как мы видим, вот такая вот тень образовывается.

И 25 пикселей будет размытие.

И чуть поменьше будет у нас затемнение.

Итак, давайте посмотрим.

И вот

Такая вот небольшая тень при таком вот эффекте у нас добавлена.

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

На этом все.

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

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