2022-12-09 14:11

Фоновый шейп с анимацией и одинаковыми отступами

Код помогает добавить одинаковый отступ фоновому шейпу со всех сторон экрана, плюс добавляет красивую анимацию появления

Инструкция

1. Создаем шейп в зеро-блоке, выбираем позиционирование «Window container» и задаем значения высоты и ширины 100%
2. Прописываем шейпу класс head-bg, для этого жмём по нему правой кнопкой мыши — Add CSS Class Name
3. Настраиваем отступы и плавность анимации под свой проект, ориентируясь на комментарии в коде ниже

Код

<style>
@media screen and (min-width: 960px){
    .head-bg{
        box-sizing: border-box;
        padding: 20px !important; /*Отступы*/
        animation: show 1.2s ease-in-out; /*Длительность анимации*/
        animation-iteration-count: 1;
        animation-fill-mode:forwards;
    }

    @keyframes show{
        0%{
        transform: scale(1.2); /*Изначальное увеличение шейпа до начала анимации*/
        }
        100%{
        transform: scale(1); /*Размер шейпа после проигрывания анимации*/
        }
        }
}

</style>