ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Javascript, Jquery и CSS решения » Скрипты и стили для МуBB.ru » Новогодние украшения для форумов MyBB.ru (JS, CSS)
Началась зима - и многим пришла в голову идея, что неплохо бы как-то преобразить форумы. Существует масса скриптов для этого и кодов для этого. Здесь вы можете поделиться скриптами и css-решениями по украшению форумов.
Также вы можете обратить внимание на топики соседнего раздела (на майбб форумах эти скрипты и коды также будут работать):
Работает только для форумов mybb:
Шапочка на аватар:
Туда где Css или в хтмл-верх в тегах <style>тут код<style>:
Варианты шапочек:
Красная | Синяя |
|
|
Снег на категориях и топиках :
html-верх.
Картинки снега , можно заменить на свои.
Новогоднее предсказание 2021 и лунный Календарь
Добавляет под форму ответа , кнопочку , нажав на которую ,Вы попадёте на страничку с быком и ёлкой,
На ёлке фонарики, нажав на любой фонарик , он упадёт, его поймает бык, и выдаст Вам предсказание на год.
Короткий путь 1
Код скопировать и вставить или в объявление или в форму ответа или в свою подпись .
Короткий путь 2
Кнопка над формой ответа в виде маленькой ёлочки, код скопировать и вставить в форму ответа
Длинный путь :
Код размещаете на отдельной странице, ссылку , копируете и размещаете в коде кнопки.
Все предсказания , можно менять на свои, как и ёлку с бычком и фонариками.
Хорошего 🎄Нового 🎄года 🎄
Снежный фон Форума
Своей картинкой можно полностью преобразить форум и задать новогоднее настроение .
Было:
Стало:
В html-Верх
Картинку можно менять на свою. 
Санта с колокольчиком и возможностью отключения для каждого пользователя 
Кнопка отключения скрипта под формой ответа , так же с Сантой и надписью « On/Off»
В html низ
После НГ , картинку можно заменить на любую , у нас на форуме там был бегающий котик.
Потому и скрипт , называется « котик»
Сани + Звёзды поверх всего Форума параллакс
В 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>Вообще, цвет можете менять сами , на любой какой пожелаете и у звёзд в том числе .
Новогоднее настроение
Преобразите свой форум в считанные секунды , посредством дополнения к стандартному дизайну .
Единственное условие, у Вас должен быть выбран стандартный стиль 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.можно применять и с другими стилями, но делаете Вы это уже под свою ответственность .
С наступающим .🎄🤗
Дед Мороз над форумом ( Дед Мороз , кстати забавно моргает )+ снег как фон Форума
В 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>Надпись легко можно заменить на свою .
На аватаре идёт снег
В хтмл-верх
Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Javascript, Jquery и CSS решения » Скрипты и стили для МуBB.ru » Новогодние украшения для форумов MyBB.ru (JS, CSS)
