Анимированный блок используя HTML & CSS шаг за шагом || Border Radius Animation Box using HTML & CSS

Всем привет!

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

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

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

И внутри body создадим div с классом контейнер, внутри него будет div с классом box.

Перейдем в стили.

И для стилей укажем.

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

И здесь укажем Margin 0, Padding 0, Boxizing Border Box.

Теперь обратимся к Body.

И для Body укажем высота 100 VH.

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

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

И добавим Background.

Background у нас будет.

ключевым словом light sky blue давайте теперь откроем браузер посмотрим что у нас добавилось и так мы видим есть background на странице давайте свернем браузер в половину и visual studio code также в половину и здесь ниже обратимся к div с классом box и для него укажем

background у нас будет url это будет изображение возьмем его с папки img и выберем изображение оттуда также для background и для этого бокса нужно указать ширина будет 350 пикселей и высота 350 пикселей видим этот бокс добавился но нужно еще спозиционировать изображение внутри него для этого укажем background-size будет color

background position будет центр так мы видим изображение есть теперь давайте добавим тень box shadow и укажем смещение по горизонтали 10 точнее 0 10 пикселей 5 пикселей и 5 пикселей и также добавим rgba 0,0,0 и

на 20% будет затемнение.

Мы видим, здесь добавилась вот такая вот тень для нашего блока.

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

Для этого блока укажем свойство Animation и для него нададим название.

Animate 5 секунд, Easy In-Out и бесконечность Infinity.

И также сюда добавим более плавный переход Transition.

Transition укажем All.

1 секунда и так же easyenow будет плавное перемещение теперь нам нужно обратиться к keyframes функции и сюда указать название анимации название у нас animate сюда его прописываем и здесь укажем 0% и border-radius у нас будет меняться

граница границы радиуса теперь давайте сделаем эти границы для позиции от нуля есть такой сайт fancy девятый элемент github.io и здесь есть такой продукт скажем так как ресурс как fancy border радиус здесь мы можем выбирать условную

border-radius скругление углов для вот блока давайте например поставим так вот здесь так выберем здесь так и вот здесь вот так мы видим здесь координаты есть мы нажимаем копировать и вставляем их сюда теперь скопируем этот элемент ставим его ниже и здесь укажем 50 процентов и для 50 процентов сделаем изменения то есть

Борда радиус будет у нас перемещаться вот в эту сторону при анимации.

Давайте сюда вверх.

Право.

И здесь также вверх.

Вот будут такие у нас значения процентные.

Скопируем их и заменим здесь.

Вставляем сюда.

А для 100% скопируем сюда то, что было у нас в нуле.

И сюда укажем столько.

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

Мы можем, например, разместить контент внутри этого бокса.

Давайте это сделаем.

Перейдем в HTML.

И сюда, внутрь бокса, добавим div с классом Content.

И добавим заголовок третьего типа.

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

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

Давайте это сделаем.

Здесь обратимся к div с классом Content.

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

И для контента сделаем размещение в Position Absolute, Top 50%, Left 50% и Transform Translate, Minus 50%, Minus 50%.

И также сделаем белого цвета вилку.

Так, есть.

Здесь мы ошиблись.

Нужно указать 50%.

Так, теперь контент размещается по центру.

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

Мы можем вот здесь, там где бы Ground мы добавляли, добавить линейный градиент и добавить цвет RGBA.

Укажем 0,0,0 и сделаем затемнение, к примеру, на 40%.

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

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