这是用纯粹的css做的Loading小动画，就像是一个正方形在地上弹跳，碰到地面的时候尖角还会压缩变圆，阴影的部分也会随着正方形升高而缩小，下面是效果图：

第一步：

首先写body部分，我们分成上下两个盒子，一个用于弹动的矩形，另一个是缩放的阴影。（当然，你用伪元素也是可以的）

然后写基础样式

效果如图：

第二步

添加矩形动画，矩形是上下跳动并旋转的，所以用到CSS3中的@keyframes，并通过margin-top去做跳动效果、rotate去做旋转效果。

跳动没啥说的，旋转这里有个小技巧：就是落下的时候是0度转到45度，弹上去的时候从45旋转到90度，然后在这一瞬间从90度变成0度（100%到0%），如此一来我们就会产生错觉，感觉好像一直在旋转了。

为了有那种弹跳、重力挤压的感觉，我在50%给每次和地面触碰的角加了圆角加大，然后20%和80%紧接着变小。

然后就是在50%的地方我加了内阴影效果，看起来像聚光的一个效果。

动画写好了后，绑定到对应元素

效果如图：

第三步

添加阴影动画，这个比较简单，直接添加放大缩小的效果就可以了。

然后绑定动画

有一个点要注意的是，矩形和阴影动画时间要设置成一样，不然落地的时候和影子匹配不上。

最终效果：

好玩、简单的小动画就制作完成了！

希望对正在学CSS的朋友有所帮助！