之前在網(wǎng)上看到一些用純CSS3實現(xiàn)的酷炫效果，以為實現(xiàn)起來比較困難，于是想看看具體是怎么實現(xiàn)的。

一、笑臉貓動畫

實現(xiàn)效果如下：

電腦培訓(xùn),計算機培訓(xùn),平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

這個實現(xiàn)起來確實比較麻煩，很多地方需要花時間，有耐心地調(diào)整。

1.先看下頁面結(jié)構(gòu)：

電腦培訓(xùn),計算機培訓(xùn),平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

<body>
  <div class="container">
    <!-- 臉 -->
    <div class="face">
      <!-- 頭發(fā) -->
      <div class="hair">
        <div></div>
      </div>
      <!-- 眼睛&n