loading动画图标的做法有很多。一般不想麻烦的人直接嵌入一张gif的动态图标即可实现!虽然该方法方便快捷,但是对网站的加载速度优化方面还不是最好,制作的GIF图片很难控制它们的大小!今天我就来说说如何用css来制作一个loading动画效果,供大家参考,感兴趣的小伙伴可以看看!

常见的加载动画有以下2中:

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

第一种:周围的圆圈围着在转,即等待加载

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

第二种:三点在不停的大小变化加载

下面就来说说这两种效果的实现方法:

第一种效果实现:

html:(用8个div代表8个小黑点)

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

css:

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

这里设定一个动画效果,命名为loading!设定让每一次的小点由透明度为0.3变为透明度为1,由缩小0.4变为缩小为原来大小的过渡。然后用伪类元素方法让每一个div加载该动画,然后再设置延迟时间即可如图动态运动起来!

第二种效果实现:

html:(用3个div代表3个小蓝点)

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

css样式:

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

该效果主要是div的放大缩小效果在起作用,设定一个名为scale的动画,由起初的原始状态到缩小为原来0.1倍大小和透明度为0.7的状态再到原始状态的动画改变。然后再在每个div下设置加载延时时间即可达到想要的效果!

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

,