关于html如何打造动画可爱的蛙蛙表情的案例分享

我们一般做水平三列布局都是用的float方法，将每一块浮动显示在同一行。这种方法会导致元素没有原来的高度属性，要用清除浮动来解决空间占据问题。对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了几乎所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。基本语法查看博客：Flex 布局教程：语法篇

另外还要对css中的伪元素有一定的了解：before、after

最后想要表情动起来，最主要的就是animation属性的使用了。

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

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

蛙蛙基本公用样式.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;@-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%;}

第一只蛙蛙动图.gif
第二只小青蛙
第二只小青蛙的嘴巴是一个大嘴巴，脸颊上还有两个小红晕，眼睛是冒着爱心的，所以在dom结构上要加上红晕的p，嘴巴眼睛的样式也要做相应的修改。（主要是嘴巴、红晕和红色爱心的制作）
 p >
第二只蛙蛙动图.gif
第三只小青蛙
第三只小青蛙相对于公共样式的变化是眼睛和嘴巴的变化，所以最主要的是画出左眼样式和嘴巴样式。
舌头的制作一个椭圆旋转对应的角度额按后被嘴巴遮挡住一部分制作而成，

第三只青蛙的舌头分解显示.png
 p >
第三只蛙蛙动图.gif
第四只小青蛙
第四只小青蛙相对于公共样式的变化是眼睛和嘴巴的变化，眼睛的眼珠里面有两个亮光点，嘴巴是大嘴巴并且可以一张一合，嘴巴里面还有一个小舌头。它的光晕处于一会有一会没有的状态。
 p >
第四只蛙蛙动图.gif
剩余的其它蛙蛙
其它蛙蛙的画法都是基于通用样式的基础上对独特样式进行编写，最重要的是对动画帧的控制，各种形状就是基本几何图形的拼接（正方形，border-radius，transform，position的合理运用）。
由于代码量太大我就不在文章里赘述，主要还是对动画帧的熟练运用！（重要的事情说三遍）。
以上就是关于html如何打造动画可爱的蛙蛙表情的案例分享的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。