<div id="bg">
<div id="opm">
<div class="mantle"></div>
<div class="suit"></div>
<div class="collar"></div>
<div class="zipper"></div>
<div class="decollete"></div>
<div class="neck"></div>
<div class="shoulder right"></div>
<div class="shoulder left"></div>
<div class="ear right"></div>
<div class="ear left"></div>
<div class="face"></div>
<div class="eyebrow right"></div>
<div class="eyebrow left"></div>
<div class="eye right"></div>
<div class="eye left"></div>
<div class="nose"></div>
<div class="mouth"></div>
</div>
</div>
body {
background: #000;
min-height: 100vh;
margin: 0;
padding: 0;
}
#bg {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 600px;
background: #36c;
}
#opm {
position: relative;
width: 600px;
height: 1000px;
overflow: hidden;
transform: scale(.6);
}
#opm div {
position: absolute;
}
#opm div:before,
#opm div:after {
position: absolute;
display: block;
content: "";
}
@keyframes eyeball {
0% {left: 48%;}
25% {left: 80%;}
50% {left: 52%;}
50% {left: 20%;}
100% {left: 48%;}
}
.face {
left: 75px;
width: 450px;
height: 600px;
background: #fc9;
border-radius: 100% / 80% 80% 100% 100%;
box-shadow:
0px 0px 0px 5px #333 inset,
-10px -10px 0 0 #c96 inset;
}
.face:before {
top: 70px;
left: 60px;
width: 100px;
height: 50px;
border-radius: 50%;
background: rgba(255,255,255,.5);
transform: rotate(-40deg);
}
.ear {
top: 250px;
width: 100px;
height: 150px;
background: #fc9;
border-radius: 50%;
box-shadow: 0 0 0 5px #333 inset;
}
.ear.right {
left: 30px;
transform: rotate(-15deg);
}
.ear.left {
right: 30px;
transform: rotate(15deg);
}
.ear:before {
top: 20%;
left: 20%;
width: 60%;
height: 60%;
background: #c96;
border-radius: 50%;
box-shadow: 0 -3px 0 0 #333;
}
.ear:after {
bottom: 15%;
left: 30%;
width: 40%;
height: 45%;
background: #fc9;
border-radius: 50%;
box-shadow: 0 3px 0 1px #333 inset;
}
.eyebrow {
top: 220px;
width: 110px;
height: 110px;
box-shadow: 0 -10px 0 -5px #333;
border-radius: 100% / 50%;
}
.eyebrow.right {
left: 140px;
}
.eyebrow.left {
right: 140px;
}
.eye {
top: 270px;
width: 130px;
height: 70px;
border-radius: 80% / 80% 80% 100% 100%;
background: #fff;
box-shadow: 0 0 0 4px #333 inset;
}
.eye:before {
top: 25px;
left: 48%;
width: 10px;
height: 10px;
border-radius: 50%;
background: #333;
animation: eyeball 5s ease 3s infinite;
}
.eye.right {
left: 130px;
}
.eye.left {
right: 130px;
}
.nose {
top: 310px;
left: 50%;;
width: 20px;
height: 120px;
margin-left: -15px;
}
.nose:before {
top: 0;
left: -10px;
width: 70%;
height: 85%;
border-radius: 50%;
box-shadow: -8px -8px 0 -5px #333 inset,
-15px -15px 0 0 #c96 inset;
transform: rotate(5deg);
}
.nose:after {
bottom: 0;
left: -7px;
width: 100%;
height: 30%;
border-radius: 50%;
box-shadow: 10px 2px 0 -5px #333 inset;
transform: rotate(-30deg);
}
.mouth {
top: 470px;
left: 245px;
width: 100px;
height: 30px;
border-radius: 5px 5px 50% 50% / 5px 5px 100% 100%;
background: #966;
border: 3px solid #333;
}
.neck {
top: 550px;
left: 220px;
width: 150px;
height: 90px;
background: #fc9;
border-right: 5px solid #333;
border-left: 5px solid #333;
overflow: hidden;
}
.neck:before {
left: -10%;
width: 120%;
height: 80%;
background: #c96;
border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.decollete {
top: 610px;
left: 195px;
width: 200px;
height: 80px;
background: #fc9;
border-radius: 100%;
border: 3px solid #333;
}
.collar {
top: 610px;
left: 145px;
width: 300px;
height: 150px;
background: #fff;
border-radius: 100%;
border: 3px solid #333;
}
.collar:before {
top: 145px;
left: 95px;
width: 100px;
height: 120px;
background: #fff;
border: 3px solid #333;
border-top: none;
}
.collar:after {
top: 80px;
left: 140px;
width: 14px;
height: 145px;
background:
linear-gradient(0, transparent 10px, #333 10px, #333 13px) center bottom / 100% 13px repeat-y ,
#ccc;
border: 3px solid #333;
}
.suit {
top: 630px;
left: 50px;
width: 500px;
height: 400px;
background: #fc0;
border-radius: 40% 40% 0 0;
box-shadow:
0 15px 0 8px #ccc,
0 0 0 3px #333 inset;
}
.suit:before {
left: 57px;
bottom: 0;
width: 380px;
height: 250px;
border-right: 3px solid #333;
border-left: 3px solid #333;
border-radius: 3px 3px 0 0 / 100% 100% 0 0;
box-shadow: 0 20px 0 10px #c90;
}
.zipper {
top: 700px;
left: 282px;
width: 26px;
height: 50px;
background: #ccc;
border: 3px solid #333;
border-bottom: none;
border-radius: 5px;
}
.zipper:before {
top: 40px;
left: -20px;
width: 60px;
height: 60px;
background: #ccc;
border-radius: 50%;
border: 3px solid #333;
box-shadow:
5px -3px 0 0 #eee inset,
0 0 0 23px #ccc inset,
0 0 0 26px #333 inset;
}
.zipper:after {
width: 26px;
height: 55px;
background:
linear-gradient(0, #333 3px, transparent 3px) center top / 10px 16px no-repeat,
linear-gradient(90deg, #333 3px, #ccc 3px, #ccc 7px, #333 7px) center top / 10px 16px no-repeat,
linear-gradient(-35deg, #ccc 40%, #eee 40%, #eee 60%, #ccc 60%);
}
.mantle {
top: 585px;
left: 20px;
width: 560px;
height: 420px;
background: #fff;
border-radius: 60% 60% 0 0;
box-shadow: 0 0 0 5px #333;
}
.shoulder {
top: 610px;
width: 160px;
height: 120px;
background: #fff;
border: 3px solid #333;
border-top-width: 5px;
box-shadow:
0 5px 0 0 rgba(0,0,0,.3),
0 -20px 0 10px #fff inset,
0 -25px 0 10px #333 inset,
0 -35px 0 10px #ccc inset;
}
.shoulder:before {
top: 30%;
left: 25%;
width: 50%;
height: 50px;
border-radius: 50%;
background: #333;
}
.shoulder:after {
top: 38%;
left: 35%;
width: 15%;
height: 20px;
border-radius: 50%;
background: #fff;
}
.shoulder.right {
left: 66px;
transform: rotate(-15deg) skew(-10deg);
border-radius: 90% 0 50% 50% / 40% 0 85% 60%;
}
.shoulder.right:after {
transform: rotate(15deg) skew(10deg);
}
.shoulder.left {
right: 66px;
transform: rotate(15deg) skew(10deg);
border-radius: 0 90% 50% 50% / 0 40% 60% 85%;
}
.shoulder.left:after {
transform: rotate(-15deg) skew(-10deg);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.