Плавающий контейнер может добавить футуристический стиль любому сайту. Многим нравится, когда на сайте присутствует не только голый текст и картинки, но и некая динамика, которая дополняет его и делает интереснее.
Мы подумали и решили, что поделимся несколькими советами, как это сделать! В этой статье мы рассмотрим, как добавить на сайт плавающий контейнер.
HTML файл:
Создание контейнера
Переходим в CSS. Далее создаем класс container, в котором мы указываем высоту, ширину экрана и расположение карточки в нем. После чего создаем следующий класс - card, указываем размеры и позиционирование карточки:
Создание вложенных классов
title - класс отвечающий за заголовок карт, description - класс отвечающий за текст внутри карт, bg - класс отвечающий за задний фон карты.
Создание анимации
@keyframes anim - анимация, bg::before и bg::after - псевдо классы , отвечающие за два плавающих "пятна".
ЗАКЛЮЧЕНИЕ
Надеюсь, мы смогли показать вам, как создать крутой плавающий контейнер для вашего следующего проекта! Поиграйте с кодом, меняя градиент и скорость анимации.
Спасибо за прочтение!