1. 先说说我们来说说什么是加载动画

你肯定在很多网站上看到过那些旋转的圈圈或者跳来跳的小球，这就是加载动画啦！它主要是让用户等待的时候不觉得无聊，显得网页很专业。其实做这个东西很简单，就是让元素变形或者移动，然后循环播放，不是我唱反调...。

2. 最简单的旋转圆圈动画

这个最常见了代码如下：

我始终觉得... 看起来就是一个圆圈在不停地转啊转。要点就是： - 用border-radius把方框变成圆 - 把上面的边变成蓝色其它部分灰色 - 用animation和@keyframes让它一直转

3. 三个小球跳来跳去

这种也很常见：

真香！ 三个小球会轮流跳起来 代码要点： - 三个小球放在一起 - 每个都用相同的动画但延迟时间不同

噪音段落

有时候你可能想要更花哨一点儿效果，比如像心脏跳动一样膨胀收缩。代码可以这样写：

css .pulse { width：40px；height：40px； background：pink； border-radius：50%； animation：pulse .8s ease-in-out infinite； }，深得我心。

@keyframes pulse { from {transform：scale；opacity:.6； 实不相瞒... } to {transform：scale；opacity:.3；} }

实际上... 不过具体效果得看浏览器支持情况，有的旧版本可能看不到。

还有一种是像波浪一样扩散开来。不过这需要用到伪元素：

css .wave::before,.wave::after { content:""; position：absolute； top:-10%; left:-10%; width：120%; height：120%; background-color：inherit； 无语了... opacity:.7； animation-name:waveEffect,waveFadeInOut,waveRotateZ; animation-duration:.7s,3s,7s; }

@keyframes waveEffect {...} /太长就省略了/

这样写出来确实有点复杂，建议先从简单的开始学起，不堪入目。。

常见问题解答

无语了... 问为什么我的加载动画不显示？ 答可能忘记加display:block/inline-block/flex或者没有给宽高。

问能不能调整速度？ 答当然可以！改animation-duration值就行了，纯属忽悠。。

开倒车。 问怎么停止播放？ 答给元素加上animation:none;就停止了。

总之呢，CSS加载动画主要就是玩弄几个属性： - animation - transform - opacity 只要掌握这几个关键词再配合创意发挥就能做出各种酷炫效果！

记得先从简单开始练习哦~