Майк Вазовски в чистом CSS

Одноглазый монстрик с короткими рожками, головой вместо туловища и гладкой зелёной кожей; друг и напарник героя мультфильма «Корпорация монстров» Джеймса Салливана в чистом CSS.

CSS

body {
  background:#333;
  text-align:center;
  color:white;
}
/* magic starts */
.wazowski {
  background:#8ac34f;
  margin-top:150px;
  width:120px;
  height:100px;
  display:inline-block;
  position:relative;
  border-radius:120px 120px 50px 50px;
}
.wazowski:after {
  content:'';
  border:20px solid #8ac34f;
  width:110px;
  height:100px;
  display:block;
  position:absolute;
  top:10px;
  left:-15px;
  border-radius:90px 90px 80px 80px;
  z-index:0;
}
.wazowski:before {
  content:'';
  border:20px solid #8ac34f;
  border-bottom:none;
  border-top:20px solid transparent;
  border-radius:10px 10px 0 0;
  position:absolute;
  width:85px;
  height:50px;
  left:-3px;
  top:10px;
  z-index:0;
}

em.eye {
  background:white;
  width:60px;
  height:60px;
  border:none;
  border-radius:50px;
  top:20px;
  left:0;
  z-index:1;
  display:inline-block;
  position:relative;
  cursor:pointer;
  animation-name: eyeball;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-transition:ease-in;
}
em.eye:after, em.eye:before {
  position:absolute;
  content:'';
}
em.eye:before {
  background:black;
  width:30px;
  height:30px;
  border:5px solid #009581;
  border-radius:20px;
  top:17px;
  left:10px;
  z-index:2;
}
em.eye:after {
  background:#8ac34f;
  width:60px;
  height:10px;
  z-index:3;
  border-radius:5px;
  left:0;
  top:-10px;
  transition:all 0.1s ease;
}

/* animation */
.wazowski:hover em.eye:after {
  top:0;
  height:25px;
  transition:all 0.05s ease;
}
.wazowski:hover .eye {
  animation-name:none;
}
@keyframes eyeball {
	from { 	-webkit-transform: rotate(0deg); }
	to   {  -webkit-transform: rotate(360deg);; }
}
/* no more magic. */

HTML

<div class="wazowski">
  <em class="eye"></em>
</div>
<!-- no image. CSS has its magic. -->