NewYear Banners

Новогодние настраиваемые баннеры

Баннер №1 (на всю страницу, анимированный снег)

<style>
@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap'); 
.new-year-banner_wide2,.new-year-banner_wide2 * {box-sizing: border-box;}.new-year-banner_wide2 {overflow: hidden;position: relative;width: 100%;display: flex;align-items: center;justify-content: space-between;box-shadow: inset 0 0 0 2px #fff;text-decoration: none;
    font-family: 'Balsamiq Sans', cursive; /* шрифт */
    border: 2px dashed rgba(255, 255, 255, 0.8); /* рамка */
    background: #FF4747; /* цвет фона */
    color: #fff !important; /* цвет текста */
    height: 70px; /* высота баннера */
}
    .new-year-banner_wide2__text {width: calc(50% - 90px);padding: 15px;text-align: center;line-height: 0.9;}
    .new-year-banner_wide2__window {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 180px;
        height: 120px;
        border-radius: 50%;
        background-color: #BDD6FD; /* фон "окошка" по середине баннера */
        background-image: url("//f.nodacdn.net/402660"); /* картинка ёлки, можно вставить любое изображение */
        background-position: center center;
        background-repeat: no-repeat;
        background-size: auto 40%;
    }
    .new-year-banner_wide2__window:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
        background-image: radial-gradient(circle at 30% 30%, #fff 1.5%, transparent 2.5%), radial-gradient(circle at 80% 70%, #fff 1.5%, transparent 2.5%), radial-gradient(circle at 30% 50%, #fff 1%, transparent 2%), radial-gradient(circle at 70% 85%, #fff 1%, transparent 2%);
        background-size: 100% 100%, 100% 100%, 50% 100%, 50% 50%;
        background-position: 0 0, 0 0, 0 0, 0 0;
        -webkit-animation: snow_wide 4s linear infinite forwards;
        animation: snow_wide 4s linear infinite forwards;
    }
    @media (max-width: 767px) {
        .new-year-banner_wide2__window {
            width: 55px;
        }
        .new-year-banner_wide2__text {
            width: calc(50% - 20px);
            padding: 11px;
            line-height: 1;
            font-size: 12px !important;
        }
    }
    @-webkit-keyframes snow_wide {
        100% {
            background-position: 0 120px, 0 120px, 0 120px, 0 120px;
        }
    }
    @keyframes snow_wide {
        100% {
            background-position: 0 120px, 0 120px, 0 120px, 0 120px;
        }
    }
</style>

<a href="#" class="new-year-banner_wide2">
    <span class="new-year-banner_wide2__text" style="font-size: 24px;">Счастливого Нового Года и Рождества!</span>
    <span class="new-year-banner_wide2__window"></span>
    <span class="new-year-banner_wide2__text" style="font-size: 24px;">Дарим подарки с 25.12 по 07.01</span>
</a>

Баннер №2 (на всю страницу, анимированный снег)

<style>
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap');
.new-year-banner_wide, .new-year-banner_wide * { box-sizing: border-box; }
.new-year-banner_wide {overflow: hidden;position: relative;width: 100%;display: flex;align-items: center;justify-content: space-between;text-decoration: none;box-shadow: inset 0 0 0 2px #fff;
    height: 70px; /* высота баннера */
    color: #fff !important; /* цвет текста */
    font-family: 'Caveat', cursive; /* шрифт */
    background: #13b5ea; /* цвет фона */
    border: 2px dashed rgba(255, 255, 255, 0.8); /* рамка */
}

    .new-year-banner_wide__text {
        width: calc(50% - 90px);
        padding: 15px;
        text-align: center;
        line-height: 0.9;
    }

    .new-year-banner_wide__window {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 180px;
        height: 120px;
        border-radius: 50%;
        background-color: #B0EBFE;
        background-image: url("//f.nodacdn.net/402660");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: auto 40%;
    }
    .new-year-banner_wide__window:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
        background-image: radial-gradient(circle at 30% 30%, #fff 1.5%, transparent 2.5%), radial-gradient(circle at 80% 70%, #fff 1.5%, transparent 2.5%), radial-gradient(circle at 30% 50%, #fff 1%, transparent 2%), radial-gradient(circle at 70% 85%, #fff 1%, transparent 2%);
        background-size: 100% 100%, 100% 100%, 50% 100%, 50% 50%;
        background-position: 0 0, 0 0, 0 0, 0 0;
        -webkit-animation: snow_wide 4s linear infinite forwards;
        animation: snow_wide 4s linear infinite forwards;
    }
    @media (max-width: 767px) {
        .new-year-banner_wide__window {
            width: 55px;
        }
        .new-year-banner_wide__text {
            width: calc(50% - 20px);
            padding: 11px;
            line-height: 1;
            font-size: 18px !important;
        }
    }
    @-webkit-keyframes snow_wide {
        100% {
            background-position: 0 120px, 0 120px, 0 120px, 0 120px;
        }
    }
    @keyframes snow_wide {
        100% {
            background-position: 0 120px, 0 120px, 0 120px, 0 120px;
        }
    }
</style>

<a href="#" class="new-year-banner_wide">
    <span class="new-year-banner_wide__text" style="font-size: 28px;">Счастливого Нового Года и Рождества!</span>
    <span class="new-year-banner_wide__window"></span>
    <span class="new-year-banner_wide__text" style="font-size: 28px;">Дарим подарки с 25.12 по 07.01</span>
</a>