css实现各种loading效果附带解析（纯CSS即可实现的loading动画加载效果）

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下设置加载延时时间即可达到想要的效果！

想学习更多知识，可以关注“恒星网络”头条号！