Новогодние украшения для форумов MyBB.ru

Страница: 1 2 »

Сообщений 1 страница 10 из 17

Поделиться125.11.20 18:02

Автор: Герда
Команда ForumD.ru
Наградные баллы: 397
Уважение: +5891
Достижения/подарки: 7 7

Началась зима - и многим пришла в голову идея, что неплохо бы как-то преобразить форумы. Существует масса скриптов для этого и кодов для этого. Здесь вы можете поделиться скриптами и css-решениями по украшению форумов.
Также вы можете обратить внимание на топики соседнего раздела (на майбб форумах эти скрипты и коды также будут работать):

Работает только для форумов mybb:

Легендарная ёлка пожеланий

Навигатор
Шапочка на аватар	Снег на категориях и топиках	Новогоднее предсказание и лунный Календарь	Снежный фон Форума
Санта с колокольчиком и возможностью отключения для каждого пользователя	Сани + Звёзды поверх всего Форума параллакс	Новогоднее настроение	Дед Мороз над форумом ( Дед Мороз , кстати забавно моргает )+ снег как фон Форума .
На аватаре идёт снег	Еловая ветка под аватаром

Подпись автора

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись!

Портфолио http://zlober.ru/

Поделиться205.12.20 22:19

Автор: Automation Baby
IT-прораб
Наградные баллы: 745
Уважение: +2991
Достижения/подарки: 6 2

Шапочка на аватар:

Туда где Css или в хтмл-верх в тегах <style>тут код<style>:

Скрытый текст:

Варианты шапочек:

Красная	Синяя

Подпись автора: "You don't need to be protected,
Because nothing shocks you any more." © Mesh

Поделиться305.12.20 23:39

Автор: Алгол
Важная персона
Наградные баллы: 266
Уважение: +745
Достижения/подарки: 3 3

Снег на категориях и топиках :

html-верх.

Скрытый текст:

Портфолио https://forumd.ru/viewtopic.php?id=6390#p143472

Поделиться406.12.20 03:45

Автор: Алгол
Важная персона
Наградные баллы: 266
Уважение: +745
Достижения/подарки: 3 3

Новогоднее предсказание 2021 и лунный Календарь

Добавляет под форму ответа , кнопочку , нажав на которую ,Вы попадёте на страничку с быком и ёлкой,
На ёлке фонарики, нажав на любой фонарик , он упадёт, его поймает бык, и выдаст Вам предсказание на год.

Короткий путь 1

Скрытый текст:

Короткий путь 2

Скрытый текст:

Скрытый текст:

Все предсказания , можно менять на свои, как и ёлку с бычком и фонариками.

Портфолио https://forumd.ru/viewtopic.php?id=6390#p143472

Поделиться506.12.20 18:47

Автор: Алгол
Важная персона
Наградные баллы: 266
Уважение: +745
Достижения/подарки: 3 3

Снежный фон Форума
Своей картинкой можно полностью преобразить форум и задать новогоднее настроение .
Было:

Стало:

В html-Верх

Скрытый текст:

Картинку можно менять на свою. smalimg

Портфолио https://forumd.ru/viewtopic.php?id=6390#p143472

Поделиться607.12.20 03:03

Автор: Алгол
Важная персона
Наградные баллы: 266
Уважение: +745
Достижения/подарки: 3 3

Санта с колокольчиком и возможностью отключения для каждого пользователя

Кнопка отключения скрипта под формой ответа , так же с Сантой и надписью « On/Off»

В html низ

Скрытый текст:

После НГ , картинку можно заменить на любую , у нас на форуме там был бегающий котик.
Потому и скрипт , называется « котик»

Портфолио https://forumd.ru/viewtopic.php?id=6390#p143472

Поделиться708.12.20 17:55

Автор: Алгол
Важная персона
Наградные баллы: 266
Уважение: +745
Достижения/подарки: 3 3

Сани + Звёзды поверх всего Форума параллакс

В html верх темные санки

Код:

 <div class='polar-star polar-star-1'></div>
            <div class='polar-star polar-star-2'></div>
            <div class='polar-star polar-star-3'></div>
            <div class='polar-star polar-star-4'></div>
            <div class='polar-star polar-star-5'></div>
            <div class='polar-star polar-star-6'></div>
            <div class='polar-star polar-star-7'></div>
            <div class='polar-star polar-star-8'></div>
            <div class='polar-star polar-star-9'></div>

        

        

        <div class="cristmas-deer-1">
            <div class="deer-horns">
                <div class="deer-horns-1"></div>
                <div class="deer-horns-2"></div>
                <div class="deer-horns-3"></div>
            </div>

            <div class="deer-head">
                <div class="deer-nose"></div>
                <div class="deer-ear"></div>
            </div>

            <div class="deer-neck"></div>

            <div class="deer-tail"></div>

            <div class="deer-leg-1">
                <div class="leg-top"></div>
                <div class="leg-bottom"></div>
            </div>

            <div class="deer-leg-2">
                <div class="leg-top"></div>
                <div class="leg-bottom"></div>
            </div>

            <div class="deer-leg-3">
                <div class="leg-top"></div>
                <div class="leg-bottom"></div>
            </div>

            <div class="deer-leg-4">
                <div class="leg-top"></div>
                <div class="leg-bottom"></div>
            </div>

        </div>

        <div class="cristmas-deer-2">
            <div class="deer-horns">
                <div class="deer-horns-1"></div>
                <div class="deer-horns-2"></div>
                <div class="deer-horns-3"></div>
            </div>

            <div class="deer-head">
                <div class="deer-nose"></div>
                <div class="deer-ear"></div>
            </div>

            <div class="deer-neck"></div>

            <div class="deer-tail"></div>

            <div class="deer-leg-1">
                <div class="leg-top"></div>
                <div class="leg-bottom"></div>
            </div>

            <div class="deer-leg-2">
                <div class="leg-top"></div>
                <div class="leg-bottom"></div>
            </div>

            <div class="deer-leg-3">
                <div class="leg-top"></div>
                <div class="leg-bottom"></div>
            </div>

            <div class="deer-leg-4">
                <div class="leg-top"></div>
                <div class="leg-bottom"></div>
            </div>

        </div>

        <div class="cristmas-wagon">
            <div class="wagon-top-1"></div>
            <div class="wagon-top-2"></div>
            <div class="wagon-top-3"></div>
            <div class="wagon-top-4"></div>
            <div class="wagon-top-5"></div>

            <div class="wagon-bottom-1"></div>
            <div class="wagon-bottom-2"></div>
            <div class="wagon-bottom-3"></div>
            <div class="wagon-bottom-4"></div>
        </div>

      
<style>
    
.polar-star {
  width: 2px;
  height: 2px;
  background: #ecff00;
  box-shadow: 0 0 3px #f5ff75;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  z-index: 3;
}

.polar-star-1 {
  width: 2px;
  height: 2px;
  left: 59%;
  top: 31%;
  -webkit-animation: fire-star 0.5s alternate infinite;
  animation: fire-star 0.5s alternate infinite;
  -webkit-animation-delay: 0.52542s;
  animation-delay: 0.52542s;
}

.polar-star-2 {
  width: 3px;
  height: 3px;
  left: 80%;
  top: 4%;
  -webkit-animation: fire-star 0.75s alternate infinite;
  animation: fire-star 0.75s alternate infinite;
  -webkit-animation-delay: 0.05s;
  animation-delay: 0.05s;
}

.polar-star-3 {
  width: 2px;
  height: 2px;
  left: 32%;
  top: 75%;
  -webkit-animation: fire-star 0.5s alternate infinite;
  animation: fire-star 0.5s alternate infinite;
  -webkit-animation-delay: 2.34375s;
  animation-delay: 2.34375s;
}

.polar-star-4 {
  width: 2px;
  height: 2px;
  left: 4%;
  top: 34%;
  -webkit-animation: fire-star 0.5s alternate infinite;
  animation: fire-star 0.5s alternate infinite;
  -webkit-animation-delay: 18.5s;
  animation-delay: 1.5s;
}

.polar-star-5 {
  width: 3px;
  height: 3px;
  left: 8%;
  top: 26%;
  -webkit-animation: fire-star 0.75s alternate infinite;
  animation: fire-star 0.75s alternate infinite;
  -webkit-animation-delay: 3.25s;
  animation-delay: 3.25s;
}

.polar-star-6 {
  width: 3px;
  height: 3px;
  left: 75%;
  top: 10%;
  -webkit-animation: fire-star 0.75s alternate infinite;
  animation: fire-star 0.75s alternate infinite;
  -webkit-animation-delay: 0.13333s;
  animation-delay: 0.13333s;
}

.polar-star-7 {
  width: 3px;
  height: 3px;
  left: 17%;
  top: 61%;
  -webkit-animation: fire-star 0.75s alternate infinite;
  animation: fire-star 0.75s alternate infinite;
  -webkit-animation-delay: 3.58824s;
  animation-delay: 3.58824s;
}

.polar-star-8 {
  width: 3px;
  height: 3px;
  left: 71%;
  top: 69%;
  -webkit-animation: fire-star 0.75s alternate infinite;
  animation: fire-star 0.75s alternate infinite;
  -webkit-animation-delay: 0.97183s;
  animation-delay: 0.97183s;
}

.polar-star-9 {
  width: 2px;
  height: 2px;
  left: 95%;
  top: 47%;
  -webkit-animation: fire-star 0.5s alternate infinite;
  animation: fire-star 0.5s alternate infinite;
  -webkit-animation-delay: 0.49474s;
  animation-delay: 0.49474s;
}

.polar-star-10 {
  width: 2px;
  height: 2px;
  left: 40%;
  top: 95%;
  -webkit-animation: fire-star 0.5s alternate infinite;
  animation: fire-star 0.5s alternate infinite;
  -webkit-animation-delay: 2.375s;
  animation-delay: 2.375s;
}



.cristmas-deer-1{
  position: fixed;
  top: 35%;
  right: -20%;
  width: 8vh;
  height: 5vh;
  border-radius: 50%;
  background: #111030;
  z-index: 12;
  animation: deer-1-move 10s linear infinite;
}

.cristmas-deer-2{
  position: fixed;
  top: 35%;
  right: -25.5%;
  width: 8vh;
  height: 5vh;
  border-radius: 50%;
  background: #111030;
  z-index: 12;
  animation: deer-1-move 10s linear infinite;
}

.deer-horns{
  position: absolute;
  top: -200%;
  left: 35%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.deer-horns-1{
  width: 0.5vh;
  height: 5vh; 
  border-radius: 3vh;
  background: #111030;
  transform: rotate(15deg);
}

.deer-horns-2{
  position: absolute;
  top: 15%;
  right: 5%;
  width: 3vh;
  height: 0.5vh; 
  border-radius: 3vh;
  background: #111030;
  transform: rotate(10deg);
}

.deer-horns-3{
  position: absolute;
  top: 50%;
  right: 10%;
  width: 1.5vh;
  height: 0.5vh; 
  border-radius: 3vh;
  background: #111030;
}

.deer-head{
  position: absolute;
  top: -90%;
  left: -10%;
  width: 5vh;
  height: 3vh;
  border-radius: 50%;
  background: #111030;
  transform: rotate(-65deg);
}

.deer-nose{
  position: absolute;
  top: 5%;
  left: -10%;
  width: 1.5vh;
  height: 1.5vh;
  background: #111030;
  border-radius: 50%;
}

.deer-ear{
  position: absolute;
  top: 50%;
  right: -40%;
  width: 3vh;
  height: 1vh;
  background: #111030;
  border-radius: 50%;
  transform: rotate(25deg);
}

.deer-neck{
  position: absolute;
  top: -80%;
  left: 25%;
  width: .75vh;
  height: 5vh;
  background: #111030;
  border-radius: 1vh;
  transform: rotate(20deg);
}

.deer-tail{
  position: absolute;
  top: 15%;
  right: -10%;
  width: 3vh;
  height: 1.5vh;
  background: #111030;
  border-radius: 50%;
  transform: rotate(-45deg);
}

.deer-leg-1{
  width: 5vh;
  height: 5vh;
  position: absolute;
  bottom: -70%;
  left: -40%;
  transform: rotate(-15deg);
  transform-origin: top right;
  animation: legs-move 0.5s linear alternate infinite;
}

.deer-leg-2{
  width: 5vh;
  height: 5vh;
  position: absolute;
  bottom: -70%;
  left: -30%;
  transform: rotate(-15deg);
  transform-origin: top right;
  animation: legs-move 0.5s .5s linear alternate infinite;
}

.deer-leg-3{
  width: 5vh;
  height: 5vh;
  position: absolute;
  bottom: -90%;
  right: -30%;
  transform-origin: top left;
  animation: legs-move 0.5s linear alternate infinite;
}

.deer-leg-3 .leg-top{
  position: absolute;
  top: -10%;
  left: 18%;
  width: 0.5vh;
  height: 2.5vh;
  background: #111030;
  border-radius: 1vh;
}

.deer-leg-3 .leg-bottom{
  position: absolute;
  top: 20%;
  left: 35%;
  width: 0.5vh;
  height: 2.5vh;
  background: #111030;
  border-radius: 1vh;
}

.deer-leg-4{
  width: 5vh;
  height: 5vh;
  position: absolute;
  bottom: -90%;
  right: -20%;
  transform-origin: top left;
  animation: legs-move 0.5s .5s linear alternate infinite;
}

.deer-leg-4 .leg-top{
  position: absolute;
  top: -10%;
  left: 18%;
  width: 0.5vh;
  height: 2.5vh;
  background: #111030;
  border-radius: 1vh;
}

.deer-leg-4 .leg-bottom{
  position: absolute;
  top: 20%;
  left: 35%;
  width: 0.5vh;
  height: 2.5vh;
  background: #111030;
  border-radius: 1vh;
}

.leg-top{
  position: absolute;
  top: 20%;
  right: -15%;
  width: 3vh;
  height: 0.5vh;
  background: #111030;
  border-radius: 1vh;
  transform: rotate(-60deg);
}
.leg-bottom{
  position: absolute;
  bottom: 1%;
  right: 22%;
  width: 0.5vh;
  height: 2.5vh;
  background: #111030;
  border-radius: 1vh;
}

.cristmas-wagon{
  position: fixed;
  top: 36%;
  right: -35%;
  width: 15vh;
  height: 5vh;
  border-radius: 50%;
  background: #111030;
  z-index: 12;
  animation: deer-1-move 10s linear infinite;
}

.wagon-top-1{
  position: absolute;
  top: -1%;
  width: 15vh;
  height: 2.5vh;
  background: #111030;
}

.wagon-top-2{
  position: absolute;
  top: -30%;
  left: -5%;
  width: 3vh;
  height: 3vh;
  border-radius: 50%;
  background: #111030;
}
.wagon-top-3{
  position: absolute;
  top: -60%;
  right: -5%;
  width: 7vh;
  height: 4vh;
  border-radius: 1vh;
  background: #111030;
}

.wagon-top-4{
  position: absolute;
  top: -60%;
  right: 24%;
  width: 4vh;
  height: 4vh;
  border-radius: 50%;
  background: #111030;
}

.wagon-top-5{
  position: absolute;
  top: -85%;
  right: -10%;
  width: 2vh;
  height: 2vh;
  border-radius: 50%;
  background: #111030;
}

.wagon-bottom-1{
  position: absolute;
  bottom: -45%;
  right: 25%;
  width: 0.5vh;
  height: 4vh;
  border-radius: 2vh;
  background: #111030;
  transform: rotate(-45deg);
}

.wagon-bottom-2{
  position: absolute;
  bottom: -45%;
  left: 25%;
  width: 0.5vh;
  height: 4vh;
  border-radius: 2vh;
  background: #111030;
  transform: rotate(45deg);
}

.wagon-bottom-3{
  position: absolute;
  bottom: -40%;
  width: 15vh;
  height: 0.5vh;
  border-radius: 2vh;
  background: #111030;
}

.wagon-bottom-4{
  position: absolute;
  bottom: -40%;
  left: -5%;
  width: 1.5vh;
  height: 1.5vh;
  border-radius: 50%;
  background: #111030;
}

.
@keyframes shake-present {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

@keyframes deer-1-move{
  0% {
    transform: translateX(0vw);
  }
  100% {
    transform: translateX(-135vw);
  }
}

@keyframes legs-move{
  0% {
    transform: rotate(25deg);
  }
  100% {
    transform: rotate(-5deg);
  }
}

@keyframes buble-message{
  0%{
    transform: scale(0);
  }
    2.5%{
    transform: scale(1.1);
  }
    5%{
    transform: scale(1);
  }
    96%{
    transform: scale(1);
  }
    98%{
    transform: scale(1.1);
  }
    100%{
    transform: scale(0);
  }
}


@keyframes buble-message-1{
  0%{
    transform: scale(0);
  }
    10%{
    transform: scale(1.1);
  }
    13%{
    transform: scale(1);
  }
    97%{
    transform: scale(1);
  }
    90%{
    transform: scale(1.1);
  }
    100%{
    transform: scale(0);
  }
}

@keyframes neonGlow {
  0% {
    text-shadow: 0 0 40px  rgba(66,220,219,.8),
                 0 0 60px  rgba(66,220,219,.8),
                 0 0 80px  rgba(66,220,219,.5),
                 0 0 100px rgba(66,220,219,.5),
                 0 0 140px rgba(66,220,219,.5),
                 0 0 200px rgba(66,220,219,.5);
    box-shadow: none;
  }
  100% {
    text-shadow: 0 0 20px rgba(66,220,219,.8),
                 0 0 30px rgba(66,220,219,.8),
                 0 0 40px rgba(66,220,219,.8),
                 0 0 50px rgba(66,220,219,.5),
                 0 0 80px rgba(66,220,219,.5);
    box-shadow: 0px 0px 14px #12c2c4;
  }
}

@keyframes shake-right-hand{
  0% {
    transform: rotate(-45deg)
  }
  50%{
    transform: rotate(-50deg)
  }
  100% {
    transform: rotate(-40deg)
  }
}

@keyframes window-fire{
  0% {
    opacity: .5;
  }
  100% {
    opacity: 1;
  }
}

@keyframes northern-light {
  0% {
    transform: translate(5%, -2%);
  }
  25% {
    transform: translate(10%, 7%);
  }
  40% {
    transform: rotate(-10deg);
  }
  60% {
    transform: translate(7%, -2%);
  }
  85% {
    transform: translate(6%, 3%) rotate(12deg);
  }
  100% {
    transform: translate(5%, -2%);
  }
}

@-webkit-keyframes fire-star {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fire-star {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes wiggle-tree{
  0% {
    transform: rotate(0deg);
  }
  50%{
    transform: rotate(2deg);
  }
  100% {
    transform: rotate(-2deg);
  }
}

@keyframes moon-light-1-fire {
  0% {
    opacity: 0;
  }
  100% {
    opacity: .05;
  }
}

@keyframes moon-light-2-fire {
  0% {
    opacity: 0;
  }
  100% {
    opacity: .1;
  }
}

@keyframes moon-light-3-fire {
  0% {
    opacity: 0;
  }
  100% {
    opacity: .5;
  }
}

</style>

В html верх светлые Санки .

Код:

 <div class='polar-star polar-star-1'></div>
            <div class='polar-star polar-star-2'></div>
            <div class='polar-star polar-star-3'></div>
            <div class='polar-star polar-star-4'></div>
            <div class='polar-star polar-star-5'></div>
            <div class='polar-star polar-star-6'></div>
            <div class='polar-star polar-star-7'></div>
            <div class='polar-star polar-star-8'></div>
            <div class='polar-star polar-star-9'></div>

        

        

        <div class="cristmas-deer-1">
            <div class="deer-horns">
                <div class="deer-horns-1"></div>
                <div class="deer-horns-2"></div>
                <div class="deer-horns-3"></div>
            </div>

            <div class="deer-head">
                <div class="deer-nose"></div>
                <div class="deer-ear"></div>
            </div>

            <div class="deer-neck"></div>

            <div class="deer-tail"></div>

            <div class="deer-leg-1">
                <div class="leg-top"></div>
                <div class="leg-bottom"></div>
            </div>

            <div class="deer-leg-2">
                <div class="leg-top"></div>
                <div class="leg-bottom"></div>
            </div>

            <div class="deer-leg-3">
                <div class="leg-top"></div>
                <div class="leg-bottom"></div>
            </div>

            <div class="deer-leg-4">
                <div class="leg-top"></div>
                <div class="leg-bottom"></div>
            </div>

        </div>

        <div class="cristmas-deer-2">
            <div class="deer-horns">
                <div class="deer-horns-1"></div>
                <div class="deer-horns-2"></div>
                <div class="deer-horns-3"></div>
            </div>

            <div class="deer-head">
                <div class="deer-nose"></div>
                <div class="deer-ear"></div>
            </div>

            <div class="deer-neck"></div>

            <div class="deer-tail"></div>

            <div class="deer-leg-1">
                <div class="leg-top"></div>
                <div class="leg-bottom"></div>
            </div>

            <div class="deer-leg-2">
                <div class="leg-top"></div>
                <div class="leg-bottom"></div>
            </div>

            <div class="deer-leg-3">
                <div class="leg-top"></div>
                <div class="leg-bottom"></div>
            </div>

            <div class="deer-leg-4">
                <div class="leg-top"></div>
                <div class="leg-bottom"></div>
            </div>

        </div>

        <div class="cristmas-wagon">
            <div class="wagon-top-1"></div>
            <div class="wagon-top-2"></div>
            <div class="wagon-top-3"></div>
            <div class="wagon-top-4"></div>
            <div class="wagon-top-5"></div>

            <div class="wagon-bottom-1"></div>
            <div class="wagon-bottom-2"></div>
            <div class="wagon-bottom-3"></div>
            <div class="wagon-bottom-4"></div>
        </div>

      
<style>
    
.polar-star {
  width: 3px;
  height: 3px;
  background: #ecff00;
  box-shadow: 0 0 3px #f5ff75;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  z-index: 3;
}

.polar-star-1 {
  width: 3px;
  height: 3px;
  left: 59%;
  top: 31%;
  -webkit-animation: fire-star 0.5s alternate infinite;
  animation: fire-star 0.5s alternate infinite;
  -webkit-animation-delay: 0.52542s;
  animation-delay: 0.52542s;
}

.polar-star-2 {
  width: 2px;
  height: 2px;
  left: 80%;
  top: 4%;
  -webkit-animation: fire-star 0.75s alternate infinite;
  animation: fire-star 0.75s alternate infinite;
  -webkit-animation-delay: 0.05s;
  animation-delay: 0.05s;
}

.polar-star-3 {
  width: 2px;
  height: 2px;
  left: 32%;
  top: 75%;
  -webkit-animation: fire-star 0.5s alternate infinite;
  animation: fire-star 0.5s alternate infinite;
  -webkit-animation-delay: 2.34375s;
  animation-delay: 2.34375s;
}

.polar-star-4 {
  width: 3px;
  height: 3px;
  left: 4%;
  top: 34%;
  -webkit-animation: fire-star 0.5s alternate infinite;
  animation: fire-star 0.5s alternate infinite;
  -webkit-animation-delay: 18.5s;
  animation-delay: 1.5s;
}

.polar-star-5 {
  width: 3px;
  height: 3px;
  left: 8%;
  top: 26%;
  -webkit-animation: fire-star 0.75s alternate infinite;
  animation: fire-star 0.75s alternate infinite;
  -webkit-animation-delay: 3.25s;
  animation-delay: 3.25s;
}

.polar-star-6 {
  width: 3px;
  height: 3px;
  left: 75%;
  top: 10%;
  -webkit-animation: fire-star 0.75s alternate infinite;
  animation: fire-star 0.75s alternate infinite;
  -webkit-animation-delay: 0.13333s;
  animation-delay: 0.13333s;
}

.polar-star-7 {
  width: 3px;
  height: 3px;
  left: 17%;
  top: 61%;
  -webkit-animation: fire-star 0.75s alternate infinite;
  animation: fire-star 0.75s alternate infinite;
  -webkit-animation-delay: 3.58824s;
  animation-delay: 3.58824s;
}

.polar-star-8 {
  width: 3px;
  height: 3px;
  left: 71%;
  top: 69%;
  -webkit-animation: fire-star 0.75s alternate infinite;
  animation: fire-star 0.75s alternate infinite;
  -webkit-animation-delay: 0.97183s;
  animation-delay: 0.97183s;
}

.polar-star-9 {
  width: 2px;
  height: 2px;
  left: 95%;
  top: 47%;
  -webkit-animation: fire-star 0.5s alternate infinite;
  animation: fire-star 0.5s alternate infinite;
  -webkit-animation-delay: 0.49474s;
  animation-delay: 0.49474s;
}

.polar-star-10 {
  width: 2px;
  height: 2px;
  left: 40%;
  top: 95%;
  -webkit-animation: fire-star 0.5s alternate infinite;
  animation: fire-star 0.5s alternate infinite;
  -webkit-animation-delay: 2.375s;
  animation-delay: 2.375s;
}



.cristmas-deer-1{
  position: fixed;
  top: 35%;
  right: -20%;
  width: 8vh;
  height: 5vh;
  border-radius: 50%;
  background: #33CBFE;
  z-index: 12;
  animation: deer-1-move 10s linear infinite;
}

.cristmas-deer-2{
  position: fixed;
  top: 35%;
  right: -25.5%;
  width: 8vh;
  height: 5vh;
  border-radius: 50%;
  background: #33CBFE;
  z-index: 12;
  animation: deer-1-move 10s linear infinite;
}

.deer-horns{
  position: absolute;
  top: -200%;
  left: 35%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.deer-horns-1{
  width: 0.5vh;
  height: 5vh; 
  border-radius: 3vh;
  background: #33CBFE;
  transform: rotate(15deg);
}

.deer-horns-2{
  position: absolute;
  top: 15%;
  right: 5%;
  width: 3vh;
  height: 0.5vh; 
  border-radius: 3vh;
  background: #33CBFE;
  transform: rotate(10deg);
}

.deer-horns-3{
  position: absolute;
  top: 50%;
  right: 10%;
  width: 1.5vh;
  height: 0.5vh; 
  border-radius: 3vh;
  background: #33CBFE;
}

.deer-head{
  position: absolute;
  top: -90%;
  left: -10%;
  width: 5vh;
  height: 3vh;
  border-radius: 50%;
  background: #33CBFE;
  transform: rotate(-65deg);
}

.deer-nose{
  position: absolute;
  top: 5%;
  left: -10%;
  width: 1.5vh;
  height: 1.5vh;
  background: #33CBFE;
  border-radius: 50%;
}

.deer-ear{
  position: absolute;
  top: 50%;
  right: -40%;
  width: 3vh;
  height: 1vh;
  background: #33CBFE;
  border-radius: 50%;
  transform: rotate(25deg);
}

.deer-neck{
  position: absolute;
  top: -80%;
  left: 25%;
  width: .75vh;
  height: 5vh;
  background: #33CBFE;
  border-radius: 1vh;
  transform: rotate(20deg);
}

.deer-tail{
  position: absolute;
  top: 15%;
  right: -10%;
  width: 3vh;
  height: 1.5vh;
  background: #33CBFE;
  border-radius: 50%;
  transform: rotate(-45deg);
}

.deer-leg-1{
  width: 5vh;
  height: 5vh;
  position: absolute;
  bottom: -70%;
  left: -40%;
  transform: rotate(-15deg);
  transform-origin: top right;
  animation: legs-move 0.5s linear alternate infinite;
}

.deer-leg-2{
  width: 5vh;
  height: 5vh;
  position: absolute;
  bottom: -70%;
  left: -30%;
  transform: rotate(-15deg);
  transform-origin: top right;
  animation: legs-move 0.5s .5s linear alternate infinite;
}

.deer-leg-3{
  width: 5vh;
  height: 5vh;
  position: absolute;
  bottom: -90%;
  right: -30%;
  transform-origin: top left;
  animation: legs-move 0.5s linear alternate infinite;
}

.deer-leg-3 .leg-top{
  position: absolute;
  top: -10%;
  left: 18%;
  width: 0.5vh;
  height: 2.5vh;
  background: #33CBFE;
  border-radius: 1vh;
}

.deer-leg-3 .leg-bottom{
  position: absolute;
  top: 20%;
  left: 35%;
  width: 0.5vh;
  height: 2.5vh;
  background: #33CBFE;
  border-radius: 1vh;
}

.deer-leg-4{
  width: 5vh;
  height: 5vh;
  position: absolute;
  bottom: -90%;
  right: -20%;
  transform-origin: top left;
  animation: legs-move 0.5s .5s linear alternate infinite;
}

.deer-leg-4 .leg-top{
  position: absolute;
  top: -10%;
  left: 18%;
  width: 0.5vh;
  height: 2.5vh;
  background: #33CBFE;
  border-radius: 1vh;
}

.deer-leg-4 .leg-bottom{
  position: absolute;
  top: 20%;
  left: 35%;
  width: 0.5vh;
  height: 2.5vh;
  background: #33CBFE;
  border-radius: 1vh;
}

.leg-top{
  position: absolute;
  top: 20%;
  right: -15%;
  width: 3vh;
  height: 0.5vh;
  background: #33CBFE;
  border-radius: 1vh;
  transform: rotate(-60deg);
}
.leg-bottom{
  position: absolute;
  bottom: 1%;
  right: 22%;
  width: 0.5vh;
  height: 2.5vh;
  background: #33CBFE;
  border-radius: 1vh;
}

.cristmas-wagon{
  position: fixed;
  top: 36%;
  right: -35%;
  width: 15vh;
  height: 5vh;
  border-radius: 50%;
  background: #33CBFE;
  z-index: 12;
  animation: deer-1-move 10s linear infinite;
}

.wagon-top-1{
  position: absolute;
  top: -1%;
  width: 15vh;
  height: 2.5vh;
  background: #33CBFE;
}

.wagon-top-2{
  position: absolute;
  top: -30%;
  left: -5%;
  width: 3vh;
  height: 3vh;
  border-radius: 50%;
  background: #33CBFE;
}
.wagon-top-3{
  position: absolute;
  top: -60%;
  right: -5%;
  width: 7vh;
  height: 4vh;
  border-radius: 1vh;
  background: #33CBFE;
}

.wagon-top-4{
  position: absolute;
  top: -60%;
  right: 24%;
  width: 4vh;
  height: 4vh;
  border-radius: 50%;
  background: #33CBFE;
}

.wagon-top-5{
  position: absolute;
  top: -85%;
  right: -10%;
  width: 2vh;
  height: 2vh;
  border-radius: 50%;
  background: #33CBFE;
}

.wagon-bottom-1{
  position: absolute;
  bottom: -45%;
  right: 25%;
  width: 0.5vh;
  height: 4vh;
  border-radius: 2vh;
  background: #33CBFE;
  transform: rotate(-45deg);
}

.wagon-bottom-2{
  position: absolute;
  bottom: -45%;
  left: 25%;
  width: 0.5vh;
  height: 4vh;
  border-radius: 2vh;
  background: #33CBFE;
  transform: rotate(45deg);
}

.wagon-bottom-3{
  position: absolute;
  bottom: -40%;
  width: 15vh;
  height: 0.5vh;
  border-radius: 2vh;
  background: #33CBFE;
}

.wagon-bottom-4{
  position: absolute;
  bottom: -40%;
  left: -5%;
  width: 1.5vh;
  height: 1.5vh;
  border-radius: 50%;
  background: #33CBFE;
}

.
@keyframes shake-present {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

@keyframes deer-1-move{
  0% {
    transform: translateX(0vw);
  }
  100% {
    transform: translateX(-135vw);
  }
}

@keyframes legs-move{
  0% {
    transform: rotate(25deg);
  }
  100% {
    transform: rotate(-5deg);
  }
}

@keyframes buble-message{
  0%{
    transform: scale(0);
  }
    2.5%{
    transform: scale(1.1);
  }
    5%{
    transform: scale(1);
  }
    96%{
    transform: scale(1);
  }
    98%{
    transform: scale(1.1);
  }
    100%{
    transform: scale(0);
  }
}


@keyframes buble-message-1{
  0%{
    transform: scale(0);
  }
    10%{
    transform: scale(1.1);
  }
    13%{
    transform: scale(1);
  }
    97%{
    transform: scale(1);
  }
    90%{
    transform: scale(1.1);
  }
    100%{
    transform: scale(0);
  }
}

@keyframes neonGlow {
  0% {
    text-shadow: 0 0 40px  rgba(66,220,219,.8),
                 0 0 60px  rgba(66,220,219,.8),
                 0 0 80px  rgba(66,220,219,.5),
                 0 0 100px rgba(66,220,219,.5),
                 0 0 140px rgba(66,220,219,.5),
                 0 0 200px rgba(66,220,219,.5);
    box-shadow: none;
  }
  100% {
    text-shadow: 0 0 20px rgba(66,220,219,.8),
                 0 0 30px rgba(66,220,219,.8),
                 0 0 40px rgba(66,220,219,.8),
                 0 0 50px rgba(66,220,219,.5),
                 0 0 80px rgba(66,220,219,.5);
    box-shadow: 0px 0px 14px #12c2c4;
  }
}

@keyframes shake-right-hand{
  0% {
    transform: rotate(-45deg)
  }
  50%{
    transform: rotate(-50deg)
  }
  100% {
    transform: rotate(-40deg)
  }
}

@keyframes window-fire{
  0% {
    opacity: .5;
  }
  100% {
    opacity: 1;
  }
}

@keyframes northern-light {
  0% {
    transform: translate(5%, -2%);
  }
  25% {
    transform: translate(10%, 7%);
  }
  40% {
    transform: rotate(-10deg);
  }
  60% {
    transform: translate(7%, -2%);
  }
  85% {
    transform: translate(6%, 3%) rotate(12deg);
  }
  100% {
    transform: translate(5%, -2%);
  }
}

@-webkit-keyframes fire-star {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fire-star {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes wiggle-tree{
  0% {
    transform: rotate(0deg);
  }
  50%{
    transform: rotate(2deg);
  }
  100% {
    transform: rotate(-2deg);
  }
}

@keyframes moon-light-1-fire {
  0% {
    opacity: 0;
  }
  100% {
    opacity: .05;
  }
}

@keyframes moon-light-2-fire {
  0% {
    opacity: 0;
  }
  100% {
    opacity: .1;
  }
}

@keyframes moon-light-3-fire {
  0% {
    opacity: 0;
  }
  100% {
    opacity: .5;
  }
}

</style>

Вообще, цвет можете менять сами , на любой какой пожелаете и у звёзд в том числе .

Портфолио https://forumd.ru/viewtopic.php?id=6390#p143472

Поделиться808.12.20 19:00

Автор: Алгол
Важная персона
Наградные баллы: 266
Уважение: +745
Достижения/подарки: 3 3

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

Преобразите свой форум в считанные секунды , посредством дополнения к стандартному дизайну .
Единственное условие, у Вас должен быть выбран стандартный стиль Spybb
Выбирается здесь в админке -настройки. Почти в самом низу.

Код вставляется в html верх .

Код:

 <div class="wrapper">

        <div class="cover-top">

            <div class="northern-light"></div>

            <div class='polar-star polar-star-1'></div>
            <div class='polar-star polar-star-2'></div>
            <div class='polar-star polar-star-3'></div>
            <div class='polar-star polar-star-4'></div>
            <div class='polar-star polar-star-5'></div>
            <div class='polar-star polar-star-6'></div>
            <div class='polar-star polar-star-7'></div>
            <div class='polar-star polar-star-8'></div>
            <div class='polar-star polar-star-9'></div>

        </div>

        <div class="mountains-layer-1"></div>
        <div class="mountains-layer-2"></div>
        <div class="mountains-layer-3"></div>
        <div class="mountains-layer-4"></div>

        <div class="tree-1">
                <div class="tree-layer"></div>
                <div class="tree-layer"></div>
                <div class="tree-layer"></div>
                <div class="tree-log"></div>
        </div>

        <div class="tree-2">
                <div class="tree-layer"></div>
                <div class="tree-layer"></div>
                <div class="tree-layer"></div>
                <div class="tree-log"></div>
        </div>

        <div class="tree-3">
                <div class="tree-layer"></div>
                <div class="tree-layer"></div>
                <div class="tree-layer"></div>
                <div class="tree-log"></div>
        </div>

        <div class="tree-4">
                <div class="tree-layer"></div>
                <div class="tree-layer"></div>
                <div class="tree-layer"></div>
                <div class="tree-log"></div>
        </div>

        <div class="tree-5">
                <div class="tree-layer"></div>
                <div class="tree-layer"></div>
                <div class="tree-layer"></div>
                <div class="tree-log"></div>
        </div>

        <div class="moon">

            <div class="moon-light-1"></div>
            <div class="moon-light-2"></div>
            <div class="moon-light-3"></div>
            <div class="moon-orb">
                <div class="moon-crator-1"></div>
                <div class="moon-crator-2"></div>
                <div class="moon-crator-3"></div>
                <div class="moon-crator-4"></div>
                <div class="moon-crator-5"></div>
                <div class="moon-crator-6"></div>
                <div class="moon-crator-7"></div>
            </div>

        </div>

        <div class="brick-house">

            <div class="roof-snow-1"></div>
            <div class="roof-snow-2"></div>
            <div class="roof-snow-3"></div>
            <div class="roof-snow-4"></div>
            <div class="roof-snow-5"></div>
            <div class="roof-snow-6"></div>
            <div class="roof-snow-7"></div>
            <div class="roof-snow-8"></div>
            <div class="roof-snow-9"></div>
            <div class="roof-snow-10"></div>
            <div class="roof-snow-11"></div>

            <div class="chimney-top">
                <div class="chimney-top-block"></div>
            </div>
            <div class="chimney-bottom">

                <div class="chimney-block-1"></div>
                <div class="chimney-block-2"></div>
                <div class="chimney-block-1"></div>
                <div class="chimney-block-2"></div>
                <div class="chimney-block-2"></div>
                <div class="chimney-block-1"></div>
                <div class="chimney-block-2"></div>
                <div class="chimney-block-1"></div>

            </div>

            <div class="roof"></div>
            <div class="house-box">

                <div class="house-window-1">
                    <div class="window-glass"></div>
                    <div class="window-glass"></div>
                    <div class="window-glass"></div>
                    <div class="window-glass"></div>
                </div>

                <div class="house-window-2">
                        <div class="window-glass"></div>
                        <div class="window-glass"></div>
                        <div class="window-glass"></div>
                        <div class="window-glass"></div>
                </div>

                <div class="house-window-3">
                        <div class="window-glass"></div>
                        <div class="window-glass"></div>
                        <div class="window-glass"></div>
                        <div class="window-glass"></div>
                </div>

                    <p class="neon-sign">2021</p>

                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>

                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>

                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>

                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>

                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>

                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>

                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>

                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>

                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
                <div class="box-block-1"></div>
                <div class="box-block-2"></div>
    
            
            </div>

        </div>

        <div class="santa-claus">

            <div class="santa-claus-head">

                <div class="claus-eye-1"></div>
                <div class="claus-eye-2"></div>
                <div class="claus-eye-3"></div>

                <div class="claus-mouth"></div>

            </div>

            <div class="santa-claus-beard">
                <div class="claus-beard-1"></div>
                <div class="claus-beard-2"></div>
                <div class="claus-beard-3"></div>
                <div class="claus-beard-4"></div>
            </div>

            <div class="santa-claus-body">

                <div class="claus-arm-1">
                    <div class="arm-top"></div>
                    <div class="arm-bottom-1"></div>
                    <div class="arm-bottom-2"></div>
                </div>

                <div class="claus-arm-2">
                        <div class="arm-top"></div>
                        <div class="arm-bottom-1"></div>
                        <div class="arm-bottom-2"></div>
                    </div>

            </div>

            <div class="legs-top">
                    <div class="legs-top-1"></div>
                    <div class="legs-top-1"></div>
            </div>

            <div class="claus-body-bottom">
                <div class="body-bottom-1"></div>
                <div class="body-bottom-2"></div>
            </div>

            <div class="legs-bottom">
                    <div class="legs-bottom-1"></div>
                    <div class="legs-bottom-1"></div>
            </div>

        </div>

        <div class="happy-message">
            <div class="happy-message-1">
                <p>happy</p>
                <p>new year</p>
            </div>
            <div class="happy-message-2"></div>
            <div class="happy-message-3"></div>
        </div>

        <div class="main-cristmas-tree">
            <div class="cristmas-star"></div>
            <div class="cristmas-tree-1"></div>
            <div class="cristmas-tree-2"></div>
            <div class="cristmas-tree-3"></div>
            <div class="cristmas-tree-4"></div>
            <div class="cristmas-tree-5"></div>
            <div class="cristmas-tree-6"></div>
            <div class="main-tree-snow-1">
                <div class="snow-1-top"></div>
                <div class="snow-1-bottom"></div>
            </div>

            <div class="main-tree-snow-2">
                    <div class="snow-2-top"></div>
                    <div class="snow-2-bottom"></div>
            </div>
            
            <div class="main-tree-snow-3">
                    <div class="snow-3-top"></div>
                    <div class="snow-3-bottom"></div>
            </div>

            <div class="main-tree-snow-4">
                    <div class="snow-4-top"></div>
                    <div class="snow-4-bottom"></div>
            </div>

            <div class="main-tree-snow-5">
                    <div class="snow-5-top"></div>
                    <div class="snow-5-bottom"></div>
            </div>

            <div class="cristmas-toy-1">
                <div class="toy-1-bril"></div>
            </div>

            <div class="cristmas-toy-2">
                    <div class="toy-2-bril"></div>
            </div>

            <div class="cristmas-toy-3">
                    <div class="toy-3-bril"></div>
            </div>

            <div class="cristmas-toy-4">
                    <div class="toy-4-bril"></div>
            </div>

            <div class="cristmas-toy-5">
                    <div class="toy-5-bril"></div>
            </div>

            <div class="cristmas-toy-6">
                    <div class="toy-6-bril"></div>
            </div>

            <div class="cristmas-toy-7">
                    <div class="toy-7-bril"></div>
            </div>

            <div class="cristmas-toy-8">
                    <div class="toy-8-bril"></div>
            </div>

            <div class="cristmas-toy-9">
                    <div class="toy-9-bril"></div>
            </div>

            <div class="cristmas-toy-10">
                    <div class="toy-10-bril"></div>
            </div>

            <div class="tree-log"></div>

        </div>

        <div class="cristmas-deer-1">
            <div class="deer-horns">
                <div class="deer-horns-1"></div>
                <div class="deer-horns-2"></div>
                <div class="deer-horns-3"></div>
            </div>

            <div class="deer-head">
                <div class="deer-nose"></div>
                <div class="deer-ear"></div>
            </div>

            <div class="deer-neck"></div>

            <div class="deer-tail"></div>

            <div class="deer-leg-1">
                <div class="leg-top"></div>
                <div class="leg-bottom"></div>
            </div>

            <div class="deer-leg-2">
                <div class="leg-top"></div>
                <div class="leg-bottom"></div>
            </div>

            <div class="deer-leg-3">
                <div class="leg-top"></div>
                <div class="leg-bottom"></div>
            </div>

            <div class="deer-leg-4">
                <div class="leg-top"></div>
                <div class="leg-bottom"></div>
            </div>

        </div>

        <div class="cristmas-deer-2">
            <div class="deer-horns">
                <div class="deer-horns-1"></div>
                <div class="deer-horns-2"></div>
                <div class="deer-horns-3"></div>
            </div>

            <div class="deer-head">
                <div class="deer-nose"></div>
                <div class="deer-ear"></div>
            </div>

            <div class="deer-neck"></div>

            <div class="deer-tail"></div>

            <div class="deer-leg-1">
                <div class="leg-top"></div>
                <div class="leg-bottom"></div>
            </div>

            <div class="deer-leg-2">
                <div class="leg-top"></div>
                <div class="leg-bottom"></div>
            </div>

            <div class="deer-leg-3">
                <div class="leg-top"></div>
                <div class="leg-bottom"></div>
            </div>

            <div class="deer-leg-4">
                <div class="leg-top"></div>
                <div class="leg-bottom"></div>
            </div>

        </div>

        <div class="cristmas-wagon">
            <div class="wagon-top-1"></div>
            <div class="wagon-top-2"></div>
            <div class="wagon-top-3"></div>
            <div class="wagon-top-4"></div>
            <div class="wagon-top-5"></div>

            <div class="wagon-bottom-1"></div>
            <div class="wagon-bottom-2"></div>
            <div class="wagon-bottom-3"></div>
            <div class="wagon-bottom-4"></div>
        </div>

        <div class="cristmas-pres-box-1">
            <div class="cristmas-pres-box-top-1"></div>
            <span class="tooltip top_tooltip">живи</span>
        </div>

        <div class="cristmas-pres-box-2">
                <div class="cristmas-pres-box-top-2"></div>
                <span class="tooltip top_tooltip">люби</span>
        </div>

        <div class="cristmas-pres-box-3">
                <div class="cristmas-pres-box-top-3"></div>
                <span class="tooltip top_tooltip">дыши</span>
        </div>

        <div class="auxiliary-window">
            <p>форум желает Вам </p>
            <p>счастья  :)</p>
        </div>

    </div>
    



<style>
    

*{
  padding: 0;
  margin: 0;
}

.wrapper{
  width: 100vw;
  height: auto;
}

.cover-top {
  width:100vw;
  height:100vh;
  position:relative;
  overflow: hidden;
  z-index: 1;
}

.mountains-layer-1{
  position: absolute;
  bottom: 0;
  z-index: 5;
  width: 100vw;
  height: 75vh;
  clip-path: polygon(0% 100%, 13% 86%, 36% 85%, 51% 91%, 67% 88%, 78% 78%, 91% 88%, 100% 100%);
  background-color: #111030;
}

.mountains-layer-2{
  position: absolute;
  bottom: 0;
  z-index: 4;
  width: 100vw;
  height: 75vh;
  clip-path: polygon(0 100%, 0 88%, 6% 78%, 15% 75%, 24% 80%, 31% 80%, 37% 71%, 47% 70%, 55% 76%, 61% 82%, 66% 86%, 74% 75%, 83% 69%, 91% 80%, 100% 89%, 100% 100%);
  background-color: #1c2f5b;
}

.mountains-layer-3{
  position: absolute;
  bottom: 0;
  z-index: 3;
  width: 100vw;
  height: 75vh;
  clip-path: polygon(0 100%, 0 74%, 5% 64%, 13% 68%, 19% 57%, 28% 62%, 34% 53%, 44% 48%, 52% 56%, 61% 51%, 68% 59%, 76% 54%, 84% 64%, 92% 54%, 100% 68%, 100% 100%);
  background-color: #1c4e5b;
}

.mountains-layer-4{
  position: absolute;
  bottom: 0;
  z-index: 15;
  width: 100vw;
  height: 35vh;
  clip-path: polygon(0% 100%, 2% 93%, 4% 90%, 7% 94%, 8% 97%, 9% 99%, 12% 95%, 12% 91%, 15% 88%, 19% 89%, 21% 97%, 25% 96%, 27% 91%, 32% 88%, 35% 91%, 38% 95%, 42% 96%, 43% 89%, 47% 88%, 50% 90%, 55% 95%, 57% 96%, 60% 90%, 64% 86%, 67% 92%, 71% 83%, 73% 75%, 76% 76%, 81% 81%, 84% 89%, 88% 91%, 90% 88%, 91% 86%, 97% 92%, 100% 100%);
  background-color: #e2e2e2;
}

.northern-light{
  position: absolute;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  animation: northern-light 20s linear alternate infinite;
  background: -moz-linear-gradient(90deg, rgba(50,152,138,1) 0%, rgba(50,152,138,1) 40%, rgba(0,14,60,1) 70%, rgba(2,2,13,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(2,2,13,1)), color-stop(30%, rgba(0,14,60,1)), color-stop(60%, rgba(50,152,138,1)), color-stop(100%, rgba(50,152,138,1)));
  background: -webkit-linear-gradient(90deg, rgba(50,152,138,1) 0%, rgba(50,152,138,1) 40%, rgba(0,14,60,1) 70%, rgba(2,2,13,1) 100%);
  background: -o-linear-gradient(90deg, rgba(50,152,138,1) 0%, rgba(50,152,138,1) 40%, rgba(0,14,60,1) 70%, rgba(2,2,13,1) 100%);
  background: -ms-linear-gradient(90deg, rgba(50,152,138,1) 0%, rgba(50,152,138,1) 40%, rgba(0,14,60,1) 70%, rgba(2,2,13,1) 100%);
  background: linear-gradient(0deg, rgba(50,152,138,1) 0%, rgba(50,152,138,1) 40%, rgba(0,14,60,1) 70%, rgba(2,2,13,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02020D', endColorstr='#32988a',GradientType=0 );
  z-index: 1;
}

.polar-star {
  width: 2px;
  height: 2px;
  background: #ecff00;
  box-shadow: 0 0 3px #f5ff75;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  z-index: 3;
}

.polar-star-1 {
  width: 2px;
  height: 2px;
  left: 59%;
  top: 31%;
  -webkit-animation: fire-star 0.5s alternate infinite;
  animation: fire-star 0.5s alternate infinite;
  -webkit-animation-delay: 0.52542s;
  animation-delay: 0.52542s;
}

.polar-star-2 {
  width: 3px;
  height: 3px;
  left: 80%;
  top: 4%;
  -webkit-animation: fire-star 0.75s alternate infinite;
  animation: fire-star 0.75s alternate infinite;
  -webkit-animation-delay: 0.05s;
  animation-delay: 0.05s;
}

.polar-star-3 {
  width: 2px;
  height: 2px;
  left: 32%;
  top: 75%;
  -webkit-animation: fire-star 0.5s alternate infinite;
  animation: fire-star 0.5s alternate infinite;
  -webkit-animation-delay: 2.34375s;
  animation-delay: 2.34375s;
}

.polar-star-4 {
  width: 2px;
  height: 2px;
  left: 4%;
  top: 34%;
  -webkit-animation: fire-star 0.5s alternate infinite;
  animation: fire-star 0.5s alternate infinite;
  -webkit-animation-delay: 18.5s;
  animation-delay: 1.5s;
}

.polar-star-5 {
  width: 3px;
  height: 3px;
  left: 8%;
  top: 26%;
  -webkit-animation: fire-star 0.75s alternate infinite;
  animation: fire-star 0.75s alternate infinite;
  -webkit-animation-delay: 3.25s;
  animation-delay: 3.25s;
}

.polar-star-6 {
  width: 3px;
  height: 3px;
  left: 75%;
  top: 10%;
  -webkit-animation: fire-star 0.75s alternate infinite;
  animation: fire-star 0.75s alternate infinite;
  -webkit-animation-delay: 0.13333s;
  animation-delay: 0.13333s;
}

.polar-star-7 {
  width: 3px;
  height: 3px;
  left: 17%;
  top: 61%;
  -webkit-animation: fire-star 0.75s alternate infinite;
  animation: fire-star 0.75s alternate infinite;
  -webkit-animation-delay: 3.58824s;
  animation-delay: 3.58824s;
}

.polar-star-8 {
  width: 3px;
  height: 3px;
  left: 71%;
  top: 69%;
  -webkit-animation: fire-star 0.75s alternate infinite;
  animation: fire-star 0.75s alternate infinite;
  -webkit-animation-delay: 0.97183s;
  animation-delay: 0.97183s;
}

.polar-star-9 {
  width: 2px;
  height: 2px;
  left: 95%;
  top: 47%;
  -webkit-animation: fire-star 0.5s alternate infinite;
  animation: fire-star 0.5s alternate infinite;
  -webkit-animation-delay: 0.49474s;
  animation-delay: 0.49474s;
}

.polar-star-10 {
  width: 2px;
  height: 2px;
  left: 40%;
  top: 95%;
  -webkit-animation: fire-star 0.5s alternate infinite;
  animation: fire-star 0.5s alternate infinite;
  -webkit-animation-delay: 2.375s;
  animation-delay: 2.375s;
}

.tree-1, .tree-2 {
  width: 20vh;
  position: absolute;
  z-index: 10;
  transform-origin: bottom;
}

.tree-1{
  bottom: 7%;
  right: 5%;
  animation: wiggle-tree 3s 1s ease alternate infinite;
}

.tree-2{
  bottom: 7%;
  left: 10%;
  animation: wiggle-tree 3s ease alternate infinite;
}

.tree-3{
  position: absolute;
  bottom: 22%;
  right: 15%;
  z-index: 9;
  transform-origin: bottom;
  animation: wiggle-tree 3s 2s ease alternate infinite;
}

.tree-4{
  position: absolute;
  bottom: 11%;
  right: 35%;
  z-index: 9;
  transform-origin: bottom;
  animation: wiggle-tree 3s 1.5s ease alternate infinite;
}

.tree-5{
  position: absolute;
  bottom: 15%;
  left: 5%;
  z-index: 9;
  transform-origin: bottom;
  animation: wiggle-tree 3s 1.25s ease alternate infinite;
}

.tree-layer,
.tree-log {
  margin: 0 auto;
}

.tree-layer {
  width: 0;
  height: 0;
  border-left: 6vh solid transparent;
  border-right: 6vh solid transparent;
  border-bottom: 8vh solid #111030;
  border-radius: 25px;
}

.tree-3 .tree-layer, .tree-4 .tree-layer, .tree-5 .tree-layer {
  width: 0;
  height: 0;
  border-left: 3vh solid transparent;
  border-right: 3vh solid transparent;
  border-bottom: 4vh solid #1c2f5b;
  border-radius: 15px;
}

.tree-layer:nth-child(2) {
  margin-top: -20%;
  border-left-width: 7vh;
  border-right-width: 7vh;
  border-bottom-width: 10vh;
}

.tree-3 .tree-layer:nth-child(2), .tree-4 .tree-layer:nth-child(2), .tree-5 .tree-layer:nth-child(2){
  margin-top: -20%;
  border-left-width: 3.5vh;
  border-right-width: 3.5vh;
  border-bottom-width: 5vh;
}

.tree-layer:nth-child(3) {
  margin-top: -25%;
  border-left-width: 9vh;
  border-right-width: 9vh;
  border-bottom-width: 15vh;
}

.tree-3 .tree-layer:nth-child(3), .tree-4 .tree-layer:nth-child(3), .tree-5 .tree-layer:nth-child(3) {
  margin-top: -30%;
  border-left-width: 4.5vh;
  border-right-width: 4.5vh;
  border-bottom-width: 7.5vh;
}

.tree-log {
  width: 20px;
  height: 30px;
  background-color: #111030;
}

.tree-3 .tree-log, .tree-4 .tree-log, .tree-5 .tree-log {
  width: 10px;
  height: 15px;
  background-color: #1c2f5b;
}

.main-cristmas-tree{
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30vh;
  margin: 0;
  bottom: 7%;
  right: 18%;
  z-index: 10;
  transform-origin: bottom;
  animation: wiggle-tree 3s 1.25s ease alternate infinite;
}

.main-cristmas-tree .tree-log{
  background: #1f0e00;
}

.cristmas-star{
  z-index: 12;
  width: 4vh;
  height: 4vh;
  background: #e7ff54;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.cristmas-tree-1{
  width:0;
  height: 0;
  border-left: 4vh solid transparent;
  border-right: 4vh solid transparent;
  border-bottom: 4vh solid #001b00;
  border-radius: 2vh;
  margin-top: -1vh;
}

.cristmas-tree-2{
  width:0;
  height: 0;
  border-left: 6vh solid transparent;
  border-right: 6vh solid transparent;
  border-bottom: 6vh solid #001b00;
  border-radius: 3vh;
  margin-top: -2.5vh;
}

.cristmas-tree-3{
  width:0;
  height: 0;
  border-left: 8vh solid transparent;
  border-right: 8vh solid transparent;
  border-bottom: 8vh solid #001b00;
  border-radius: 4vh;
  margin-top: -4vh;
}

.cristmas-tree-4{
  width:0;
  height: 0;
  border-left: 10vh solid transparent;
  border-right: 10vh solid transparent;
  border-bottom: 10vh solid #001b00;
  border-radius: 5vh;
  margin-top: -5vh;
}

.cristmas-tree-5{
  width:0;
  height: 0;
  border-left: 13vh solid transparent;
  border-right: 13vh solid transparent;
  border-bottom: 13vh solid #001b00;
  border-radius: 6.5vh;
  margin-top: -6.5vh;
}

.cristmas-tree-6{
  width:0;
  height: 0;
  border-left: 16vh solid transparent;
  border-right: 16vh solid transparent;
  border-bottom: 16vh solid #001b00;
  border-radius: 8vh;
  margin-top: -8vh;
}

.main-tree-snow-1{
  position: absolute;
  bottom: 12%;
  left: 3%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-tree-snow-1 .snow-1-top{
  width: 4vh;
  height: 3.5vh;
  background: #e2e2e2;
  border-radius: 50%;
  margin-bottom: -1.5vh;
}

.main-tree-snow-1 .snow-1-bottom{
  width: 8vh;
  height: 3.5vh;
  background: #e2e2e2;
  border-radius: 4vh;
}

.main-tree-snow-2{
  position: absolute;
  bottom: 24%;
  right: 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-tree-snow-2 .snow-2-top{
  width: 3.5vh;
  height: 3vh;
  background: #e2e2e2;
  border-radius: 50%;
  margin-bottom: -1.5vh;
}

.main-tree-snow-2 .snow-2-bottom{
  width: 6vh;
  height: 2.5vh;
  background: #e2e2e2;
  border-radius: 4vh;
}

.main-tree-snow-3{
  position: absolute;
  bottom: 43%;
  left: 22%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-tree-snow-3 .snow-3-top{
  width: 3vh;
  height: 2.5vh;
  background: #e2e2e2;
  border-radius: 50%;
  margin-bottom: -1.25vh;
}

.main-tree-snow-3 .snow-3-bottom{
  width: 5vh;
  height: 2vh;
  background: #e2e2e2;
  border-radius: 4vh;
}

.main-tree-snow-4{
  position: absolute;
  top: 35%;
  right: 28%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-tree-snow-4 .snow-4-top{
  width: 3vh;
  height: 2vh;
  background: #e2e2e2;
  border-radius: 50%;
  margin-bottom: -1vh;
}

.main-tree-snow-4 .snow-4-bottom{
  width: 4vh;
  height: 1.5vh;
  background: #e2e2e2;
  border-radius: 4vh;
}

.main-tree-snow-5{
  position: absolute;
  top: 8%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-tree-snow-5 .snow-5-top{
  width: 2vh;
  height: 1.5vh;
  background: #e2e2e2;
  border-radius: 50%;
}

.main-tree-snow-5 .snow-5-bottom{
  width: 3.5vh;
  height: 1.5vh;
  background: #e2e2e2;
  border-radius: 4vh;
  margin-top: -0.75vh;
}

.cristmas-toy-1{
  position: absolute;
  top: 18%;
  left: 42%;
  width: 1.5vh;
  height: 1.5vh;
  background: #ad0101;
  border-radius: 50%;
}

.toy-1-bril{
  position: absolute;
  top: 0%;
  left: 0%;
  width: 1vh;
  height: 1vh;
  background: #ca6262;
  border-radius: 50%;
}

.cristmas-toy-2{
  position: absolute;
  top: 23%;
  right: 38%;
  width: 1.5vh;
  height: 1.5vh;
  background: #c6db05;
  border-radius: 50%;
}

.toy-2-bril{
  position: absolute;
  top: 0%;
  left: 0%;
  width: 1vh;
  height: 1vh;
  background: #ffffff;
  border-radius: 50%;
}

.cristmas-toy-3{
  position: absolute;
  top: 30%;
  width: 1.75vh;
  height: 1.75vh;
  background: #ad0101;
  border-radius: 50%;
}

.toy-3-bril{
  position: absolute;
  top: 0%;
  left: 0%;
  width: 1.25vh;
  height: 1.25vh;
  background: #ca6262;
  border-radius: 50%;
}

.cristmas-toy-4{
  position: absolute;
  top: 36%;
  left: 35%;
  width: 1.75vh;
  height: 1.75vh;
  background: #c6db05;
  border-radius: 50%;
}

.toy-4-bril{
  position: absolute;
  top: 0%;
  left: 0%;
  width: 1.25vh;
  height: 1.25vh;
  background: #fff;
  border-radius: 50%;
}

.cristmas-toy-5{
  position: absolute;
  top: 45%;
  right: 42%;
  width: 1.75vh;
  height: 1.75vh;
  background: #ad0101;
  border-radius: 50%;
}

.toy-5-bril{
  position: absolute;
  top: 0%;
  left: 0%;
  width: 1.25vh;
  height: 1.25vh;
  background: #ca6262;
  border-radius: 50%;
}

.cristmas-toy-6{
  position: absolute;
  top: 53%;
  right: 28%;
  width: 2vh;
  height: 2vh;
  background: #c6db05;
  border-radius: 50%;
}

.toy-6-bril{
  position: absolute;
  top: 0%;
  left: 0%;
  width: 1.5vh;
  height: 1.5vh;
  background: #fff;
  border-radius: 50%;
}

.cristmas-toy-7{
  position: absolute;
  bottom: 33%;
  left: 42%;
  width: 2vh;
  height: 2vh;
  background: #ad0101;
  border-radius: 50%;
}

.toy-7-bril{
  position: absolute;
  top: 0%;
  left: 0%;
  width: 1.5vh;
  height: 1.5vh;
  background: #ca6262;
  border-radius: 50%;
}

.cristmas-toy-8{
  position: absolute;
  bottom: 34%;
  left: 22%;
  width: 2.25vh;
  height: 2.25vh;
  background: #c6db05;
  border-radius: 50%;
}

.toy-8-bril{
  position: absolute;
  top: 0%;
  left: 0%;
  width: 1.75vh;
  height: 1.75vh;
  background: #fff;
  border-radius: 50%;
}

.cristmas-toy-9{
  position: absolute;
  bottom: 18%;
  right: 47%;
  width: 2.25vh;
  height: 2.25vh;
  background: #ad0101;
  border-radius: 50%;
}

.toy-9-bril{
  position: absolute;
  top: 0%;
  left: 0%;
  width: 1.75vh;
  height: 1.75vh;
  background: #ca6262;
  border-radius: 50%;
}

.cristmas-toy-10{
  position: absolute;
  bottom: 15%;
  right: 10%;
  width: 2.5vh;
  height: 2.5vh;
  background: #c6db05;
  border-radius: 50%;
}

.toy-10-bril{
  position: absolute;
  top: 0%;
  left: 0%;
  width: 2vh;
  height: 2vh;
  background: #fff;
  border-radius: 50%;
}

.moon{
  position: absolute;
  width:50vh;
  height: 50vh;
  top: 8%;
  left: 10%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.moon-light-1{
  position: absolute;
  width:50vh;
  height: 50vh;
  border-radius: 50%;
  background-color: #fff;
  opacity: .05;
  animation: moon-light-1-fire 5s ease infinite alternate;
}

.moon-light-2{
  position: absolute;
  width:45vh;
  height: 45vh;
  border-radius: 50%;
  background-color: #edff7a;
  opacity: .1;
  animation: moon-light-2-fire 5s ease infinite alternate;
}

.moon-light-3{
  position: absolute;
  width:40vh;
  height: 40vh;
  border-radius: 50%;
  background-color: #e7ff54;
  opacity: .5;
  animation: moon-light-3-fire 5s ease infinite alternate;
}

.moon-orb{
  position: absolute;
  width:35vh;
  height: 35vh;
  border-radius: 50%;
  background-color: #e7ff54;
  opacity: 1;
}

.moon-crator-1, .moon-crator-2, .moon-crator-3, .moon-crator-4, .moon-crator-5, .moon-crator-6, .moon-crator-7{
  position: absolute;
  border-radius: 50%;
  background-color: #d1a536;
  opacity: .5;
}

.moon-crator-1{
  top: 20%;
  left: 20%;
  width: 5vh;
  height: 5vh;
}

.moon-crator-2{
  top: 20%;
  left: 35%;
  width: 2vh;
  height: 2vh;
}

.moon-crator-3{
  top: 30%;
  left: 40%;
  width: 2vh;
  height: 2vh;
}

.moon-crator-4{
  top: 35%;
  left: 20%;
  width: 1vh;
  height: 1vh;
}

.moon-crator-5{
  top: 40%;
  right: 20%;
  width: 4vh;
  height: 4vh;
}

.moon-crator-6{
  top: 50%;
  right: 50%;
  width: 3vh;
  height: 3vh;
}

.moon-crator-7{
  bottom: 20%;
  left: 20%;
  width: 3vh;
  height: 3vh;
}

.brick-house{
  position: absolute;
  left: 20%;
  bottom: 0;
  width: 35vw;
  height: 57vh;
  z-index: 14;
}

.roof-snow-1{
  position: absolute;
  top: 22%;
  right: 5%;
  width: 5vw;
  height: 2vh;
  background: #e2e2e2;
  border-radius: 5px;
}

.roof-snow-2{
  position: absolute;
  top: 20%;
  right: 10%;
  width: 3vw;
  height: 2vh;
  background: #e2e2e2;
  border-radius: 5px;
}

.roof-snow-3{
  position: absolute;
  top: 21%;
  right: 16%;
  width: 10vw;
  height: 2vh;
  background: #e2e2e2;
  border-radius: 15px;
}

.roof-snow-4{
  position: absolute;
  top: 17%;
  right: 25%;
  width: 12vh;
  height: 4vh;
  background: #e2e2e2;
  border-radius: 15px;
}

.roof-snow-5{
  position: absolute;
  top: 13%;
  right: 33%;
  width: 4vh;
  height: 4vh;
  background: #e2e2e2;
  border-radius: 50%;
  z-index: 20;
}

.roof-snow-6{
  position: absolute;
  top: 22%;
  right: 43%;
  width: 2vw;
  height: 2vh;
  background: #e2e2e2;
  border-radius: 5px;
}

.roof-snow-7{
  position: absolute;
  top: 23%;
  left: 2%;
  width: 18vw;
  height: 3.5vh;
  background: #e2e2e2;
  border-radius: 15px;
  z-index: 20;
}

.roof-snow-8{
  position: absolute;
  top: 20%;
  left: 7%;
  width: 10vw;
  height: 3.5vh;
  background: #e2e2e2;
  border-radius: 15px;
  z-index: 20;
}

.roof-snow-9{
  position: absolute;
  top: 23%;
  left: 5%;
  width: 4vh;
  height: 6vh;
  background: #e2e2e2;
  border-radius: 15px;
  z-index: 12;
}

.roof-snow-10{
  position: absolute;
  top: 25%;
  left: 25%;
  width: 4vh;
  height: 6vh;
  background: #e2e2e2;
  border-radius: 15px;
  z-index: 11;
}

.roof-snow-11{
  position: absolute;
  top: 22%;
  left: 33%;
  width: 4vh;
  height: 10vh;
  background: #e2e2e2;
  border-radius: 15px;
  z-index: 11;
}

.chimney-top{
  width: 20%;
  height: 3vh;
  background: #272828;
  border-radius: 5px;
  margin: 1px 0px 0px 10%; 
}

.chimney-top-block{
  width: 70%;
  height: 100%;
  border-radius: 5px;
  background: #323535;
}

.chimney-bottom{
  width: 20%;
  height: 10vh;
  border-radius: 5px;
  background: #323535;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-left: 10%;
}

.chimney-block-1{
  border-radius: 5px;
  width: 24%;
  height: 31%;
  background: #272828;
}

.chimney-block-2{
  border-radius: 5px;
  width: 48%;
  height: 31%;
  background: #272828;
}

.roof{
  width: 100%;
  height: 2vh;
  background: #8faaaa;
  border-radius: 5px;
  margin: 1px 0px 1px 0px;
}

.house-box{
  position: relative;
  width: 100%;
  height: 41vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  border-radius: 5px;
  background: #323535;
}

.box-block-1{
  width: 7%;
  height: 6%;
  background: #272828;
  border-radius: 5px;
}

.box-block-2{
  width: 12%;
  height: 6%;
  background: #272828;
  border-radius: 5px;
}

.house-window-1, .house-window-2, .house-window-3{
  position: absolute;
  width: 10vh;
  height: 16vh;
  background: #382914;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  border: 4px solid #302311;
}

.house-window-1{
  top: 30%;
  left: 10%;
}

.house-window-2{
  top: 30%;
  right: 10%;
}

.window-glass{
  width: 40%;
  height: 44%;
  border-radius: 5px;
  background: #e7ff54;
  animation: window-fire 2s ease alternate infinite;
}

.neon-sign{
  position: absolute;
  top: 5%;
  font-weight: bold;
  font-size: 30px;
  animation: neonGlow 2s infinite alternate cubic-bezier(0.455, 0.030, 0.515, 0.955);
  color: #88adea;
  padding: 5px 10px;
  border: 2px solid #88adea;
  border-radius: 5px;
}

.santa-claus{
  position: absolute;
  top: 32%;
  left: 45%;
  height: auto;
  z-index: 13;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.santa-claus-head{
  position: relative;
  width: 8vh;
  height: 8vh;
  margin-bottom: -13%;
  border-radius: 50%;
  background: #fcbb62;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.claus-eye-1, .claus-eye-3{
  width: 2vh;
  height: 1vh;
  background: #272828;
  border-radius: 3px;
}

.claus-eye-2{
  width: 1vh;
  height: 0.2vh;
  background: #272828;
}

.claus-mouth{
  position: absolute;
  bottom: 10%;
  width: 2vh;
  height: 1vh;
  background: #fc8b61;
  border-radius: 3px;
  z-index: 12;
}

.santa-claus-beard{
  margin-bottom: -35%;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  z-index: 11;
}

.claus-beard-1{
  width: 5vh;
  height: 2vh;
  background: #e8d5bb;
  border-radius: 5px;
  margin-top: -5px;
}

.claus-beard-2{
  width: 7vh;
  height: 2vh;
  background: #e8d5bb;
  border-radius: 5px;
  margin-top: -5px;
}

.claus-beard-3{
  width: 8vh;
  height: 2vh;
  background: #e8d5bb;
  border-radius: 5px;
  margin-top: -5px;
}

.claus-beard-4{
  width: 9vh;
  height: 2vh;
  background: #e8d5bb;
  border-radius: 5px;
  margin-top: -5px;
}

.santa-claus-body{
  position: relative;
  width: 15vh;
  height: 15vh;
  border-radius: 50%;
  background: #ad0101;
}

.claus-arm-1{
  position: absolute;
  top: 10%;
  right: -70%;
  display: flex;
  flex-direction: row;
  transform-origin: left;
  transform: rotate(-45deg);
  animation: shake-right-hand 2s ease alternate infinite;
}

.claus-arm-2{
  position: absolute;
  top: 55%;
  left: -30%;
  display: flex;
  flex-direction: row-reverse;
  transform: rotate(-90deg)
}

.arm-top{
  width: 8vh;
  height: 3vh;
  background: #ad0101;
  border-radius: 10px;
}

.arm-bottom-1{
  width: 1vh;
  height: 3vh;
  background: #e8d5bb;
  border-radius: 10px;
  margin-left: -5%;
}

.arm-bottom-2{
  width: 5vh;
  height: 3vh;
  background: #e8d5bb;
  border-radius: 10px;
  margin-left: -5%;
}

.claus-body-bottom{
  margin-top: -35%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  z-index: 11;
}

.body-bottom-1{
  width: 9vh;
  height: 3vh;
  background: #e8d5bb;
  border-radius: 10px;
}

.body-bottom-2{
  width: 5vh;
  height: 3vh;
  background: #e8d5bb;
  border-radius: 10px;
  margin-left: -5px;
}

.legs-top{
  margin-top: -28%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.legs-top-1{
  width: 6vh;
  height: 6vh;
  border-radius: 50%;
  background: #ad0101;
}

.legs-top-1:last-child{
  margin-left: -10px;
}

.legs-bottom{
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.legs-bottom-1{
  width: 3vh;
  height: 4vh;
  background: #ad0101;
  overflow: hidden;
}

.legs-bottom-1:last-child{
  margin-left: 10px;
}


.happy-message{
  position: absolute;
  top: 10%;
  left: 35%;
  width: 20vh;
  height: 20vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 13;
}

.happy-message-1{
  position: absolute;
  top: 0%;
  left: 0%;
  width: 150px;
  height: 40px;
  border-radius: 10px;
  border: 2px solid #88adea;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  animation: buble-message 10s 2.5s ease infinite alternate;
  transform: scale(0);
  color: #88adea;
}

.happy-message-2{
  position: absolute;
  bottom: 25%;
  right: 15%;
  width: 8vh;
  height: 4vh;
  border-radius: 10px;
  border: 2px solid #88adea;
  animation: buble-message 10s 2.25s ease infinite alternate;
  transform: scale(0);
}

.happy-message-3{
  position: absolute;
  bottom: 0%;
  right: 0%;
  width: 4vh;
  height: 2vh;
  border-radius: 10px;
  border: 2px solid #88adea;
  animation: buble-message 10s 2s ease infinite normal;
  transform: scale(0);
}

.cristmas-deer-1{
  position: fixed;
  top: 35%;
  right: -20%;
  width: 8vh;
  height: 5vh;
  border-radius: 50%;
  background: #111030;
  z-index: 12;
  animation: deer-1-move 10s linear infinite;
}

.cristmas-deer-2{
  position: fixed;
  top: 35%;
  right: -25.5%;
  width: 8vh;
  height: 5vh;
  border-radius: 50%;
  background: #111030;
  z-index: 12;
  animation: deer-1-move 10s linear infinite;
}

.deer-horns{
  position: absolute;
  top: -200%;
  left: 35%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.deer-horns-1{
  width: 0.5vh;
  height: 5vh; 
  border-radius: 3vh;
  background: #111030;
  transform: rotate(15deg);
}

.deer-horns-2{
  position: absolute;
  top: 15%;
  right: 5%;
  width: 3vh;
  height: 0.5vh; 
  border-radius: 3vh;
  background: #111030;
  transform: rotate(10deg);
}

.deer-horns-3{
  position: absolute;
  top: 50%;
  right: 10%;
  width: 1.5vh;
  height: 0.5vh; 
  border-radius: 3vh;
  background: #111030;
}

.deer-head{
  position: absolute;
  top: -90%;
  left: -10%;
  width: 5vh;
  height: 3vh;
  border-radius: 50%;
  background: #111030;
  transform: rotate(-65deg);
}

.deer-nose{
  position: absolute;
  top: 5%;
  left: -10%;
  width: 1.5vh;
  height: 1.5vh;
  background: #111030;
  border-radius: 50%;
}

.deer-ear{
  position: absolute;
  top: 50%;
  right: -40%;
  width: 3vh;
  height: 1vh;
  background: #111030;
  border-radius: 50%;
  transform: rotate(25deg);
}

.deer-neck{
  position: absolute;
  top: -80%;
  left: 25%;
  width: .75vh;
  height: 5vh;
  background: #111030;
  border-radius: 1vh;
  transform: rotate(20deg);
}

.deer-tail{
  position: absolute;
  top: 15%;
  right: -10%;
  width: 3vh;
  height: 1.5vh;
  background: #111030;
  border-radius: 50%;
  transform: rotate(-45deg);
}

.deer-leg-1{
  width: 5vh;
  height: 5vh;
  position: absolute;
  bottom: -70%;
  left: -40%;
  transform: rotate(-15deg);
  transform-origin: top right;
  animation: legs-move 0.5s linear alternate infinite;
}

.deer-leg-2{
  width: 5vh;
  height: 5vh;
  position: absolute;
  bottom: -70%;
  left: -30%;
  transform: rotate(-15deg);
  transform-origin: top right;
  animation: legs-move 0.5s .5s linear alternate infinite;
}

.deer-leg-3{
  width: 5vh;
  height: 5vh;
  position: absolute;
  bottom: -90%;
  right: -30%;
  transform-origin: top left;
  animation: legs-move 0.5s linear alternate infinite;
}

.deer-leg-3 .leg-top{
  position: absolute;
  top: -10%;
  left: 18%;
  width: 0.5vh;
  height: 2.5vh;
  background: #111030;
  border-radius: 1vh;
}

.deer-leg-3 .leg-bottom{
  position: absolute;
  top: 20%;
  left: 35%;
  width: 0.5vh;
  height: 2.5vh;
  background: #111030;
  border-radius: 1vh;
}

.deer-leg-4{
  width: 5vh;
  height: 5vh;
  position: absolute;
  bottom: -90%;
  right: -20%;
  transform-origin: top left;
  animation: legs-move 0.5s .5s linear alternate infinite;
}

.deer-leg-4 .leg-top{
  position: absolute;
  top: -10%;
  left: 18%;
  width: 0.5vh;
  height: 2.5vh;
  background: #111030;
  border-radius: 1vh;
}

.deer-leg-4 .leg-bottom{
  position: absolute;
  top: 20%;
  left: 35%;
  width: 0.5vh;
  height: 2.5vh;
  background: #111030;
  border-radius: 1vh;
}

.leg-top{
  position: absolute;
  top: 20%;
  right: -15%;
  width: 3vh;
  height: 0.5vh;
  background: #111030;
  border-radius: 1vh;
  transform: rotate(-60deg);
}
.leg-bottom{
  position: absolute;
  bottom: 1%;
  right: 22%;
  width: 0.5vh;
  height: 2.5vh;
  background: #111030;
  border-radius: 1vh;
}

.cristmas-wagon{
  position: fixed;
  top: 36%;
  right: -35%;
  width: 15vh;
  height: 5vh;
  border-radius: 50%;
  background: #111030;
  z-index: 12;
  animation: deer-1-move 10s linear infinite;
}

.wagon-top-1{
  position: absolute;
  top: -1%;
  width: 15vh;
  height: 2.5vh;
  background: #111030;
}

.wagon-top-2{
  position: absolute;
  top: -30%;
  left: -5%;
  width: 3vh;
  height: 3vh;
  border-radius: 50%;
  background: #111030;
}
.wagon-top-3{
  position: absolute;
  top: -60%;
  right: -5%;
  width: 7vh;
  height: 4vh;
  border-radius: 1vh;
  background: #111030;
}

.wagon-top-4{
  position: absolute;
  top: -60%;
  right: 24%;
  width: 4vh;
  height: 4vh;
  border-radius: 50%;
  background: #111030;
}

.wagon-top-5{
  position: absolute;
  top: -85%;
  right: -10%;
  width: 2vh;
  height: 2vh;
  border-radius: 50%;
  background: #111030;
}

.wagon-bottom-1{
  position: absolute;
  bottom: -45%;
  right: 25%;
  width: 0.5vh;
  height: 4vh;
  border-radius: 2vh;
  background: #111030;
  transform: rotate(-45deg);
}

.wagon-bottom-2{
  position: absolute;
  bottom: -45%;
  left: 25%;
  width: 0.5vh;
  height: 4vh;
  border-radius: 2vh;
  background: #111030;
  transform: rotate(45deg);
}

.wagon-bottom-3{
  position: absolute;
  bottom: -40%;
  width: 15vh;
  height: 0.5vh;
  border-radius: 2vh;
  background: #111030;
}

.wagon-bottom-4{
  position: absolute;
  bottom: -40%;
  left: -5%;
  width: 1.5vh;
  height: 1.5vh;
  border-radius: 50%;
  background: #111030;
}

.tooltip.top_tooltip{
  top: -80px;
}

.cristmas-pres-box-1{
  position: absolute;
  bottom: 1%;
  left: 35%;
  margin-right: 30px;
  text-transform: uppercase;
  letter-spacing: 2px;
  width: 10vh;
  height: 6vh;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  font-weight: 700;
  z-index: 14;
  background: #3f1fce;
}

.cristmas-pres-box-2{
  position: absolute;
  bottom: 0%;
  left: 18%;
  margin-right: 30px;
  text-transform: uppercase;
  letter-spacing: 2px;
  width: 15vh;
  height: 8vh;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  font-weight: 700;
  z-index: 14;
  background: #ad0101;
  z-index: 14;
}

.cristmas-pres-box-3{
  position: absolute;
  bottom: 0%;
  left: 52%;
  margin-right: 30px;
  text-transform: uppercase;
  letter-spacing: 2px;
  width: 12vh;
  height: 7vh;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  font-weight: 700;
  z-index: 14;
  background: #ad0101;
  z-index: 14;
}

.cristmas-pres-box-top-1{
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
  border-bottom: 1px solid #080025;
  width: 11vh;
  height: 2vh;
  border-radius: 2vh;
  background: #3f1fce;
}

.cristmas-pres-box-top-1::before{
  content: '';
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
  width: 2vh;
  height: 2vh;
  background: #080025;
}


.cristmas-pres-box-top-2{
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 16vh;
  height: 3vh;
  border-radius: 3vh;
  background: #ad0101;
  border-bottom: 1px solid #700000;
}

.cristmas-pres-box-top-2::before{
  content: '';
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
  width: 2.5vh;
  height: 3vh;
  background: #c6db05;
}

.cristmas-pres-box-top-3{
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 13vh;
  height: 2vh;
  border-radius: 3vh;
  background: #ad0101;
  border-bottom: 1px solid #700000;
}

.cristmas-pres-box-top-3::before{
  content: '';
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
  width: 2.5vh;
  height: 2vh;
  background: #c6db05;
}


.cristmas-pres-box-1::before{
  content: '';
  height: 6vh;
  width: 2vh;
  background: #080025;
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
}

.cristmas-pres-box-2::before{
  content: '';
  height: 8vh;
  width: 2vh;
  background: #c6db05;
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
}

.cristmas-pres-box-3::before{
  content: '';
  height: 7vh;
  width: 2vh;
  background: #c6db05;
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
}


.cristmas-pres-box-1::after{
  content: '';
  height: 1vh;
  width: 10vh;
  background: #080025;
  position: absolute;
  top: 60%;
  left: 0%;
  transform: translateY(-50%);
}

.cristmas-pres-box-2::after{
  content: '';
  height: 1vh;
  width: 15vh;
  background: #c6db05;
  position: absolute;
  top: 60%;
  left: 0%;
  transform: translateY(-50%);
}

.cristmas-pres-box-3::after{
  content: '';
  height: 1vh;
  width: 12vh;
  background: #c6db05;
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
}

.tooltip{
  position: absolute;
  width: 100px;
  height: 45px;
  background: #fff;
  color: #111030;
  top: 0;
  left: -100%;
  font-weight: 700;
  font-size: 10px;
  border-radius: 10px;
  opacity: 0;
  transition: all 0.5s ease;
}

.cristmas-pres-box-1:hover, .cristmas-pres-box-2:hover, .cristmas-pres-box-3:hover{
  animation: shake-present 1s ease;
}

.cristmas-pres-box-1:hover .tooltip{
  opacity: 1;
}

.cristmas-pres-box-2:hover .tooltip{
  opacity: 1;
}

.cristmas-pres-box-3:hover .tooltip{
  opacity: 1;
}

.top_tooltip:before{
  content: "";
  position: absolute;
  bottom: -10px;
  right: 0px;
  border-left: 10px solid transparent;
  border-right: 10px solid #fff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.auxiliary-window{
  position: absolute;
  right: 5%;
  top: 50%;
  z-index: 20;
  padding: 10px;
  color: #080025;
  text-transform: uppercase;
  border: 2px solid #080025;
  border-radius: 2vh;
  animation: buble-message-1 5s 2s ease alternate;
  transform: scale(0);
  animation-iteration-count: 1;
}

.auxiliary-window p{
  text-align: center;
}

@keyframes shake-present {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

@keyframes deer-1-move{
  0% {
    transform: translateX(0vw);
  }
  100% {
    transform: translateX(-135vw);
  }
}

@keyframes legs-move{
  0% {
    transform: rotate(25deg);
  }
  100% {
    transform: rotate(-5deg);
  }
}

@keyframes buble-message{
  0%{
    transform: scale(0);
  }
    2.5%{
    transform: scale(1.1);
  }
    5%{
    transform: scale(1);
  }
    96%{
    transform: scale(1);
  }
    98%{
    transform: scale(1.1);
  }
    100%{
    transform: scale(0);
  }
}


@keyframes buble-message-1{
  0%{
    transform: scale(0);
  }
    10%{
    transform: scale(1.1);
  }
    13%{
    transform: scale(1);
  }
    97%{
    transform: scale(1);
  }
    90%{
    transform: scale(1.1);
  }
    100%{
    transform: scale(0);
  }
}

@keyframes neonGlow {
  0% {
    text-shadow: 0 0 40px  rgba(66,220,219,.8),
                 0 0 60px  rgba(66,220,219,.8),
                 0 0 80px  rgba(66,220,219,.5),
                 0 0 100px rgba(66,220,219,.5),
                 0 0 140px rgba(66,220,219,.5),
                 0 0 200px rgba(66,220,219,.5);
    box-shadow: none;
  }
  100% {
    text-shadow: 0 0 20px rgba(66,220,219,.8),
                 0 0 30px rgba(66,220,219,.8),
                 0 0 40px rgba(66,220,219,.8),
                 0 0 50px rgba(66,220,219,.5),
                 0 0 80px rgba(66,220,219,.5);
    box-shadow: 0px 0px 14px #12c2c4;
  }
}

@keyframes shake-right-hand{
  0% {
    transform: rotate(-45deg)
  }
  50%{
    transform: rotate(-50deg)
  }
  100% {
    transform: rotate(-40deg)
  }
}

@keyframes window-fire{
  0% {
    opacity: .5;
  }
  100% {
    opacity: 1;
  }
}

@keyframes northern-light {
  0% {
    transform: translate(5%, -2%);
  }
  25% {
    transform: translate(10%, 7%);
  }
  40% {
    transform: rotate(-10deg);
  }
  60% {
    transform: translate(7%, -2%);
  }
  85% {
    transform: translate(6%, 3%) rotate(12deg);
  }
  100% {
    transform: translate(5%, -2%);
  }
}

@-webkit-keyframes fire-star {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fire-star {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes wiggle-tree{
  0% {
    transform: rotate(0deg);
  }
  50%{
    transform: rotate(2deg);
  }
  100% {
    transform: rotate(-2deg);
  }
}

@keyframes moon-light-1-fire {
  0% {
    opacity: 0;
  }
  100% {
    opacity: .05;
  }
}

@keyframes moon-light-2-fire {
  0% {
    opacity: 0;
  }
  100% {
    opacity: .1;
  }
}

@keyframes moon-light-3-fire {
  0% {
    opacity: 0;
  }
  100% {
    opacity: .5;
  }
}


</style>

P.S.можно применять и с другими стилями, но делаете Вы это уже под свою ответственность .
С наступающим .🎄🤗

Портфолио https://forumd.ru/viewtopic.php?id=6390#p143472

Поделиться908.12.20 21:28

Автор: Алгол
Важная персона
Наградные баллы: 266
Уважение: +745
Достижения/подарки: 3 3

Дед Мороз над форумом ( Дед Мороз , кстати забавно моргает )+ снег как фон Форума

В html верх

Код:

 <!-- Noel -->
    <div class="noel">

        <!-- Noel Cap Back -->
        <div class="noel-cap-back"></div>
        <!-- /Noel Cap Back -->

        <!-- Noel Head-->
        <div class="noel-head">
            
            <!-- Noel Cap -->
            <div class="noel-cap"></div>
            <!-- /Noel Cap -->

            <!-- Noel Eye -->
            <div class="noel-eye left">
                <div class="noel-iris left"></div>
            </div>
            <div class="noel-eye right">
                <div class="noel-iris right"></div>
            </div>
            <!-- /Noel Eye -->

            <!-- Noel Nose -->
            <div class="noel-nose"></div>
            <!-- /Noel Nose -->

            <!-- Noel Mouth -->
            <div class="noel-mouth"></div>
            <!-- /Noel Mouth -->

        </div>
        <!-- /Noel Head-->

        <!-- Noel Beard -->
        <div class="noel-beard"></div>
        <!-- /Noel Beard -->

    </div>
    <!-- /Noel -->

    <!-- Merry Christmas-->
    <p class="text">
        Дорогие Друзья
        <small class="small">Всех с   <b class="yellow">Наступающим</b><b class="green"> 🎄Новым годом! !<b/></small>
    </p>
    <!-- /Merry Christmas -->


<style> body{
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0CAYAAADL1t+KAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTFCN0Y1NTYyMjczMTFFMUFCRDRFQUNEMjAzMjJFMkQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RkU1MTk3OTQyMjc0MTFFMUFCRDRFQUNEMjAzMjJFMkQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBMUI3RjU1NDIyNzMxMUUxQUJENEVBQ0QyMDMyMkUyRCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBMUI3RjU1NTIyNzMxMUUxQUJENEVBQ0QyMDMyMkUyRCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhaMNc4AABHpSURBVHja7N3BTlzX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'),
            url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY51AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTFCN0Y1NEUyMjczMTFFMUFCRDRFQUNEMjAzMjJFMkQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTFCN0Y1NEYyMjczMTFFMUFCRDRFQUNEMjAzMjJFMkQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBMUI3RjU0QzIyNzMxMUUxQUJENEVBQ0QyMDMyMkUyRCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBMUI3RjU0RDIyNzMxMUUxQUJENEVBQ0QyMDMyMkUyRCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Prq/JMMAAAvPSURBVHja7N19bxTX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'),
            url('data:image/png;base64,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'); 
            background-color: #333;
            font-family: helvetica, arial;
            -webkit-animation: snow 20s linear infinite;
            -moz-animation: snow 20s linear infinite;
            -ms-animation: snow 20s linear infinite;
            animation: snow 20s linear infinite;
        }

        /* 
        // Snow
        //-------------------------------*/

        /* Animation */
 
        @keyframes snow {
            0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
            100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
        }
         
        @-moz-keyframes snow {
            0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
            100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
        }
         
        @-webkit-keyframes snow {
            0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 
            100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
        }
         
        @-ms-keyframes snow {
            0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
            100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
        } 

        /* 
        // Noel
        //-------------------------------*/

        .noel{ 
            margin: 20px auto 50px;
            position: relative;
            width: 50%;
            height: 200px;
            width: 200px;
        }

        /* 
        // Noel Cap Back
        //-------------------------------*/

        .noel-cap-back{
            background: #CB0F27;
            border-radius: 50%;
            height: 100%;
            position: absolute;
            top: 0;
            width: 15%;
            -webkit-transform: rotate(30deg);
            -moz-transform: rotate(30deg);
            -ms-transform: rotate(30deg);
            -o-transform: rotate(30deg);
            transform: rotate(30deg); 
        }

        .noel-cap-back:before{
            content: '';
            background: #FFF;
            border-radius: 50%;
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 15%;
        }
 
        /* 
        // Noel Head
        //-------------------------------*/
 
        .noel-head{
            background: #F1CEA9; 
            border-radius: 50%;
            border-bottom-right-radius: 45%;
            border-bottom-left-radius: 45%;
            position: absolute; 
            top: 0; left: 0; right: 0; bottom: 0;
            overflow: hidden;
        }

        .noel-cap{
            background: #CB0F27;
            border-radius: 50%;
            height: 35%;
            position: absolute; 
            top: 0; left: 0; right: 0;
        }

        .noel-cap:after{
            background: #FFF;
            border-radius-top-left: 50%;
            border-radius-top-right: 50%;
            content: '';
            height: 35%;
            position: absolute; 
            bottom: 0; left: 0; right: 0;
        } 

        /* Eyes
        //-------------------------------*/

        .noel-eye{
            background: #fff;
            border-top: #ddd solid 2px;
            border-radius: 50%;
            height: 30%;
            position: absolute;
            top: 36%;
            width: 25%;
        }
 
        .noel-eye.left{
            -webkit-transform: rotate(20deg);
            -moz-transform: rotate(20deg);
            -ms-transform: rotate(20deg);
            -o-transform: rotate(20deg);
            transform: rotate(20deg); 
            left: 25%;
        }

        .noel-eye.right{
            -webkit-transform: rotate(-20deg);
            -moz-transform: rotate(-20deg);
            -ms-transform: rotate(-20deg);
            -o-transform: rotate(-20deg);
            transform: rotate(-20deg); 
            right: 25%;
        }

        /* Detail */

        .noel-eye:before{ 
            color: #444;
            font-size: 25px;
            position: absolute; top: 25%;
        }

        .noel-eye.left:before{
            content: '>';
            left: -17%;
        }

        .noel-eye.right:before{
            content: '<';
            right: -17%;
        }

        /* Iris
        //-------------------------------*/

        .noel-eye:after{
            background: #F1CEA9;
            content: '';
            border-radius: 50%;
            position: absolute; 
            top: 0; right: 0; left: 0; 
            height: 0;
            -webkit-animation: eye 3s linear infinite;
            -moz-animation: eye 3s linear infinite;
            -o-animation: eye 3s linear infinite;
            animation: eye 3s linear infinite; 
        }

        /* Animation */
 
        @keyframes eye {
            0%, 100% {height: 100%;}
            5%, 95% {height: 0;}
        }
         
        @-moz-keyframes eye {
            0%, 100% {height: 100%;}
            5%, 95% {height: 0;}
        }
         
        @-webkit-keyframes eye {
            0%, 100% {height: 100%;}
            5%, 95% {height: 0;}
        }
         
        @-ms-keyframes eye {
            0%, 100% {height: 100%;}
            5%, 95% {height: 0;}
        } 
 
        /* Iris */

        .noel-iris{
            background: #222;
            border-radius: 50%;
            height: 15%;
            position: absolute; 
            top: 40%;
            width: 15%;
        }

        .noel-iris.left{right: 17%;}

        .noel-iris.right{left: 17%;}    

        /* Noel Nose
        //-------------------------------*/
        
        .noel-nose{
            height: 10%;
            border-radius: 50%;
            border-bottom: #333 solid 3px;
            position: absolute;
            top: 63%; right: 43%; left: 43%;
        }
 
        .noel-nose:after,
        .noel-nose:before{
            content: '';
            height: 30%;
            border-radius: 50%;
            border-bottom: #333 solid 2px; 
            position: absolute; bottom: 5%;
            width: 50%;
        }
 
        .noel-nose:before{left: -40%;}
        .noel-nose:after{right: -40%;}

        /* Noel Mouth
        //-------------------------------*/
        
        .noel-mouth{
            border-radius: 30%;
            background: #F1CEA9;
            border: #fff solid 5px;
            height: 20%; 
            line-height: 400%; 
            position: absolute; 
            bottom: 0%; left: 30%; right: 30%;
            text-align: center;
            z-index: 5; 
        }

        .noel-mouth:after{
            content: '(';
            color: #222; 
            display: block;
            font-size: 50px;
            -webkit-transform: rotate(-100deg);
            -moz-transform: rotate(-100deg);
            -ms-transform: rotate(-100deg);
            -o-transform: rotate(-100deg);
            transform: rotate(-100deg); 
        }
 
        /* 
        // Noel Beard
        //-------------------------------*/

        .noel-beard{
            background: #FFF;
            border-radius: 50%;
            height: 30%;
            position: absolute; 
            top: 80%; left: 10%; right: 10%;
            z-index: 4;
        }

        .noel-beard:before,
        .noel-beard:after{
            background: #FFF;
            border-radius: 50%;
            content: '';
            position: absolute;
            top: -145%;
            height: 210%;
            width: 13%;
        }

        .noel-beard:before{
            -webkit-transform: rotate(-10deg);
            -moz-transform: rotate(-10deg);
            -ms-transform: rotate(-10deg);
            -o-transform: rotate(-10deg);
            transform: rotate(-10deg); 
            position: absolute;
            left: -10%;
        } 

        .noel-beard:after{
            -webkit-transform: rotate(10deg);
            -moz-transform: rotate(10deg);
            -ms-transform: rotate(10deg);
            -o-transform: rotate(10deg);
            transform: rotate(10deg);  
            right: -10%; 
        } 

        /* 
        // Text
        //-------------------------------*/

        .text{
            color: #fff;
            font-size: 50px;
            padding: 20px 0;
            text-align: center;
            text-shadow: 1px 3px 3px rgb(0, 0, 0);
        }

        .small{
            display: block;
            font-size: 60%;
            margin-top: 20px;
        }

        .yellow{color: #FFDF00;}
        .green{color: #009C3B;}


</style>

Надпись легко можно заменить на свою .

Портфолио https://forumd.ru/viewtopic.php?id=6390#p143472

Поделиться1023.12.20 15:59

Автор: Automation Baby
IT-прораб
Наградные баллы: 745
Уважение: +2991
Достижения/подарки: 6 2

На аватаре идёт снег

В хтмл-верх

Скрытый текст:

Страница: 1 2 »

ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Меню навигации

Пользовательские ссылки

Объявление

Проект от команды FD

Загадочный Дом «Кузнечик»

Мийрон

FD Chat - Чат на вашем форуме

Макет для сайта «Fantasy Calalogue»

Поддержать проект

Информация о пользователе

Новогодние украшения для форумов MyBB.ru

Сообщений 1 страница 10 из 17

Поделиться125.11.20 18:02

Поделиться205.12.20 22:19

Поделиться305.12.20 23:39

Поделиться406.12.20 03:45

Поделиться506.12.20 18:47

Поделиться607.12.20 03:03

Поделиться708.12.20 17:55

Поделиться808.12.20 19:00

Поделиться908.12.20 21:28

Поделиться1023.12.20 15:59