2022-12-09 14:11

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

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

Инструкция

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

Код

<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>