第三只蛙蛙动图.gif

第四只小青蛙

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

  <div class="frog" id="frog-4"> <div class="body"> <div class="mouth big-mouth"> <div class="toungue"></div> </div> </div> <div class="eyes"> <!--控制另一个眼珠闪光点的样式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> /*第四只小青蛙眼珠另一个闪光点样式*/ .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%; }

  
  

  第四只蛙蛙动图.gif

剩余的其它蛙蛙

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

• 提供源码的下载地址，大家下下来运行一下，在调试其中调试一下css样式就可以很清楚的看明白了源码加群

学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群
343599877，我们一起学前端！