【piu~】制作一只变形小鸡~

在http://codepen.io/pick上看到的，，，具体是谁忘了,反正我只截了最萌的一段，作者越改越不萌ಥ_ಥ

谷哥哥随便一搜就有很多好玩的，度娘就...( ￣ ▽￣)o╭╯☆#╰ _─﹏─)╯
**效果如下：**

  <div class="comb comb"></div>
  <div class="eye eye--l"></div>
  <div class="eye eye--r"></div>
  <div class="beak"></div>

code:

<section class="frame">
  <div class="chicken">

      <div class="comb comb"></div>
      <div class="eye eye--l"></div>
      <div class="eye eye--r"></div>
      <div class="beak"></div>

  </div>
</section>


<style>
.frame {
   position: absolute;
   top: 95%;
   left: 35%;
   -webkit-transform: translate(-50%, -50%); 
       -ms-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
   width: 500px;
   height: 500px;
   background-color: #BDFAEB
}


.chicken {
  position: absolute;
  top: 100px;
  left: 130px;
  width: 234px;
  height: 234px;
}
.chicken:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: white;
  -webkit-transition: all 0.3s cubic-bezier(0.98, 0, 0.55, 1);
          transition: all 0.3s cubic-bezier(0.98, 0, 0.55, 1);
}
.chicken:hover:before {
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  -webkit-transform: scaleX(0.6838);
      -ms-transform: scaleX(0.6838);
          transform: scaleX(0.6838);
}


.comb {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 22px;
  height: 38px;
  margin-left: -11px;
  background-color: #FB6765;
  -webkit-transform-origin: 50% 100%;
      -ms-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.98, 0, 0.55, 1);
          transition: transform 0.3s cubic-bezier(0.98, 0, 0.55, 1);
}

.chicken:hover .comb {
  -webkit-transform: scaleY(0);
      -ms-transform: scaleY(0);
          transform: scaleY(0);
}


.eye {
  position: absolute;
  top: 36px;
  width: 14px;
  height: 14px;
  background-color: black;
  border-radius: 50%;
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.98, 0, 0.55, 1);
          transition: transform 0.3s cubic-bezier(0.98, 0, 0.55, 1);
}

.chicken:hover .eye {
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
}

.eye--l {
  left: 48px;
}

.eye--r {
  right: 48px;
}


.beak {
  position: absolute;
  top: 56px;
  left: 50%;
  width: 36px;
  height: 36px;
  margin-left: -18px;
  background-color: #FB6765;
  border-radius: 50%;
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.98, 0, 0.55, 1);
          transition: transform 0.3s cubic-bezier(0.98, 0, 0.55, 1);
}

.chicken:hover .beak {
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
}


</style>