先感受一下全部表情包：

蛙蛙表情包.gif

在開始之前先安利一個(gè)知識(shí)點(diǎn)：Flex彈性布局

• 我們一般做水平三列布局都是用的float方法挖藏，將每一塊浮動(dòng)顯示在同一行材部。這種方法會(huì)導(dǎo)致元素沒有原來的高度屬性浩销，要用清除浮動(dòng)來解決空間占據(jù)問題改化。對(duì)于那些特殊布局非常不方便食拜，比如蔽介，垂直居中就不容易實(shí)現(xiàn)。
• 2009年献幔，W3C 提出了一種新的方案----Flex 布局懂傀，可以簡便、完整蜡感、響應(yīng)式地實(shí)現(xiàn)各種頁面布局蹬蚁。目前，它已經(jīng)得到了幾乎所有瀏覽器的支持郑兴，這意味著犀斋，現(xiàn)在就能很安全地使用這項(xiàng)功能∏榱基本語法查看博客：Flex 布局教程：語法篇
• 另外還要對(duì)css中的偽元素有一定的了解：before叽粹、after
• 最后想要表情動(dòng)起來，最主要的就是animation屬性的使用了却舀。

整體布局

• 我們先對(duì)整體座椅個(gè)布局虫几，使各個(gè)表情能直觀的展示在各個(gè)位置上，因?yàn)槊總€(gè)表情幾乎占據(jù)的是一個(gè)正方形的空間挽拔，所以我們將每個(gè)青蛙表情水平展示在頁面上辆脸，這里就用到了flex布局方式。

<div class="container">
<!--所有表情的存放容器螃诅，flex布局每强，所有子項(xiàng)目水平顯示始腾，自動(dòng)換行州刽，水平居中顯示空执，豎直方向從頂部開始-->
  <div class="emoji-container">
     <!--存放青蛙表情的大容器，控制大小間距之類的屬性-->
      <div class="icon">
         <!--存放每一個(gè)青蛙表情的容器穗椅，控制每一個(gè)表情自己的位置和特征-->
      <div class="frog" id="frog-n">
</div></div></div></div>
body {background-color: #F1FFE6;}
.container {width: 950px;margin: 70px auto 0px auto;text-align: center;}
.container .emoji-container {
  /*flex彈性布局辨绊，多用于左右并排布局，跟float的作用類似匹表，不用清除浮動(dòng)*/
  display: -webkit-box;   
  display: -ms-flexbox;
  display: flex;
  /*justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式门坷。center就是在x軸上居中顯示*/
  -ms-grid-column-align: center;
      justify-items: center;
  /*align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。flex-start就是從y軸的最上端開始排列*/
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  /*flex-wrap屬性定義袍镀，如果一條軸線排不下默蚌，如何換行。wrap：換行苇羡，第一行在上方绸吸。*/
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.container .emoji-container .icon {
  margin-right: 40px;
  margin-bottom: 40px;
}
.container .emoji-container .icon:nth-child(6n) {
  margin-right: 0px;
}
.icon {width: 125px;height: 120px;position: relative;}
.icon .frog {position: absolute; top: 0;left: 0;width: 100%;height: 100%;}

蛙蛙的通用樣式

• 觀察一個(gè)每一個(gè)蛙蛙表情，雖然每一個(gè)表情形態(tài)各異设江，但是它們的身體锦茁、嘴巴、眼睛叉存、小紅暈的位置和大小幾乎都是一致码俩，這些一致的樣式我們可以寫成公用樣式，每個(gè)蛙蛙的特征再根據(jù)每個(gè)人蛙蛙的id寫單個(gè)的樣式進(jìn)行重繪或者覆蓋歼捏。

<div class="frog" id="frog-1">
        <!-- 蛙蛙的身體部分 -->
        <div class="body">
          <!-- 蛙蛙的嘴巴 -->
          <div class="mouth"></div>
        </div>
        <!-- 蛙蛙的眼睛 -->
        <div class="eyes">
          <!-- 蛙蛙的左右眼睛 -->
          <div class="eye eye-left">
            <!-- 蛙蛙的內(nèi)眼圈兒 -->
            <div class="eye-inner">
              <!-- 蛙蛙的眼珠 -->
              <div class="pupil">
                <!-- 蛙蛙眼圈里的光暈 -->
                <div class="light"></div>
              </div>
            </div>
          </div>
          <div class="eye eye-right">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
        </div>      
      </div>
/*蛙蛙身體部分樣式*/
.icon .frog .body {width: 110px;height: 86px;background-color: #A3D768;
                     border-radius: 50%;position: absolute;top: 25px;left: 0;right: 0;
                      margin: auto;box-shadow: 4px 4px 0px 0px rgba(163, 215, 104, 0.3);
}
/*蛙蛙嘴巴部分樣式稿存，因?yàn)槊總€(gè)蛙蛙的嘴巴不一樣瞳秽，所以公共樣式就只定義了位置*/
.icon .frog .body .mouth {margin: auto;}
.icon .frog .eyes {width: 86px;height: 35px;position: absolute;
                     top: 8px;left: 0;right: 0;margin: auto;
}
/*蛙蛙眼睛部分樣式*/
.icon .frog .eyes .eye {width: 35px;height: 35px;}
.icon .frog .eyes .eye:before {content: "";display: block;width: 100%;height: 100%;
                                 background-color: #A3D768;border-radius: 50%;
}
/*蛙蛙眼圈部分樣式*/
.icon .frog .eyes .eye .eye-inner {background-color: #fff;width: 80%;height: 80%;
            position: absolute;top: 10%;left: 10%;border-radius: 50%;
}
/*蛙蛙眼珠部分樣式*/
.icon .frog .eyes .eye .eye-inner .pupil {background-color: #3F6A34;
            width: 60%;height: 60%;position: absolute;top: 20%;left: 20%;border-radius: 50%;
}
/*蛙蛙眼珠里的亮光部分樣式*/
.icon .frog .eyes .eye .eye-inner .pupil .light {background-color: #fff;
            width: 50%;height: 50%;position: absolute;top: 10%;left: 10%;border-radius: 50%;
}
/*蛙蛙左右兩邊眼睛的位置*/
.icon .frog .eyes .eye-left {position: absolute;top: 0px;left: 0;}
.icon .frog .eyes .eye-right {position: absolute;top: 0px;right: 0;}

蛙蛙基本公用樣式.png

第一只小青蛙

• 第一只小青蛙是在基本樣式的基礎(chǔ)上有一個(gè)嘴角上揚(yáng)的動(dòng)態(tài)效果，所以要完成第一只蛙蛙的繪制瓢棒，只要在公用樣式的基礎(chǔ)上加上嘴巴的動(dòng)效就可以了脯宿，dom結(jié)構(gòu)也是一樣的连霉。

.frog#frog-1 .body .mouth {
  width: 18px;
  height: 22px;
  border-bottom: 3px solid #3F6A34;
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  -webkit-animation: smile 3.8s linear 0s infinite;
          animation: smile 3.8s linear 0s infinite;
}
@-webkit-keyframes smile {
  0% {
    border-radius: 0%;
  }
  20% {
    border-radius: 50%;
  }
  70% {
    border-radius: 50%;
  }
}
@keyframes smile {
  0% {
    border-radius: 0%;
  }
  20% {
    border-radius: 50%;
  }
  70% {
    border-radius: 50%;
  }
}

第一只蛙蛙動(dòng)圖.gif

第二只小青蛙

• 第二只小青蛙的嘴巴是一個(gè)大嘴巴窟感，臉頰上還有兩個(gè)小紅暈柿祈，眼睛是冒著愛心的哩至，所以在dom結(jié)構(gòu)上要加上紅暈的div菩貌，嘴巴眼睛的樣式也要做相應(yīng)的修改。（主要是嘴巴虚茶、紅暈和紅色愛心的制作）

<div class="frog" id="frog-2">  
        <div class="body">
          <!--存放蛙蛙的臉頰紅暈-->
          <div class="blush"></div>
         <!--加上大嘴巴的class big-month-->
          <div class="mouth big-mouth"></div>
        </div>  
        <div class="eyes">
          <div class="eye eye-left">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
          <div class="eye eye-right">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
        </div>      
      </div>
/*第二只青蛙臉頰兩邊的紅暈樣式*/
.icon .frog .body .blush {width: 75px;height: 9px;position: absolute;
              top: 20px;left: 0;right: 0;margin: auto;
}
.icon .frog .body .blush:before, .icon .frog .body .blush:after {
              content: "";display: block;width: 12px;height: 100%;background-color: #F7D2C9;border-radius: 50%;
}
.icon .frog .body .blush:before {position: absolute;top: 0;left: 0;}
.icon .frog .body .blush:after {position: absolute;top: 0;right: 0;}
/*第二只青蛙的嘴巴樣式媳危，用圓角和陰影的方式制作而成*/
.icon .frog .body .big-mouth {width: 30px;height: 20px;border-radius: 0 0 50% 50%;
              box-shadow: 2px 2px 0px 0px rgba(63, 106, 52, 0.3);
}
.frog#frog-2 .mouth {background-color: #fff;position: absolute;top: 30px;left: 0;right: 0;
}
/*第二只青蛙的眼睛樣式冈敛，將眼圈的背景設(shè)置為透明色暮蹂，圓圈里面的亮光隱藏*/
.frog#frog-2 .eye-inner {top: 17%;background-color: transparent !important;
  -webkit-animation: hearts 0.6s linear 0s infinite alternate;
          animation: hearts 0.6s linear 0s infinite alternate;
}
@-webkit-keyframes hearts {
  0% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes hearts {
  0% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
/*第二只青蛙的眼睛的愛心樣式仰泻，左上角和右上角設(shè)置交圓角50%集侯，然后左右對(duì)應(yīng)的旋轉(zhuǎn)45度合并成一個(gè)愛心的形狀*/
.frog#frog-2 .eye-inner:before, .frog#frog-2 .eye-inner:after {content: "";display: block;
            height: 70%;width: 40%;background-color: #C71F1C;border-radius: 50% 50% 0 0;
}
.frog#frog-2 .eye-inner:before {position: absolute;top: 0;left: 5px;
             -webkit-transform: rotate(-45deg);
                      transform: rotate(-45deg);
}
.frog#frog-2 .eye-inner:after {position: absolute;top: 0;right: 5px;
              -webkit-transform: rotate(45deg);
                      transform: rotate(45deg);
}
.frog#frog-2 .eye-inner .pupil {display: none;}

第二只蛙蛙動(dòng)圖.gif

第三只小青蛙

• 第三只小青蛙相對(duì)于公共樣式的變化是眼睛和嘴巴的變化泡挺，所以最主要的是畫出左眼樣式和嘴巴樣式娄猫。

• 舌頭的制作一個(gè)橢圓旋轉(zhuǎn)對(duì)應(yīng)的角度額按后被嘴巴遮擋住一部分制作而成生闲，

  
  
  第三只青蛙的舌頭分解顯示.png

<div class="frog" id="frog-3">
        <div class="body">
          <div class="mouth">
            <!--存放舌頭樣式的容器-->
            <div class="toungue"></div>
          </div>
        </div>
        <div class="eyes">
          <!--左眼添加wink的樣式月幌，作為左眼瞇眼樣式-->
          <div class="eye eye-left wink">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
          <div class="eye eye-right">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
        </div>  
      </div>
/*第三只小青蛙的左眼瞇眼樣式*/
.icon .frog .eyes .eye.wink .eye-inner {
  background-color: transparent;
  width: 17px;
  height: 3px;
  background-color: #3F6A34;
  border-radius: 0;
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  margin: auto;
  -webkit-transform: rotate(21deg);
          transform: rotate(21deg);
}
.icon .frog .eyes .eye.wink .eye-inner:before, .icon .frog .eyes .eye.wink .eye-inner:after {
  content: '';
  display: block;
  width: 17px;
  height: 3px;
  background-color: #3F6A34;
}
.icon .frog .eyes .eye.wink .eye-inner:before {
  -webkit-transform: rotate(25deg);
          transform: rotate(25deg);
  position: absolute;
  top: -4px;
  left: 0;
}
.icon .frog .eyes .eye.wink .eye-inner:after {
  -webkit-transform: rotate(-25deg);
          transform: rotate(-25deg);
  position: absolute;
  top: 4px;
  left: 0;
}
.icon .frog .eyes .eye.wink .pupil {
  display: none;
}
/*第三只小青蛙的右眼亮光位置*/
.frog#frog-3 .eye-right .light {
  position: absolute;
  top: 10%;
  left: auto;
  right: 10%;
}
/*第三只小青蛙的嘴巴吐舌頭樣式*/
.frog#frog-3 .mouth {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  -webkit-transform: rotate(23deg);
          transform: rotate(23deg);
}
.frog#frog-3 .mouth:before {
  content: "";
  display: block;
  border-bottom: 3px solid #3F6A34;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #A3D768;
  z-index: 3;
  position: absolute;
  top: 0px;
  left: 0;
}
.frog#frog-3 .toungue {
  width: 16px;
  height: 20px;
  background-color: #C71F1C;
  border-radius: 30px;
  z-index: 2;
  position: absolute;
  top: 17px;
  left: 4px;
  -webkit-transform-origin: center top;
          transform-origin: center top;
  -webkit-animation: toungue 2.0s linear 0s infinite;
          animation: toungue 2.0s linear 0s infinite;
}
@-webkit-keyframes toungue {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  40% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  75% {
    -webkit-transform: scale(1, 0);
            transform: scale(1, 0);
  }
}
@keyframes toungue {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  40% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  75% {
    -webkit-transform: scale(1, 0);
            transform: scale(1, 0);
  }
}
.frog#frog-3 .toungue:before {
  content: "";
  display: block;
  width: 2px;
  height: 4px;
  background-color: #410a09;
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 5px;
  margin: auto;
  opacity: 0.4;
}

第三只蛙蛙動(dòng)圖.gif

第四只小青蛙

• 第四只小青蛙相對(duì)于公共樣式的變化是眼睛和嘴巴的變化飞醉，眼睛的眼珠里面有兩個(gè)亮光點(diǎn)冲茸，嘴巴是大嘴巴并且可以一張一合，嘴巴里面還有一個(gè)小舌頭。它的光暈處于一會(huì)有一會(huì)沒有的狀態(tài)难衰。

<div class="frog" id="frog-4">
        <div class="body">
          <div class="mouth big-mouth">
            <div class="toungue"></div>
          </div>
        </div>  
        <div class="eyes">
          <!--控制另一個(gè)眼珠閃光點(diǎn)的樣式extra-light-->
          <div class="eye eye-left extra-light">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
          <div class="eye eye-right extra-light">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
/*第四只小青蛙眼珠另一個(gè)閃光點(diǎn)樣式*/
.icon .frog .eyes .eye.extra-light .light {width: 40%;height: 40%;}
.icon .frog .eyes .eye.extra-light .light:before {content: "";display: block;width: 70%;
              height: 70%;background-color: #fff;border-radius: 50%;
}

第四只蛙蛙動(dòng)圖.gif

剩余的其它蛙蛙

• 其它蛙蛙的畫法都是基于通用樣式的基礎(chǔ)上對(duì)獨(dú)特樣式進(jìn)行編寫钦无，最重要的是對(duì)動(dòng)畫幀的控制，各種形狀就是基本幾何圖形的拼接（正方形盖袭，border-radius，transform鳄虱，position的合理運(yùn)用）拙已。
• 由于代碼量太大我就不在文章里贅述，主要還是對(duì)動(dòng)畫幀的熟練運(yùn)用＝ǔ怠（重要的事情說三遍）扩借。
• 提供源碼的下載地址潮罪，大家下下來運(yùn)行一下领斥，在調(diào)試其中調(diào)試一下css樣式就可以很清楚的看明白了~蛙蛙表情源碼下載