先感受一下全部表情包：

在开始之前先安利一个知识点：Flex弹性布局

• 我们一般做水平三列布局都是用的float方法，将每一块浮动显示在同一行。这种方法会导致元素没有原来的高度属性，要用清除浮动来解决空间占据问题。对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
• 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了几乎所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。基本语法查看博客：Flex 布局教程：语法篇
• 另外还要对css中的伪元素有一定的了解：before、after
• 最后想要表情动起来，最主要的就是animation属性的使用了。

整体布局

• 我们先对整体座椅个布局，使各个表情能直观的展示在各个位置上，因为每个表情几乎占据的是一个正方形的空间，所以我们将每个青蛙表情水平展示在页面上，这里就用到了flex布局方式。

  <div class="container"> <!--所有表情的存放容器，flex布局，所有子项目水平显示，自动换行，水平居中显示，竖直方向从顶部开始--> <div class="emoji-container"> <!--存放青蛙表情的大容器，控制大小间距之类的属性--> <div class="icon"> <!--存放每一个青蛙表情的容器，控制每一个表情自己的位置和特征--> <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的作用类似，不用清除浮动*/ display: -webkit-box; display: -ms-flexbox; display: flex; /*justify-content属性定义了项目在主轴上的对齐方式。center就是在x轴上居中显示*/ -ms-grid-column-align: center; justify-items: center; /*align-items属性定义项目在交叉轴上如何对齐。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%;}

蛙蛙的通用样式

• 观察一个每一个蛙蛙表情，虽然每一个表情形态各异，但是它们的身体、嘴巴、眼睛、小红晕的位置和大小几乎都是一致，这些一致的样式我们可以写成公用样式，每个蛙蛙的特征再根据每个人蛙蛙的id写单个的样式进行重绘或者覆盖。

  <div class="frog" id="frog-1"> <!-- 蛙蛙的身体部分 --> <div class="body"> <!-- 蛙蛙的嘴巴 --> <div class="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 {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); } /*蛙蛙嘴巴部分样式，因为每个蛙蛙的嘴巴不一样，所以公共样式就只定义了位置*/ .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: 8