<div class="box">
<div class="head">
<div class="head2"></div>
<div class="santa-hat"> </div>
<div class ="santa"> </div>
<div class ="santa-ball1"> </div>
<div class ="santa-ball2"> </div>
<div class ="santa-ball3"> </div>
<div class ="santa-ball4"> </div>
<div class ="santa-ball5"> </div>
<div class="arm-left">
<div class="blush"></div>
</div>
<div class="arm-right">
<div class="blush2"></div>
</div>
<div class="eye-left">
<div class="pupil">
</div>
</div>
<div class="eye-right">
<div class="pupil">
</div>
</div>
<div class="nose">
</div>
</div>
<div class="snowflakes" aria-hidden="true">
<div class="snowflake">
❅
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❅
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❅
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❅
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❅
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❅
</div>
<div class="snowflake">
❆
</div>
</div>
</div>
.box {
position: relative;
margin: auto;
display: block;
margin-top: 8%;
width: 600px;
height: 420px;
background: none;
background: linear-gradient(to bottom, #33ccff 0%, #ffffff 100%);
border: ;
}
.body {
background: ;
height: 100%;
}
.head {
background-color: black;
width: 270px;
height: 300px;
top: 16.5%;
left: 35%;
display: inline-block;
position: absolute;
border-radius: 60% 55% 30% 30%;
}
.santa-hat {
background-color: #e60519;
display: inline-block;
position: absolute;
z-index: 1;
width: 250px;
height: 120px;
border-radius: 10% 60% 30% 30%;
top: -18%;
left: 5%;
}
.santa {
display: inline-block;
position: absolute;
top: -19%;
left: -10%;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: white;
z-index: 2;
box-shadow: 5px 5px 40px #696969;
}
.santa-ball1{
display: inline-block;
position: absolute;
top: 5%;
left: -6%;
width: 70px;
height: 70px;
border-radius: 50%;
background-color: white;
z-index: 2;
box-shadow: 5px 5px 30px #696969;
}
.santa-ball2 {
display: inline-block;
position: absolute;
top: 5%;
left: 15%;
width: 70px;
height: 70px;
border-radius: 50%;
background-color: white;
z-index: 2;
box-shadow: 5px 5px 30px #696969;
}
.santa-ball3{
display: inline-block;
position: absolute;
top: 5%;
left: 36%;
width: 70px;
height: 70px;
border-radius: 50%;
background-color: white;
z-index: 2;
box-shadow: 5px 5px 30px #696969;
}
.santa-ball4{
display: inline-block;
position: absolute;
top: 5%;
left: 58%;
width: 70px;
height: 70px;
border-radius: 50%;
background-color: white;
z-index: 2;
box-shadow: 5px 5px 30px #696969;
}
.santa-ball5{
display: inline-block;
position: absolute;
top: 5%;
left: 80%;
width: 70px;
height: 70px;
border-radius: 50%;
background-color: white;
z-index: 2;
box-shadow: 5px 5px 30px #696969;
}
.head2 {
background-color: white;
width: 230px;
height: 260px;
top: 9%;
left: 8%;
display: inline-block;
position: absolute;
border-radius: 55% 55% 30% 30%;
}
.arm-left {
width: 50px;
height: 100px;
background-color: #000;
position: absolute;
top: 45%;
right: 95%;
animation-name: arms;
animation-duration: 4s;
border-radius: 1990% 100% 1700% 100%;
animation: action 1s infinite alternate;
animation: action 1s infinite alternate;
}
.arm-right {
width: 50px;
height: 100px;
background-color: #000;
position: absolute;
top: 43%;
left: 93%;
border-radius: 100% 1990% 100% 1700%;
animation-name: arms;
animation-duration: 4s;
animation: action 1s infinite alternate;
animation: action 1s infinite alternate;
}
.blush {
width: 30px;
height: 20px;
background-color: #ffc0cb;
border-radius: 50%;
position: absolute;
top: -3%;
left: 188%;
z-index: 3;
}
.blush2 {
width: 30px;
height: 20px;
background-color: #ffc0cb;
border-radius: 50%;
position: absolute;
top: 1%;
left: -135%;
z-index: 3;
}
.eye-left {
position: absolute;
background: black;
width: 10%;
height: 10%;
top: 35%;
left: 31%;
border-radius: 50%;
z-index: 3;
}
.eye-right {
position: absolute;
background: black;
width: 10%;
height: 10%;
top: 35%;
right: 31%;
border-radius: 50%;
z-index: 3;
}
.pupil {
position: absolute;
width: 38%;
height: 35%;
top: 35%;
left: 20%;
border-radius: 50%;
background: white;
}
.nose {
width: 55px;
height: 30px;
background-color: #feb236;
border-radius: 90% 90% 80% 90%;
position: absolute;
top: 45%;
left: 40%;
z-index: 1;
}
@-webkit-keyframes action {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}
@keyframes action {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}
.snowflake {
color: #fff;
font-size: 1em;
font-family: Arial, sans-serif;
text-shadow: 0 0 5px #000;
}
@-webkit-keyframes snowflakes-fall {
0% {
top: -10%;
}
100% {
top: 100%;
}
}
@-webkit-keyframes snowflakes-shake {
0%,
100% {
transform: translateX(0);
transform: translateX(0);
}
50% {
transform: translateX(80px);
transform: translateX(80px);
}
}
@keyframes snowflakes-fall {
0% {
top: -10%;
}
100% {
top: 100%;
}
}
@keyframes snowflakes-shake {
0%,
100% {
transform: translateX(0);
}
50% {
transform: translateX(80px);
}
}
.snowflake {
position: fixed;
top: -10%;
z-index: 9999;
user-select: none;
user-select: none;
user-select: none;
user-select: none;
cursor: default;
animation-name: snowflakes-fall, snowflakes-shake;
animation-duration: 10s, 3s;
animation-timing-function: linear, ease-in-out;
animation-iteration-count: infinite, infinite;
animation-play-state: running, running;
animation-name: snowflakes-fall, snowflakes-shake;
animation-duration: 10s, 3s;
animation-timing-function: linear, ease-in-out;
animation-iteration-count: infinite, infinite;
animation-play-state: running, running;
}
.snowflake:nth-of-type(0) {
left: 1%;
animation-delay: 0s, 0s;
animation-delay: 0s, 0s;
}
.snowflake:nth-of-type(1) {
left: 10%;
animation-delay: 1s, 1s;
animation-delay: 1s, 1s;
}
.snowflake:nth-of-type(2) {
left: 20%;
animation-delay: 6s, 0.5s;
animation-delay: 6s, 0.5s;
}
.snowflake:nth-of-type(3) {
left: 30%;
animation-delay: 4s, 2s;
animation-delay: 4s, 2s;
}
.snowflake:nth-of-type(4) {
left: 40%;
animation-delay: 2s, 2s;
animation-delay: 2s, 2s;
}
.snowflake:nth-of-type(5) {
left: 50%;
animation-delay: 8s, 3s;
animation-delay: 8s, 3s;
}
.snowflake:nth-of-type(6) {
left: 60%;
animation-delay: 6s, 2s;
animation-delay: 6s, 2s;
}
.snowflake:nth-of-type(7) {
left: 70%;
animation-delay: 2.5s, 1s;
animation-delay: 2.5s, 1s;
}
.snowflake:nth-of-type(8) {
left: 80%;
animation-delay: 1s, 0s;
animation-delay: 1s, 0s;
}
.snowflake:nth-of-type(9) {
left: 90%;
animation-delay: 3s, 1.5s;
animation-delay: 3s, 1.5s;
}
.snowflake:nth-of-type(10) {
left: 25%;
animation-delay: 2s, 0s;
animation-delay: 2s, 0s;
}
.snowflake:nth-of-type(11) {
left: 65%;
animation-delay: 4s, 2.5s;
animation-delay: 4s, 2.5s;
}
<!-- Snowflakes were created by Pajasevi thank you :D https://gist.github.com/pajasevi/0c50b0b95795debd6c1e#file-snowflake-snippet --!>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.