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

.frame {
position: absolute;
top: 9.4%;
left: 40%;
-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);
}

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>