Face
Structure
<div class="face">
<div class="eye">
<span class="eyeball"></span>
</div>
<div class="eye" style="margin-left:20px;">
<span class="eyeball"></span>
</div>
<span class="mouth"></span>
</div>
Style
<style>
*{box-sizing:border-box;}
@keyframes updown{
0%,100%{transform: translateY(0px);}
50%{transform: translateY(-20px);}
}
.face{
margin:25px;
width:50px;
height:50px;
position:relative;
box-shadow:0 0 4px rgba(0,0,0,0.3);
border-radius:5px;
animation: updown 2s linear infinite;
}
.eye {
background-color: #fff;
width: 14.8px;
height: 18.6px;
position: absolute;
border-radius: 100%;
overflow: hidden;
border: 1px solid black;
left:7.6px;
top:5px;
}
.eyeball{
position: absolute;
width: 9px;
height: 9px;
background-color: #000;
border-radius: 50%;
left: 2.4px;
top: 4.3px;
z-index: 10;
}
.mouth{
position: absolute;
top: 36px;
right:15px;
width:20px;
border: 1px solid black;
}
.face:hover .mouth{height:4px;border-radius:5px}
</style>