Structure

library_books<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

library_books<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>