如何使用CSS实现一个吃豆人的Loading加载效果

小编给大家分享一下如何使用CSS实现一个吃豆人的Loading加载效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！先来实现左边的大嘴巴，我是用了两个这种形状的东西，完后给下面的那个margin-top:-50px，它俩就实现了重叠，之后用动画效果，让上面顺时针旋转，下方与之相反，旋转90就可以实现嘴巴张开合上的动作了。旋转动画分别是：之后将动画加到我们刚刚生成的那两个元素的css中即可（运用这个属性就行：animation），因为我是div套了div，所以我用的是伪元素来选择的：分别是first-of-type免费云主机、域名和nth-child(2)，选中了第一个跟第二个div来作为吃豆人的嘴巴。要注意的是，两个嘴巴的动画时间要同步，否则这个嘴可就上下乱窜了：现在的效果是这样的：同样，我们在刚刚的两个div同级的地方，又建了三个div，我真是太喜欢div了~万物皆可div！！！豆子相对于嘴巴来说就很简单，首先他是圆的，其次呢，它的动画是向左移动的，具备这两个条件，就可以了。我们直接使用伪元素选中3、4、5三个div，加上这段css即可。会不会有人问：为什么你就知道定位的时候是-6.25px呢？，最后解释最后解释。接下来加上向左移动的动画：似乎，要是走一段变得透明一些是不是会更好？这个有待考虑~最后将动画分别用选择器挂到第3、4、5个div上就行啦，同时要注意，动画的起始时间不要设置成一样的，否则它们就同步啦！！！我这里设置的分别是0.33/0.66/0.99秒哦~
就像这样：看一下最终效果吧~其实…..我研究了好半天，我把图给大家，要是能算出来也帮我算算，我最后是实验出来的，6到7都差不多，但是6.25更顺眼一些emmm，但是实验到7px的时候，小圆的圆心就有点明显偏上了，所以emm就6.25吧（差不多~，还有就是我想写6.5的，但是总觉得6.25好听点emm）。看完了这篇文章，相信你对“如何使用CSS实现一个吃豆人的Loading加载效果”有了一定的了解，如果想了解更多相关知识，欢迎关注云技术行业资讯频道，感谢各位的阅读！

相关推荐: 如何使用javascript 数组来代替条件语句以及如何使用classList操作类名。

这期内容当中小编将会给大家带来有关如何使用javascript 数组来代替条件语句以及如何使用classList操作类名。，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。JavaScript 是一种易于学习的编程语言，编写运行…