loading动画图标的做法有很多。一般不想麻烦的人直接嵌入一张gif的动态图标即可实现！虽然该方法方便快捷，但是对网站的加载速度优化方面还不是最好，制作的GIF图片很难控制它们的大小！今天我就来说说如何用CSS来制作一个loading动画效果，供大家参考，感兴趣的小伙伴可以看看！
常见的加载动画有以下2中：
第一种：周围的圆圈围着在转，即等待加载
第二种：三点在不停的大小变化加载
下面就来说说这两种效果的实现方法：
第一种效果实现：
html：（用8个div代表8个小黑点）
css:
这里设定一个动画效果，命名为loading！设定让每一次的小点由透明度为0.3变为透明度为1，由缩小0.4变为缩小为原来大小的过渡。然后用伪类元素方法让每一个div加载该动画，然后再设置延迟时间即可如图动态运动起来！
第二种效果实现：
html:（用3个div代表3个小蓝点）
css样式：
该效果主要是div的放大缩小效果在起作用，设定一个名为scale的动画，由起初的原始状态到缩小为原来0.1倍大小和透明度为0.7的状态再到原始状态的动画改变。然后再在每个div下设置加载延时时间即可达到想要的效果！
想学习更多知识，可以关注“恒星网络”头条号！