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

魁首哥

作者

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

小编给大家分享一下如何使用CSS实现一个吃豆人的Loading加载效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

实现吃豆人的大嘴巴

先来实现左边的大嘴巴，我是用了两个这种形状的东西，完后给下面的那个margin-top:-50px，它俩就实现了重叠，之后用动画效果，让上面顺时针旋转，下方与之相反，旋转90°就可以实现嘴巴张开合上的动作了。

width:0px;height:0px;border-right:25pxsolidtransparent;border-top:25pxsolid#279fcf;border-left:25pxsolid#279fcf;border-bottom:25pxsolid#279fcf;border-radius:25px;

旋转动画分别是：

@keyframesrotate_pacman_up{0%{-webkit-transform:rotate(270deg);transform:rotate(270deg);}50%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}100%{-webkit-transform:rotate(270deg);transform:rotate(270deg);}}

@keyframesrotate_pacman_down{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg);}50%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(90deg);transform:rotate(90deg);}}

之后将动画加到我们刚刚生成的那两个元素的css中即可（运用这个属性就行：animation），因为我是div套了div，所以我用的是伪元素来选择的：分别是first-of-type和nth-child(2)，选中了第一个跟第二个div来作为吃豆人的嘴巴。

要注意的是，两个嘴巴的动画时间要同步，否则这个嘴可就上下乱窜了：

animation:rotate_pacman_up0.75s0sinfinite

现在的效果是这样的：

实现吃豆人的豆子

同样，我们在刚刚的两个div同级的地方，又建了三个div，我真是太喜欢div了~

万物皆可div！！！

豆子相对于嘴巴来说就很简单，首先他是圆的，其次呢，它的动画是向左移动的，具备这两个条件，就可以了。我们直接使用伪元素选中3、4、5三个div，加上这段css即可。

background-color:#279fcf;width:15px;height:15px;border-radius:100%;margin:2px;width:10px;height:10px;position:absolute;transform:translate(0,-6.25px);top:25px;left:100px;