CSS
body {
background: #353535
}
.face,
.face * {
display: inline-block;
box-sizing: border-box;
}
.face {
width: 50vmin;
height: 50vmin;
background: #FDCC05;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin: -25vmin 0 0 -25vmin;
box-shadow: -3vmin 3vmin 3vmin rgba(255, 255, 255, 0.5) inset, 3vmin -3vmin 3vmin rgba(0, 0, 0, 0.15) inset, -1vmin 1vmin 3vmin rgba(0, 0, 0, 0.35);
border: 0.1vmin solid rgba(255, 255, 255, 0.35);
}
.eyes {
margin: 10vmin auto 0;
width: 100%;
text-align: center;
}
.eyes:before, .eyes:after {
content:'';
display:inline-block;
width: 2.4vmin;
height: 12vmin;
background: rgba(0, 0, 0, 0.85);
border-radius: 50%;
margin: 0 5vmin;
box-shadow: 0 1vmin 1vmin rgba(255, 255, 255, 0.5)
}
.mouth {
position: absolute;
margin: auto;
width: 30vmin;
height: 30vmin;
border-radius: 50%;
bottom: 9vmin;
left: 50%;
margin-left: -15vmin;
box-shadow: 0 calc(-1vmin - 2px) 0 rgba(0, 0, 0, 0.8) inset, 0 1vmin 1vmin rgba(255, 255, 255, 0.35);
}
.mouth:before,
.mouth:after {
content: '';
position: absolute;
display: block;
background: rgba(0, 0, 0, 0.8);
height: 6vmin;
width: calc(0.5vmin + 2px);
border-radius: 50%;
box-shadow:0 1vmin 1vmin rgba(255,255,255,0.5)
}
.mouth:before {
transform: rotate(45deg);
top: 12.3vmin;
left: -0.7vmin
}
.mouth:after {
transform: rotate(-45deg);
top: 12.3vmin;
right: -0.7vmin
}
@keyframes haha {
45% {
box-shadow: 0 -6vmin 0 rgba(0, 0, 0, 0.8) inset;
}
}
