Как добавить анимированный задний фон используя HTML & CSS Animation || Animated Background 5 colors

всем привет в этом видео я покажу как сделать анимированный бэкграунд используя html и css анимацию шаг за шагом итак приступим к созданию анимированного бэкграунда у нас есть файл index.html есть стили стили подключены и внутри body создадим

section внутри нее будет размещаться заголовок первого типа и внутри него будет content animated background теперь давайте перейдем в стиле обратимся к универсальному селектору обнулим margin и padding и добавим свойства box-sized motorbox откроем браузер и посмотрим что у нас добавилось итак мы видим наша надпись есть заголовок первого типа добавился давайте свернем браузер в половину и visual studio code

чтобы наглядно видно было, что меняется на странице.

Теперь сделаем размещение надписи по центру.

Для этого обратимся к Section, заголовку первого типа и укажем Position Absolute, Top 50%, Left 50% и Transform, Translate, Minus 50% и Minus 50%.

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

Также укажем font-size 4.5, frame.

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

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

И для body укажем, добавим animation.

Свойство с названием animate 12 секунд.

Будет бесконечная и линейная и alternate.

теперь обратимся к функции keyframes добавим название animate и будем добавлять цвета цветов у нас будет 5 вначале обратимся к нулевой позиции и нам нужно добавить background внутрь к нашей функции keyframes цвета мы будем брать на сайте 0to255.com здесь есть

Большой перечень разнообразных цветов.

Можем выбирать любой.

Давайте, например, выберем синий.

Нажмем сюда.

Цвет скопировался.

И здесь указываем background и вставляем цвет.

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

Цвет у нас добавился первый.

Теперь нам нужно указать 25% и добавить еще один цвет.

Давайте выберем, например, вот этот оранжевый.

Скопируем его, вставляем сюда.

И мы видим уже два цвета у нас есть.

Идет переход.

Также укажем 50% и добавим третий цвет.

Например, вот выберем такой цвет.

Копируем и вставляем его.

Как видим, уже у нас три цвета применяются.

Здесь также добавим еще 75%.

Добавим четвертый цвет, а затем пятый.

Давайте выберем, к примеру, фиолетовый цвет.

Копируем, вставляем сюда.

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

И выберем.

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

На этом все.

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

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