Новогодний конкурс 2021 года!
1,00
р.
В прошлом году такой конкурс был очень веселый! ) Давайте проведем и в этом тоже!
А чего делать-то будем?
Для победы в соревновании необходимо реализовать как минимум одну анимацию из следующих:
анимация елочки анимация Деда Мороза анимация снежинки и падающего снега
Чем больше сценариев будет в вашем ответе, тем лучше. При желании, вы можете добавить дополнительные анимации на тему Нового Года. Они будут «плюсом» к обязательным анимациям.
Всем веселья! Всем праздника!
Ответ
CSS. Простая снежинка.
upd_one. Добавим немного падающего снега.
upd_two. Добавим Новогоднюю ёлку.
upd_three. Добавим Деда Мороза.
upd_four. Добавим снеговика.
upd_five. Добавим горы и луну.
upd_six. Добавим Новогодний шар с логотипом ruSO.
upd_seven. Добавим лопату и ведро.
body { width: 100% height: 100vh overflow: hidden background: #afd9f7 background: linear-gradient(to right, #afd9f7, #459cf7) }
/*горы*/
.mountains { position: absolute left: 0 right: 0 bottom: 0 height: 100vh }
.mountain_1, .mountain_2, .mountain_3, .mountain_4, .mountain_5, .mountain_6, .mountain_7, .mountain_8, .mountain_9 { position: fixed bottom: 0 width: 0 height: 0 }
.mountain_1 { margin-left: -5vw border-right: 400px solid transparent border-left: 150px solid transparent }
.mountain_2 { margin-left: 15vw border-right: 400px solid transparent border-left: 400px solid transparent }
.mountain_3 { margin-left: 70vw border-right: 150px solid transparent border-left: 400px solid transparent }
.mountain_4 { margin-left: -15vw border-right: 400px solid transparent border-left: 500px solid transparent }
.mountain_5 { margin-left: 25vw border-right: 350px solid transparent border-left: 150px solid transparent }
.mountain_6 { margin-left: 70vw border-right: 200px solid transparent border-left: 200px solid transparent }
.mountain_7 { margin-left: 15vw border-right: 150px solid transparent border-left: 250px solid transparent }
.mountain_8 { margin-left: 50vw border-right: 300px solid transparent border-left: 150px solid transparent }
.mountain_9 { margin-left: 60vw border-right: 300px solid transparent border-left: 250px solid transparent }
.mountain_one { border-bottom: 120px solid #459cf7 }
.mountain_two { border-bottom: 100px solid #50aef1 }
.mountain_three { border-bottom: 55px solid #79c4f9 }
.mount_snow { width: 100% height: 20px background-color: #daedfb position: absolute bottom: 0 left: 0 }
.mount_snow:before, .mount_snow:after { content: "" border-radius: 50% background-color: #daedfb position: absolute }
.mount_snow:before { left: 10% height: 36px transform: rotate(5deg) bottom: -4px width: 40vw }
.mount_snow:after { right: -10% height: 20px bottom: 6px width: 65vw }
/*/горы*/
/*луна*/
.moon { position: absolute top: 15px right: 15px width: 30px height: 30px border-radius: 50% background-color: cornsilk box-shadow: 3px 3px 20px 6px #fff }
.moon:before { content: "" display: block position: absolute top: 2px left: 0px width: 26px height: 26px border-radius: 50% background-color: antiquewhite -webkit-clip-path: polygon(0 0, 95% 0, 95% 30%, 70% 40%, 80% 80%, 40% 70%, 10% 90%) clip-path: polygon(0 0, 95% 0, 95% 30%, 70% 40%, 80% 80%, 40% 70%, 10% 90%) }
/*/луна*/
/*снежинка*/
.snowflake_container { position: relative width: 100% height: 170px animation: 5s infinite linear animate z-index: 3 }
.snowflake { position: absolute top: 25px left: 50% width: 5px height: 150px background-color: white box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.1) }
.snowflake:before, .snowflake:after { content: "" position: absolute left: -12px width: 25px height: 25px border: 5px solid snow border-top: 0 border-left: 0 transform: rotate(45deg) box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.1) }
.snowflake:after { bottom: 0 transform: rotate(-135deg) }
.snow__two { transform: rotate(90deg) }
.snow__three { transform: rotate(45deg) }
.snow__four { transform: rotate(-45deg) }
@keyframes animate { 100% { transform: rotate(360deg) } }
/*/снежинка*/
/*падающий_снег*/
.snow { position: fixed top: -20% cursor: default user-select: none color: #fff font-size: 2em font-family: Arial text-shadow: 0 0 1px rgba(0, 0, 0, 1) animation-duration: 10s, 3s animation-name: snow_f, snow_s animation-play-state: running, running animation-iteration-count: infinite, infinite animation-timing-function: linear, ease-in-out z-index: 2 }
@keyframes snow_f { 0% { top: -10% } 100% { top: 100% } }
@keyframes snow_s { 0% { transform: translateX(0px) } 50% { transform: translateX(80px) } 100% { transform: translateX(0px) } }
.snow:nth-of-type(0) { left: 1% animation-delay: 0s, 0s }
.snow:nth-of-type(1) { left: 10% animation-delay: 1s, 1s }
.snow:nth-of-type(2) { left: 20% animation-delay: 6s, .5s }
.snow:nth-of-type(3) { left: 30% animation-delay: 4s, 2s }
.snow:nth-of-type(4) { left: 40% animation-delay: 2s, 2s }
.snow:nth-of-type(5) { left: 50% animation-delay: 8s, 3s }
.snow:nth-of-type(6) { left: 60% animation-delay: 6s, 2s }
.snow:nth-of-type(7) { left: 70% animation-delay: 2.5s, 1s }
.snow:nth-of-type(8) { left: 80% animation-delay: 1s, 0s }
.snow:nth-of-type(9) { left: 90% animation-delay: 3s, 1.5s }
.snow:nth-of-type(10) { left: 99% animation-delay: 10s, 9s }
/*/падающий_снег*/
/*елка*/
.tree { position: absolute bottom: 10px right: 10px width: 0 height: 0 border-style: solid border-width: 0 40px 75px 40px border-color: transparent transparent green transparent }
.tree:before, .tree:after { content: '' display: block position: absolute top: -15px right: -34px width: 0 height: 0 border-style: solid border-width: 0 35px 60px 35px border-color: transparent transparent green transparent }
.tree:before { top: -35px right: -24px border-width: 0 25px 45px 25px }
.tree__trunk { position: absolute top: 75px right: -6px width: 10px height: 20px background: brown }
.star { position: absolute top: -60px left: -14px cursor: default user-select: none color: darkred font-size: 2em font-family: Arial text-shadow: 0 0 4px rgba(255, 255, 255, 0.5) animation: 3s infinite linear star z-index: 1 }
@keyframes star { 0% { color: darkred } 93% { color: red } 95% { color: gold } 98% { color: red } 100% { color: darkred } }
.tree__lights__one { position: absolute top: 44px right: -26px width: 60px height: 16px border-radius: 40% box-shadow: 0px 3px transform: rotateZ(-12deg) z-index: 1 }
.tree__lights__one:before { content: '' display: block position: absolute top: 16px left: -2px width: 6px height: 6px border-radius: 100% animation: blink_one 2s linear infinite }
.tree__lights__two { position: absolute top: 12px right: -18px width: 47px height: 16px border-radius: 50% box-shadow: 0px 3px transform: rotateZ(-16deg) z-index: 1 }
.tree__lights__two:before { content: '' display: block position: absolute top: 15px left: -6px width: 6px height: 6px border-radius: 100% animation: blink_two 1s linear infinite alternate }
.tree__lights__three { position: absolute top: -20px right: -12px width: 32px height: 16px border-radius: 50% box-shadow: 0px 3px transform: rotateZ(-16deg) z-index: 1 }
.tree__lights__three:before { content: '' display: block position: absolute top: 10px left: -8px width: 6px height: 6px border-radius: 100% animation: blink_three 1s linear infinite alternate }
@keyframes blink_one { 0% { box-shadow: 5px -1px #008bff, 24px 1px #fff, 40px 1px #ffdc00, 54px 0px #f00 } 50% { box-shadow: 5px -1px #f00, 24px 1px #008bff, 40px 1px #fff, 54px 0px #ffdc00 } 75% { box-shadow: 5px -1px #ffdc00, 24px 1px #f00, 40px 1px #00bcff, 54px 0px #fff } 100% { box-shadow: 5px -1px #fff, 24px 1px #ffdc00, 40px 1px #f00, 54px 0px #00bcff } }
@keyframes blink_two { 0% { box-shadow: 5px -1px #008bff, 20px 1px #fff, 34px 1px #ffdc00, 46px 0px #f00 } 50% { box-shadow: 5px -1px #f00, 20px 1px #008bff, 34px 1px #fff, 46px 0px #ffdc00 } 75% { box-shadow: 5px -1px #ffdc00, 20px 1px #f00, 34px 1px #00bcff, 46px 0px #fff } 100% { box-shadow: 5px -1px #fff, 20px 1px #ffdc00, 34px 1px #f00, 46px 0px #00bcff } }
@keyframes blink_three { 0% { box-shadow: 5px 3px #008bff, 20px 7px #f00, 34px 4px #ffdc00 } 50% { box-shadow: 5px 3px #ffdc00, 20px 7px #008bff, 34px 4px #f00 } 100% { box-shadow: 5px 3px #f00, 20px 7px #ffdc00, 34px 4px #008bff } }
/*/елка*/
/*дед_мороз*/
.ded_moroz_container { position: absolute bottom: 0 left: 10px }
body:hover .ded_moroz_container { animation: ded_moroz_container 0.6s 1 }
@keyframes ded_moroz_container { 0% { transform: rotate(0turn) } 25% { transform: rotate(0.02turn) scale(1.1) } 50% { transform: rotate(-0.02turn) scale(1.1) } 75% { transform: rotate(0.02turn) scale(1.1) } 100% { transform: rotate(0turn) scale(1) } }
.ded_moroz { position: absolute bottom: 20px animation: ded_moroz___head 4s linear infinite }
@keyframes ded_moroz___head { 0% { bottom: 13px } 45% { bottom: 13px } 50% { bottom: 20px } 92% { bottom: 20px } 98% { bottom: 13px } 100% { bottom: 13px } }
.ded_moroz_body { position: absolute left: -20px bottom: -50px width: 100px height: 120px background-color: #E30E0E border-radius: 100% animation: ded_moroz___body 4s linear infinite }
@keyframes ded_moroz___body { 0% { bottom: -50px } 2% { bottom: -53px } 4% { bottom: -50px } 8% { bottom: -53px } 10% { bottom: -50px } 12% { bottom: -53px } 14% { bottom: -50px } 18% { bottom: -53px } 20% { bottom: -50px } 22% { bottom: -53px } 24% { bottom: -50px } 28% { bottom: -53px } 30% { bottom: -50px } 100% { bottom: -50px } }
.ded_moroz_body:before, .ded_moroz_body:after { content: "" display: block position: absolute top: 53px left: 48px width: 4px height: 4px border-radius: 100% background-color: white }
.ded_moroz_body:after { margin-top: 10px }
.ded_moroz_beard { height: 60px width: 60px background-color: white border-radius: 0 50% 50% 50% transform: rotate(-135deg) }
.ded_moroz_face { position: relative bottom: 45px left: 6px height: 15px width: 48px border-radius: 15px background-color: #fcd9c3 }
.ded_moroz_eye_one, .ded_moroz_eye_two { position: relative height: 1px width: 10px border-top: 3px solid #262626 border-radius: 10px 10px 0 0 animation: ded_moroz___eye 4s linear infinite }
.ded_moroz_eye_one { top: 5px left: 6px }
.ded_moroz_eye_two { top: 1px left: 32px animation: ded_moroz___eye_two 4s linear infinite }
@keyframes ded_moroz___eye { 30% { border-top: 3px solid #262626 } 55% { border-top: 3px solid #262626 } 55.1% { border-top: 4px solid #262626 } 100% { border-top: 4px solid #262626 } }
@keyframes ded_moroz___eye_two { 30% { top: 1px border-top: 3px solid #262626 } 55% { top: 1px border-top: 3px solid #262626 } 55.1% { top: 0px border-top: 4px solid #262626 } 100% { top: 0px border-top: 4px solid #262626 } }
.ded_moroz_nose { position: relative top: 2px left: 19px height: 10px width: 10px border-radius: 50% background-color: #fbd1b6 }
.ded_moroz_mouth { position: relative top: 6px left: 18px height: 3px width: 13px border-radius: 0 0 13px 13px background-color: #262626 opacity: 0.8 animation: ded_moroz___mouth 4s linear infinite }
@keyframes ded_moroz___mouth { 0% { height: 3px } 55% { height: 3px } 55.1% { height: 6px } 100% { height: 6px } }
.ded_moroz_cap { position: absolute top: -45px left: 2px width: 54px height: 60px background: red border-radius: 100% 20% 0 0 box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2) text-align: center line-height: 70px text-transform: uppercase font-size: 13px font-family: monospace color: darkred font-weight: bold }
.ded_moroz_cap:before { content: "" display: block position: absolute bottom: -10px left: -1px width: 57px height: 18px border-radius: 100% / 50% transform: rotate(-2deg) box-shadow: inset 0 10px lightyellow }
.ded_moroz_cap:after { content: "" display: block position: absolute top: -10px right: -10px width: 20px height: 20px border-radius: 50% background: lightyellow box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2) }
/*/дед_мороз*/
/*снеговик*/
.snowman_container { position: absolute bottom: -4px right: 120px width: 30px height: 62px animation-name: snowman animation-duration: 2s animation-iteration-count: infinite }
@keyframes snowman { 0% { transform: rotate(6deg) right: 110px } 50% { transform: rotate(-6deg) right: 130px } 100% { transform: rotate(6deg) right: 110px } }
.snowman { position: relative width: 30px height: 62px }
.snowman_shadow { position: absolute bottom: 0 left: 0 width: 30px height: 12px background: radial-gradient(ellipse at center, rgba(68, 68, 68, 0.9) 0%, rgba(138, 174, 188, 0) 60%, rgba(206, 223, 235, 0) 100%) }
.snowman_body { position: absolute bottom: 5px left: 0 width: 30px height: 29px border-radius: 50% background: linear-gradient(to bottom, white 0%, #dbe8fc 100%) box-shadow: 7px -5px 0px rgba(0, 0, 0, 0.1) inset }
.snowman_head { position: absolute bottom: 30px left: 4px width: 20px height: 20px border-radius: 50% background: linear-gradient(to bottom, white 0%, #dbe8fc 100%) box-shadow: 7px -5px 0px rgba(0, 0, 0, 0.1) inset }
.snowman_coal { position: absolute width: 2px height: 2px border-radius: 100% box-shadow: 14px 36px 0px 0px #222, 14px 40px 0px 0px #222, 14px 44px 0px 0px #222, 10px 18px 0px 0px #222, 16px 18px 0px 0px #222 }
.snowman_carrot { position: absolute left: 1px top: 22px width: 0px height: 0px border-right: 14px solid orangered border-top: 2px solid transparent border-bottom: 2px solid transparent }
.snowman_scarf { position: absolute top: 20px left: 3px width: 24px height: 40px background: chocolate border-radius: 70% 70% 50% 50% -webkit-clip-path: polygon(1% 32%, 1% 21%, 98% 21%, 97% 35%, 98% 51%, 81% 35%, 95% 59%, 87% 66%, 71% 34%) clip-path: polygon(1% 32%, 1% 21%, 98% 21%, 97% 35%, 98% 51%, 81% 35%, 95% 59%, 87% 66%, 71% 34%) }
.snowman_hand_l { position: absolute left: -7px top: 24px width: 10px height: 20px background: #9b441b transform: rotate(290deg) -webkit-clip-path: polygon(18% 17%, 35% 30%, 38% 0, 41% 0, 41% 30%, 71% 16%, 79% 15%, 40% 38%, 39% 100%, 35% 100%, 34% 37%, 9% 16%) clip-path: polygon(18% 17%, 35% 30%, 38% 0, 41% 0, 41% 30%, 71% 16%, 79% 15%, 40% 38%, 39% 100%, 35% 100%, 34% 37%, 9% 16%) }
.snowman_hand_r { position: absolute left: 26px top: 26px width: 10px height: 20px background: #9b441b transform: rotate(65deg) -webkit-clip-path: polygon(18% 17%, 35% 30%, 38% 0, 41% 0, 41% 30%, 71% 16%, 79% 15%, 40% 38%, 39% 100%, 35% 100%, 34% 37%, 9% 16%) clip-path: polygon(18% 17%, 35% 30%, 38% 0, 41% 0, 41% 30%, 71% 16%, 79% 15%, 40% 38%, 39% 100%, 35% 100%, 34% 37%, 9% 16%) }
.snowman_bucket { position: absolute top: 0px left: 8px height: 0 width: 10px background-clip: padding-box border-top: 14px solid chocolate border-left: 2px solid transparent border-right: 2px solid transparent border-bottom-right-radius: 5px 50% border-bottom-left-radius: 5px 50% transform: rotate(185deg) }
/*/снеговик*/
/*шар*/
.ball_container { position: absolute top: 33px left: 103px width: 100px height: 100px margin: auto animation-name: ball_container animation-delay: 0s animation-duration: 2s animation-iteration-count: infinite animation-direction: normal transform-origin: 50% 0% animation-timing-function: linear }
@-webkit-keyframes ball_container { 0% { -webkit-transform: rotate(0deg) left: 98px } 25% { -webkit-transform: rotate(10deg) left: 93px } 75% { -webkit-transform: rotate(-10deg) left: 103px } 100% { -webkit-transform: rotate(0deg) left: 98px } }
.ball_hidden { position: absolute top: 0 left: 0 overflow: hidden width: 100px height: 100px border-radius: 100% }
.ball { position: absolute top: 0 left: 0 width: 100px height: 100px border-radius: 100% background: radial-gradient(circle at 100px 100px, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.8)) }
.ball:after { content: "" position: absolute top: 80% left: 60% width: 85% height: 100% border-radius: 50% background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 0) 50%) transform: translateX(-80px) translateY(-90px) skewX(-20deg) filter: blur(10px) }
.ball_snow { position: absolute top: 1px left: 2px width: 97px height: 99px border-radius: 100% background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 68%, #f0f0f0 68%, #ebeff5 79%, #c5d3e8 100%) box-shadow: -7px -5px 0px rgba(0, 0, 0, 0.1) inset }
.ball_snow_area { position: relative top: 63px width: 87px height: 10px margin: auto border-radius: 100% background: #fff }
.ball_thread { width: 1px position: absolute background-color: seagreen height: 100px top: -100px left: 50% }
.ball_thread:before { content: "" display: block position: absolute bottom: 4px left: -2px height: 8px width: 4px border: 1px solid seagreen border-radius: 50% background-color: yellowgreen }
.ball_thread:after { content: "" display: block position: absolute bottom: -2px left: -8px height: 10px width: 16px border-radius: 4px background-color: yellowgreen box-shadow: -7px 0px 0px rgba(0, 0, 0, 0.1) inset }
.ball_hidden .snow { position: absolute font-size: 0.5em }
.stackoverflow { position: absolute top: 45px left: 14px width: 100px height: 25px background-image: url(https://cdn.sstatic.net/Sites/ru/imgprites.svg?v=f508971f422f) background-position: 0 -510px background-size: 95px z-index: 1 }
/*/шар*/
/*лопата*/
.shovel { position: absolute bottom: 10px left: 210px width: 10px height: 50px transform: rotate(5deg) }
.shovel_handle { position: absolute top: 0 left: 0 width: 10px height: 4px border: 2px solid #999 border-radius: 10px background: rgba(0, 0, 0, 0.2) }
.shovel_stick { position: absolute top: 8px left: 6px width: 2px height: 26px background: #999 }
.shovel_blade { position: absolute top: 34px left: 0 width: 10px height: 12px border-radius: 4px 4px 0px 0px border-top: 2px solid #999 border-left: 2px solid #999 border-right: 2px solid #999 background-color: silver }
/*/лопата*/
/*ведро*/
.bucket { position: absolute left: 180px bottom: 8px }
.bucket_handle { position: absolute bottom: 12px left: 3px width: 6px height: 8px border-top: 1px solid #555 border-left: 1px solid #555 border-right: 1px solid #555 border-radius: 4px 4px 0px 0px background: rgba(255, 255, 255, 0.1) }
.bucket_handle_front { position: absolute bottom: 12px left: 10px width: 1px height: 3px background: #555 z-index: 1 }
.bucket_edge { position: absolute bottom: 12px left: 0px width: 14px height: 2px background: #999 }
.bucket_body { position: absolute bottom: 0 left: 0 height: 0 width: 10px border-bottom: 12px solid silver border-left: 2px solid transparent border-right: 2px solid transparent transform: rotate(180deg) }
/*/ведро*/ <!-горы-> <!-/горы-> <!-луна-> <!-/луна-> <!-елка-> <!-/елка-> <!-падающий_снег-> <!-/падающий_снег-> <!-снежинка-> <!-/снежинка-> <!-дед_мороз-> <!-/дед_мороз-> <!-снеговик-> <!-/снеговик-> <!-шар-> <!-/шар-> <!-лопата-> <!-/лопата-> <!-ведро-> <!-/ведро->
А чего делать-то будем?
Для победы в соревновании необходимо реализовать как минимум одну анимацию из следующих:
анимация елочки анимация Деда Мороза анимация снежинки и падающего снега
Чем больше сценариев будет в вашем ответе, тем лучше. При желании, вы можете добавить дополнительные анимации на тему Нового Года. Они будут «плюсом» к обязательным анимациям.
Всем веселья! Всем праздника!
Ответ
CSS. Простая снежинка.
upd_one. Добавим немного падающего снега.
upd_two. Добавим Новогоднюю ёлку.
upd_three. Добавим Деда Мороза.
upd_four. Добавим снеговика.
upd_five. Добавим горы и луну.
upd_six. Добавим Новогодний шар с логотипом ruSO.
upd_seven. Добавим лопату и ведро.
body { width: 100% height: 100vh overflow: hidden background: #afd9f7 background: linear-gradient(to right, #afd9f7, #459cf7) }
/*горы*/
.mountains { position: absolute left: 0 right: 0 bottom: 0 height: 100vh }
.mountain_1, .mountain_2, .mountain_3, .mountain_4, .mountain_5, .mountain_6, .mountain_7, .mountain_8, .mountain_9 { position: fixed bottom: 0 width: 0 height: 0 }
.mountain_1 { margin-left: -5vw border-right: 400px solid transparent border-left: 150px solid transparent }
.mountain_2 { margin-left: 15vw border-right: 400px solid transparent border-left: 400px solid transparent }
.mountain_3 { margin-left: 70vw border-right: 150px solid transparent border-left: 400px solid transparent }
.mountain_4 { margin-left: -15vw border-right: 400px solid transparent border-left: 500px solid transparent }
.mountain_5 { margin-left: 25vw border-right: 350px solid transparent border-left: 150px solid transparent }
.mountain_6 { margin-left: 70vw border-right: 200px solid transparent border-left: 200px solid transparent }
.mountain_7 { margin-left: 15vw border-right: 150px solid transparent border-left: 250px solid transparent }
.mountain_8 { margin-left: 50vw border-right: 300px solid transparent border-left: 150px solid transparent }
.mountain_9 { margin-left: 60vw border-right: 300px solid transparent border-left: 250px solid transparent }
.mountain_one { border-bottom: 120px solid #459cf7 }
.mountain_two { border-bottom: 100px solid #50aef1 }
.mountain_three { border-bottom: 55px solid #79c4f9 }
.mount_snow { width: 100% height: 20px background-color: #daedfb position: absolute bottom: 0 left: 0 }
.mount_snow:before, .mount_snow:after { content: "" border-radius: 50% background-color: #daedfb position: absolute }
.mount_snow:before { left: 10% height: 36px transform: rotate(5deg) bottom: -4px width: 40vw }
.mount_snow:after { right: -10% height: 20px bottom: 6px width: 65vw }
/*/горы*/
/*луна*/
.moon { position: absolute top: 15px right: 15px width: 30px height: 30px border-radius: 50% background-color: cornsilk box-shadow: 3px 3px 20px 6px #fff }
.moon:before { content: "" display: block position: absolute top: 2px left: 0px width: 26px height: 26px border-radius: 50% background-color: antiquewhite -webkit-clip-path: polygon(0 0, 95% 0, 95% 30%, 70% 40%, 80% 80%, 40% 70%, 10% 90%) clip-path: polygon(0 0, 95% 0, 95% 30%, 70% 40%, 80% 80%, 40% 70%, 10% 90%) }
/*/луна*/
/*снежинка*/
.snowflake_container { position: relative width: 100% height: 170px animation: 5s infinite linear animate z-index: 3 }
.snowflake { position: absolute top: 25px left: 50% width: 5px height: 150px background-color: white box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.1) }
.snowflake:before, .snowflake:after { content: "" position: absolute left: -12px width: 25px height: 25px border: 5px solid snow border-top: 0 border-left: 0 transform: rotate(45deg) box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.1) }
.snowflake:after { bottom: 0 transform: rotate(-135deg) }
.snow__two { transform: rotate(90deg) }
.snow__three { transform: rotate(45deg) }
.snow__four { transform: rotate(-45deg) }
@keyframes animate { 100% { transform: rotate(360deg) } }
/*/снежинка*/
/*падающий_снег*/
.snow { position: fixed top: -20% cursor: default user-select: none color: #fff font-size: 2em font-family: Arial text-shadow: 0 0 1px rgba(0, 0, 0, 1) animation-duration: 10s, 3s animation-name: snow_f, snow_s animation-play-state: running, running animation-iteration-count: infinite, infinite animation-timing-function: linear, ease-in-out z-index: 2 }
@keyframes snow_f { 0% { top: -10% } 100% { top: 100% } }
@keyframes snow_s { 0% { transform: translateX(0px) } 50% { transform: translateX(80px) } 100% { transform: translateX(0px) } }
.snow:nth-of-type(0) { left: 1% animation-delay: 0s, 0s }
.snow:nth-of-type(1) { left: 10% animation-delay: 1s, 1s }
.snow:nth-of-type(2) { left: 20% animation-delay: 6s, .5s }
.snow:nth-of-type(3) { left: 30% animation-delay: 4s, 2s }
.snow:nth-of-type(4) { left: 40% animation-delay: 2s, 2s }
.snow:nth-of-type(5) { left: 50% animation-delay: 8s, 3s }
.snow:nth-of-type(6) { left: 60% animation-delay: 6s, 2s }
.snow:nth-of-type(7) { left: 70% animation-delay: 2.5s, 1s }
.snow:nth-of-type(8) { left: 80% animation-delay: 1s, 0s }
.snow:nth-of-type(9) { left: 90% animation-delay: 3s, 1.5s }
.snow:nth-of-type(10) { left: 99% animation-delay: 10s, 9s }
/*/падающий_снег*/
/*елка*/
.tree { position: absolute bottom: 10px right: 10px width: 0 height: 0 border-style: solid border-width: 0 40px 75px 40px border-color: transparent transparent green transparent }
.tree:before, .tree:after { content: '' display: block position: absolute top: -15px right: -34px width: 0 height: 0 border-style: solid border-width: 0 35px 60px 35px border-color: transparent transparent green transparent }
.tree:before { top: -35px right: -24px border-width: 0 25px 45px 25px }
.tree__trunk { position: absolute top: 75px right: -6px width: 10px height: 20px background: brown }
.star { position: absolute top: -60px left: -14px cursor: default user-select: none color: darkred font-size: 2em font-family: Arial text-shadow: 0 0 4px rgba(255, 255, 255, 0.5) animation: 3s infinite linear star z-index: 1 }
@keyframes star { 0% { color: darkred } 93% { color: red } 95% { color: gold } 98% { color: red } 100% { color: darkred } }
.tree__lights__one { position: absolute top: 44px right: -26px width: 60px height: 16px border-radius: 40% box-shadow: 0px 3px transform: rotateZ(-12deg) z-index: 1 }
.tree__lights__one:before { content: '' display: block position: absolute top: 16px left: -2px width: 6px height: 6px border-radius: 100% animation: blink_one 2s linear infinite }
.tree__lights__two { position: absolute top: 12px right: -18px width: 47px height: 16px border-radius: 50% box-shadow: 0px 3px transform: rotateZ(-16deg) z-index: 1 }
.tree__lights__two:before { content: '' display: block position: absolute top: 15px left: -6px width: 6px height: 6px border-radius: 100% animation: blink_two 1s linear infinite alternate }
.tree__lights__three { position: absolute top: -20px right: -12px width: 32px height: 16px border-radius: 50% box-shadow: 0px 3px transform: rotateZ(-16deg) z-index: 1 }
.tree__lights__three:before { content: '' display: block position: absolute top: 10px left: -8px width: 6px height: 6px border-radius: 100% animation: blink_three 1s linear infinite alternate }
@keyframes blink_one { 0% { box-shadow: 5px -1px #008bff, 24px 1px #fff, 40px 1px #ffdc00, 54px 0px #f00 } 50% { box-shadow: 5px -1px #f00, 24px 1px #008bff, 40px 1px #fff, 54px 0px #ffdc00 } 75% { box-shadow: 5px -1px #ffdc00, 24px 1px #f00, 40px 1px #00bcff, 54px 0px #fff } 100% { box-shadow: 5px -1px #fff, 24px 1px #ffdc00, 40px 1px #f00, 54px 0px #00bcff } }
@keyframes blink_two { 0% { box-shadow: 5px -1px #008bff, 20px 1px #fff, 34px 1px #ffdc00, 46px 0px #f00 } 50% { box-shadow: 5px -1px #f00, 20px 1px #008bff, 34px 1px #fff, 46px 0px #ffdc00 } 75% { box-shadow: 5px -1px #ffdc00, 20px 1px #f00, 34px 1px #00bcff, 46px 0px #fff } 100% { box-shadow: 5px -1px #fff, 20px 1px #ffdc00, 34px 1px #f00, 46px 0px #00bcff } }
@keyframes blink_three { 0% { box-shadow: 5px 3px #008bff, 20px 7px #f00, 34px 4px #ffdc00 } 50% { box-shadow: 5px 3px #ffdc00, 20px 7px #008bff, 34px 4px #f00 } 100% { box-shadow: 5px 3px #f00, 20px 7px #ffdc00, 34px 4px #008bff } }
/*/елка*/
/*дед_мороз*/
.ded_moroz_container { position: absolute bottom: 0 left: 10px }
body:hover .ded_moroz_container { animation: ded_moroz_container 0.6s 1 }
@keyframes ded_moroz_container { 0% { transform: rotate(0turn) } 25% { transform: rotate(0.02turn) scale(1.1) } 50% { transform: rotate(-0.02turn) scale(1.1) } 75% { transform: rotate(0.02turn) scale(1.1) } 100% { transform: rotate(0turn) scale(1) } }
.ded_moroz { position: absolute bottom: 20px animation: ded_moroz___head 4s linear infinite }
@keyframes ded_moroz___head { 0% { bottom: 13px } 45% { bottom: 13px } 50% { bottom: 20px } 92% { bottom: 20px } 98% { bottom: 13px } 100% { bottom: 13px } }
.ded_moroz_body { position: absolute left: -20px bottom: -50px width: 100px height: 120px background-color: #E30E0E border-radius: 100% animation: ded_moroz___body 4s linear infinite }
@keyframes ded_moroz___body { 0% { bottom: -50px } 2% { bottom: -53px } 4% { bottom: -50px } 8% { bottom: -53px } 10% { bottom: -50px } 12% { bottom: -53px } 14% { bottom: -50px } 18% { bottom: -53px } 20% { bottom: -50px } 22% { bottom: -53px } 24% { bottom: -50px } 28% { bottom: -53px } 30% { bottom: -50px } 100% { bottom: -50px } }
.ded_moroz_body:before, .ded_moroz_body:after { content: "" display: block position: absolute top: 53px left: 48px width: 4px height: 4px border-radius: 100% background-color: white }
.ded_moroz_body:after { margin-top: 10px }
.ded_moroz_beard { height: 60px width: 60px background-color: white border-radius: 0 50% 50% 50% transform: rotate(-135deg) }
.ded_moroz_face { position: relative bottom: 45px left: 6px height: 15px width: 48px border-radius: 15px background-color: #fcd9c3 }
.ded_moroz_eye_one, .ded_moroz_eye_two { position: relative height: 1px width: 10px border-top: 3px solid #262626 border-radius: 10px 10px 0 0 animation: ded_moroz___eye 4s linear infinite }
.ded_moroz_eye_one { top: 5px left: 6px }
.ded_moroz_eye_two { top: 1px left: 32px animation: ded_moroz___eye_two 4s linear infinite }
@keyframes ded_moroz___eye { 30% { border-top: 3px solid #262626 } 55% { border-top: 3px solid #262626 } 55.1% { border-top: 4px solid #262626 } 100% { border-top: 4px solid #262626 } }
@keyframes ded_moroz___eye_two { 30% { top: 1px border-top: 3px solid #262626 } 55% { top: 1px border-top: 3px solid #262626 } 55.1% { top: 0px border-top: 4px solid #262626 } 100% { top: 0px border-top: 4px solid #262626 } }
.ded_moroz_nose { position: relative top: 2px left: 19px height: 10px width: 10px border-radius: 50% background-color: #fbd1b6 }
.ded_moroz_mouth { position: relative top: 6px left: 18px height: 3px width: 13px border-radius: 0 0 13px 13px background-color: #262626 opacity: 0.8 animation: ded_moroz___mouth 4s linear infinite }
@keyframes ded_moroz___mouth { 0% { height: 3px } 55% { height: 3px } 55.1% { height: 6px } 100% { height: 6px } }
.ded_moroz_cap { position: absolute top: -45px left: 2px width: 54px height: 60px background: red border-radius: 100% 20% 0 0 box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2) text-align: center line-height: 70px text-transform: uppercase font-size: 13px font-family: monospace color: darkred font-weight: bold }
.ded_moroz_cap:before { content: "" display: block position: absolute bottom: -10px left: -1px width: 57px height: 18px border-radius: 100% / 50% transform: rotate(-2deg) box-shadow: inset 0 10px lightyellow }
.ded_moroz_cap:after { content: "" display: block position: absolute top: -10px right: -10px width: 20px height: 20px border-radius: 50% background: lightyellow box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2) }
/*/дед_мороз*/
/*снеговик*/
.snowman_container { position: absolute bottom: -4px right: 120px width: 30px height: 62px animation-name: snowman animation-duration: 2s animation-iteration-count: infinite }
@keyframes snowman { 0% { transform: rotate(6deg) right: 110px } 50% { transform: rotate(-6deg) right: 130px } 100% { transform: rotate(6deg) right: 110px } }
.snowman { position: relative width: 30px height: 62px }
.snowman_shadow { position: absolute bottom: 0 left: 0 width: 30px height: 12px background: radial-gradient(ellipse at center, rgba(68, 68, 68, 0.9) 0%, rgba(138, 174, 188, 0) 60%, rgba(206, 223, 235, 0) 100%) }
.snowman_body { position: absolute bottom: 5px left: 0 width: 30px height: 29px border-radius: 50% background: linear-gradient(to bottom, white 0%, #dbe8fc 100%) box-shadow: 7px -5px 0px rgba(0, 0, 0, 0.1) inset }
.snowman_head { position: absolute bottom: 30px left: 4px width: 20px height: 20px border-radius: 50% background: linear-gradient(to bottom, white 0%, #dbe8fc 100%) box-shadow: 7px -5px 0px rgba(0, 0, 0, 0.1) inset }
.snowman_coal { position: absolute width: 2px height: 2px border-radius: 100% box-shadow: 14px 36px 0px 0px #222, 14px 40px 0px 0px #222, 14px 44px 0px 0px #222, 10px 18px 0px 0px #222, 16px 18px 0px 0px #222 }
.snowman_carrot { position: absolute left: 1px top: 22px width: 0px height: 0px border-right: 14px solid orangered border-top: 2px solid transparent border-bottom: 2px solid transparent }
.snowman_scarf { position: absolute top: 20px left: 3px width: 24px height: 40px background: chocolate border-radius: 70% 70% 50% 50% -webkit-clip-path: polygon(1% 32%, 1% 21%, 98% 21%, 97% 35%, 98% 51%, 81% 35%, 95% 59%, 87% 66%, 71% 34%) clip-path: polygon(1% 32%, 1% 21%, 98% 21%, 97% 35%, 98% 51%, 81% 35%, 95% 59%, 87% 66%, 71% 34%) }
.snowman_hand_l { position: absolute left: -7px top: 24px width: 10px height: 20px background: #9b441b transform: rotate(290deg) -webkit-clip-path: polygon(18% 17%, 35% 30%, 38% 0, 41% 0, 41% 30%, 71% 16%, 79% 15%, 40% 38%, 39% 100%, 35% 100%, 34% 37%, 9% 16%) clip-path: polygon(18% 17%, 35% 30%, 38% 0, 41% 0, 41% 30%, 71% 16%, 79% 15%, 40% 38%, 39% 100%, 35% 100%, 34% 37%, 9% 16%) }
.snowman_hand_r { position: absolute left: 26px top: 26px width: 10px height: 20px background: #9b441b transform: rotate(65deg) -webkit-clip-path: polygon(18% 17%, 35% 30%, 38% 0, 41% 0, 41% 30%, 71% 16%, 79% 15%, 40% 38%, 39% 100%, 35% 100%, 34% 37%, 9% 16%) clip-path: polygon(18% 17%, 35% 30%, 38% 0, 41% 0, 41% 30%, 71% 16%, 79% 15%, 40% 38%, 39% 100%, 35% 100%, 34% 37%, 9% 16%) }
.snowman_bucket { position: absolute top: 0px left: 8px height: 0 width: 10px background-clip: padding-box border-top: 14px solid chocolate border-left: 2px solid transparent border-right: 2px solid transparent border-bottom-right-radius: 5px 50% border-bottom-left-radius: 5px 50% transform: rotate(185deg) }
/*/снеговик*/
/*шар*/
.ball_container { position: absolute top: 33px left: 103px width: 100px height: 100px margin: auto animation-name: ball_container animation-delay: 0s animation-duration: 2s animation-iteration-count: infinite animation-direction: normal transform-origin: 50% 0% animation-timing-function: linear }
@-webkit-keyframes ball_container { 0% { -webkit-transform: rotate(0deg) left: 98px } 25% { -webkit-transform: rotate(10deg) left: 93px } 75% { -webkit-transform: rotate(-10deg) left: 103px } 100% { -webkit-transform: rotate(0deg) left: 98px } }
.ball_hidden { position: absolute top: 0 left: 0 overflow: hidden width: 100px height: 100px border-radius: 100% }
.ball { position: absolute top: 0 left: 0 width: 100px height: 100px border-radius: 100% background: radial-gradient(circle at 100px 100px, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.8)) }
.ball:after { content: "" position: absolute top: 80% left: 60% width: 85% height: 100% border-radius: 50% background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 0) 50%) transform: translateX(-80px) translateY(-90px) skewX(-20deg) filter: blur(10px) }
.ball_snow { position: absolute top: 1px left: 2px width: 97px height: 99px border-radius: 100% background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 68%, #f0f0f0 68%, #ebeff5 79%, #c5d3e8 100%) box-shadow: -7px -5px 0px rgba(0, 0, 0, 0.1) inset }
.ball_snow_area { position: relative top: 63px width: 87px height: 10px margin: auto border-radius: 100% background: #fff }
.ball_thread { width: 1px position: absolute background-color: seagreen height: 100px top: -100px left: 50% }
.ball_thread:before { content: "" display: block position: absolute bottom: 4px left: -2px height: 8px width: 4px border: 1px solid seagreen border-radius: 50% background-color: yellowgreen }
.ball_thread:after { content: "" display: block position: absolute bottom: -2px left: -8px height: 10px width: 16px border-radius: 4px background-color: yellowgreen box-shadow: -7px 0px 0px rgba(0, 0, 0, 0.1) inset }
.ball_hidden .snow { position: absolute font-size: 0.5em }
.stackoverflow { position: absolute top: 45px left: 14px width: 100px height: 25px background-image: url(https://cdn.sstatic.net/Sites/ru/imgprites.svg?v=f508971f422f) background-position: 0 -510px background-size: 95px z-index: 1 }
/*/шар*/
/*лопата*/
.shovel { position: absolute bottom: 10px left: 210px width: 10px height: 50px transform: rotate(5deg) }
.shovel_handle { position: absolute top: 0 left: 0 width: 10px height: 4px border: 2px solid #999 border-radius: 10px background: rgba(0, 0, 0, 0.2) }
.shovel_stick { position: absolute top: 8px left: 6px width: 2px height: 26px background: #999 }
.shovel_blade { position: absolute top: 34px left: 0 width: 10px height: 12px border-radius: 4px 4px 0px 0px border-top: 2px solid #999 border-left: 2px solid #999 border-right: 2px solid #999 background-color: silver }
/*/лопата*/
/*ведро*/
.bucket { position: absolute left: 180px bottom: 8px }
.bucket_handle { position: absolute bottom: 12px left: 3px width: 6px height: 8px border-top: 1px solid #555 border-left: 1px solid #555 border-right: 1px solid #555 border-radius: 4px 4px 0px 0px background: rgba(255, 255, 255, 0.1) }
.bucket_handle_front { position: absolute bottom: 12px left: 10px width: 1px height: 3px background: #555 z-index: 1 }
.bucket_edge { position: absolute bottom: 12px left: 0px width: 14px height: 2px background: #999 }
.bucket_body { position: absolute bottom: 0 left: 0 height: 0 width: 10px border-bottom: 12px solid silver border-left: 2px solid transparent border-right: 2px solid transparent transform: rotate(180deg) }
/*/ведро*/ <!-горы->
★
дед
