CodePen Embed - Christmas Penguin

<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%;
	-webkit-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;
	-webkit-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% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	50% {
		-webkit-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;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default;
	-webkit-animation-name: snowflakes-fall, snowflakes-shake;
	-webkit-animation-duration: 10s, 3s;
	-webkit-animation-timing-function: linear, ease-in-out;
	-webkit-animation-iteration-count: infinite, infinite;
	-webkit-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%;
	-webkit-animation-delay: 0s, 0s;
	animation-delay: 0s, 0s;
}
.snowflake:nth-of-type(1) {
	left: 10%;
	-webkit-animation-delay: 1s, 1s;
	animation-delay: 1s, 1s;
}
.snowflake:nth-of-type(2) {
	left: 20%;
	-webkit-animation-delay: 6s, 0.5s;
	animation-delay: 6s, 0.5s;
}
.snowflake:nth-of-type(3) {
	left: 30%;
	-webkit-animation-delay: 4s, 2s;
	animation-delay: 4s, 2s;
}
.snowflake:nth-of-type(4) {
	left: 40%;
	-webkit-animation-delay: 2s, 2s;
	animation-delay: 2s, 2s;
}
.snowflake:nth-of-type(5) {
	left: 50%;
	-webkit-animation-delay: 8s, 3s;
	animation-delay: 8s, 3s;
}
.snowflake:nth-of-type(6) {
	left: 60%;
	-webkit-animation-delay: 6s, 2s;
	animation-delay: 6s, 2s;
}
.snowflake:nth-of-type(7) {
	left: 70%;
	-webkit-animation-delay: 2.5s, 1s;
	animation-delay: 2.5s, 1s;
}
.snowflake:nth-of-type(8) {
	left: 80%;
	-webkit-animation-delay: 1s, 0s;
	animation-delay: 1s, 0s;
}
.snowflake:nth-of-type(9) {
	left: 90%;
	-webkit-animation-delay: 3s, 1.5s;
	animation-delay: 3s, 1.5s;
}
.snowflake:nth-of-type(10) {
	left: 25%;
	-webkit-animation-delay: 2s, 0s;
	animation-delay: 2s, 0s;
}
.snowflake:nth-of-type(11) {
	left: 65%;
	-webkit-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 is owned by Chloe Barry on CodePen.

See more by @chloe47632 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.