css纯加载动画,纯CSS实现loading动画加载效果

原标题:纯CSS实现loading动画加载效果

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

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

85a44e9354ef9848c264bd37eccce4e4.png

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

b456ad2fa1394533a287ec107253d381.png

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

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

第一种效果实现:

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

717c0b265da247983e9002df58279645.png

css:

37423ca8f8441ade26c538b07ef08619.png

9cb1f864d1c5530d0c3e8a8103c82a8e.png

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

第二种效果实现:

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

9058b3a8026d7b82ae195cee65521984.png

css样式:

a5f9b98c7f44fe4d0d75d4d3b3b7e37d.png

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

责任编辑: