CSS でキャラクターを作ってみた。

コードは殴り書きしたので汚いです。

html

<div id="character">
<div class="ear"></div>
<div class="ear"></div>
<div class="head">
  <div class="eye">
    <div></div>
  </div>
  <div class="eye">
    <div></div>
  </div>
  <div class="mouth"></div>
</div>
</div>

CSS

#character{
  display: inline-block;
  position: relative;
}

/* 頭 */
.head{
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 100%;
  background: #000;
  z-index: 1;
}

/* 耳 */
.ear{
  position: absolute;
  top: -50px;
  border: 100px solid transparent;
  border-radius: 100%;
  transform: rotate(-2deg);
  z-index: -2;
}

.ear:nth-child(1){
  border-left: 100px solid #EEA057;
  left: 20px;
}

.ear:nth-child(2){
  border-right: 100px solid #EEA057;
  right: 20px;
}

/* 目 */
.eye{
  position: absolute;
  top: 60px;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: #fff;
}

.eye:nth-child(1){
  left: 60px;
}

.eye:nth-child(2){
  right: 60px;
}

.eye > div{
  position: absolute;
  top: 10px;
  left: 15px;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: #000;
  animation: anime 5s linear infinite alternate;
}

.mouth{
  position: absolute;
  left: 76px;
}

.mouth:before{
  content: "";
  display: inline-block;
  position: relative;
  top: 100px;
  left: 20px;
  width: 50px;
  height: 100px;
  border: 10px solid transparent;
  border-bottom: 10px solid #0f0;
  border-radius: 100%;
}

.mouth:after{
  content: "";
  display: inline-block;
  position: relative;
  top: 100px;
  right: 20px;
  width: 50px;
  height: 100px;
  border: 10px solid transparent;
  border-bottom: 10px solid #0f0;
  border-radius: 100%;
}


@keyframes anime{
  from{
    top: 10px;
    left: 15px;
  }
  to{
    top: 0;
    left: 0;
  }
}