Началась зима - и многим пришла в голову идея, что неплохо бы как-то преобразить форумы. Существует масса скриптов для этого и кодов для этого. Здесь вы можете поделиться скриптами и css-решениями по украшению форумов.
Также вы можете обратить внимание на топики соседнего раздела (на майбб форумах эти скрипты и коды также будут работать):
Новогодние украшения (css)
Анимированный падающий снег на сайт/форум
Динамичная новогодняя гирлянда
Новогоднее предсказание (ротатор)
Новогодние украшения для форумов MyBB.ru
Сообщений 1 страница 10 из 17
Поделиться125.11.2020 18:02:17
Поделиться205.12.2020 22:19:58
Шапочка на аватар:
Туда где Css или в хтмл-верх в тегах <style>тут код<style>:
Варианты шапочек:
Красная | Синяя |
Поделиться305.12.2020 23:39:27
Снег на категориях и топиках :
html-верх.
Картинки снега , можно заменить на свои.
Поделиться406.12.2020 03:45:48
Новогоднее предсказание 2021 и лунный Календарь
Добавляет под форму ответа , кнопочку , нажав на которую ,Вы попадёте на страничку с быком и ёлкой,
На ёлке фонарики, нажав на любой фонарик , он упадёт, его поймает бык, и выдаст Вам предсказание на год.
Короткий путь 1
Код скопировать и вставить или в объявление или в форму ответа или в свою подпись .
Короткий путь 2
Кнопка над формой ответа в виде маленькой ёлочки, код скопировать и вставить в форму ответа
Длинный путь :
Код размещаете на отдельной странице, ссылку , копируете и размещаете в коде кнопки.
Все предсказания , можно менять на свои, как и ёлку с бычком и фонариками.
Хорошего 🎄Нового 🎄года 🎄
Поделиться607.12.2020 03:03:54
Санта с колокольчиком и возможностью отключения для каждого пользователя
Кнопка отключения скрипта под формой ответа , так же с Сантой и надписью « On/Off»
В html низ
После НГ , картинку можно заменить на любую , у нас на форуме там был бегающий котик.
Потому и скрипт , называется « котик»
Поделиться708.12.2020 17:55:04
Сани + Звёзды поверх всего Форума параллакс
В 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>
Вообще, цвет можете менять сами , на любой какой пожелаете и у звёзд в том числе .
Поделиться808.12.2020 19:00:50
Новогоднее настроение
Преобразите свой форум в считанные секунды , посредством дополнения к стандартному дизайну .
Единственное условие, у Вас должен быть выбран стандартный стиль 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.можно применять и с другими стилями, но делаете Вы это уже под свою ответственность .
С наступающим .🎄🤗
Поделиться908.12.2020 21:28:29
Дед Мороз над форумом ( Дед Мороз , кстати забавно моргает )+ снег как фон Форума .
В 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>
Надпись легко можно заменить на свою .
Поделиться1023.12.2020 15:59:52
На аватаре идёт снег:
В хтмл-верх
<!-- Снег на аватаре --> <style> .pa-avatar { position: relative; } .sneg { position: absolute; width: 180px; /*ширина аватара, должна совпадать с шириной в настройках*/ height: 100%; margin-left: 0px; /*отступ слева*/ margin-top: 0px; /*отступ сверху*/ background: url(https://www.beesona.ru/upload/436/c99bea14e47a84ae45ce6bc13834129d.gif) repeat; /*можно поставить свою картинку с анимацией снежинок*/ } </style> <script> $(document).ready(function(){ $(".pa-avatar img").before("<div class='sneg'></div>"); }); </script> <!--конец -->