Анимированный blur эффект для текста HTML & CSS || Animation blur effect for text HTML & CSS

Всем привет!

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

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

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

И внутри body создадим div с классом

контейнер внутри него будет размещаться у нас span и добавим туда контент слово development и каждая буква этого слова будет размещаться у нас внутри отдельного span давайте скопируем еще этот span ставим ниже еще 10 раз поскольку в слове development 11 букв давайте вставим 10 раз и здесь заменим внутри каждого span

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

Мы видим, есть наше слово.

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

И в Visual Studio Code перейдем в стиле.

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

Обнулим мерджины, пэддинги.

Добавим свойства Box-Sized Border Box.

И теперь давайте также добавим шифты.

Изменим shift для этой надписи.

Давайте перейдем на сайт fonts.google.com.

Здесь нажмем на этот блок.

и здесь уже выбраны шрифты ну нету давайте скопируем этот линк чтобы подключить эти шрифты и вставим внутрь тега head внутри html после основного нашего основного основных стилей здесь сюда в линк после этого линка так теперь давайте перейдем также на сайт и здесь ниже скопируем font family и вставим ее внутрь внутрь

универсального селектора и как мы видим shift у нас изменился и давайте обратимся к контейнер и для него укажем position absolute top 50 процентов left 50 процентов transform translate у нас будет значение минус 50 процентов , минус 50 процентов чтобы элемент размещался у нас четко по центру

теперь также укажем давайте font-size на 5rem увеличим размер нашей надписи text-transform укажем capitalize чтобы каждая буква была большой font-weight будет у нас 900 с более жирным начертанием text-line-center выравниваем по центру и ширина будет 100%

И так же давайте добавим еще Letter Spacing, отступы между буквами на 0.8 RAM.

Откроем.

Видим, что у нас добавилось слово с такими вот стилями.

Теперь давайте обратимся к Container и Span.

И для Span укажем свойство Animation.

Название дадим Animate.

2 секунды.

linear и бесконечность здесь ниже обратимся к контейнер span и также добавим псевдокласс nthild обратимся к первому и для него укажем animation delay то есть задержка будет на 0 одну секунду давайте скопируем этот элемент и также вставим ниже еще 10 раз

и здесь заменим в каждом здесь выберем второе и будет задержка на 0,2 секунды здесь соответственно третий элемент на 0,3 секунды и так далее

для каждой из соответственно 11 букв это будет у нас 9 здесь будет 10 и 1 секунда здесь 11 и соответственно 1 и 1 так это есть теперь нам нужно запустить эту анимацию давайте здесь ниже обратимся к keyframes

Введем название Animate.

И ниже здесь укажем значение 0.

Filter.

Blur.

И будет внутри 0.

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

Чтобы здесь изменить на 20%.

40.

60.

80.

И еще один раз.

копируем на 100% и для 40% укажем 1 ram и теперь у нас будет идти вот такой вот эффект анимация с blur эффектом для текста использовали для этого html css и соответственно анимацию

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

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