html动画(2)青蛙（html简单动画）

先感受一下全部表情包：

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

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

整体布局

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

蛙蛙的通用样式

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

蛙蛙基本公用样式.png

第一只小青蛙

第一只小青蛙是在基本样式的基础上有一个嘴角上扬的动态效果，所以要完成第一只蛙蛙的绘制，只要在公用样式的基础上加上嘴巴的动效就可以了，dom结构也是一样的。
```
.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;
```

第一只蛙蛙动图.gif

第二只小青蛙

第二只小青蛙的嘴巴是一个大嘴巴，脸颊上还有两个小红晕，眼睛是冒着爱心的，所以在dom结构上要加上红晕的div，嘴巴眼睛的样式也要做相应的修改。（主要是嘴巴、红晕和红色爱心的制作）
```
<div class="frog" id="frog-2">
```

第二只蛙蛙动图.gif

第三只小青蛙

<div class="frog" id="frog-3">

第三只蛙蛙动图.gif

第四只小青蛙

第四只小青蛙相对于公共样式的变化是眼睛和嘴巴的变化，眼睛的眼珠里面有两个亮光点，嘴巴是大嘴巴并且可以一张一合，嘴巴里面还有一个小舌头。它的光晕处于一会有一会没有的状态。
```
<div class="frog" id="frog-4">
```

第四只蛙蛙动图.gif

剩余的其它蛙蛙

其它蛙蛙的画法都是基于通用样式的基础上对独特样式进行编写，最重要的是对动画帧的控制，各种形状就是基本几何图形的拼接（正方形，border-radius，transform，position的合理运用）。
由于代码量太大我就不在文章里赘述，主要还是对动画帧的熟练运用！（重要的事情说三遍）。

学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群

343599877，我们一起学前端！

网站首页 > 技术文章正文