您现在的位置是：网站首页> 编程资料编程资料

基于CSS3实现的几个小loading效果 _css3_CSS_网页制作_

2023-11-04 208人已围观

简介这篇文章主要介绍了CSS3实现的几个小loading效果 ,需要的朋友可以参考下

CSS3实现的几个小loading效果

昨晚上闲的没事突然想做几个小loading效果，下面是昨晚上做的几个小案例，分享给大家

　　　　1.水波loading：这个loading是我觉得非常简单，但是看上去的效果却非常不错的一个小loading

　　　　这个是效果图片

　　　　下面我直接把代码放上来，大家需要的可以直接拉走

核心思想：（旋转，以及overflow:hidden属性），可以把代码中的overflow属性注释掉，保准你看一眼明白了，看不明白回来找我，我对你负责

Document

　　2.普通的圆形loading 这个也很简单没啥好说的，直接上代码了

Document

　　3.圆形转圈loading

　　思想（把小圆用定位排成圆形，再给每个上添加动画，用delay控制延迟事件即可）

　　4.交叉效果

　　　　这个稍微复杂一点，其实只要捋明白思路，也挺简单的（PS：大家可以把动画挨个取消试试，你就会发现好像并不是很难）

5.圆形正方形切换小loading

　　这个是真的简单！！！！！

loading-04

我没做兼容，要是再某些浏览器不能运行，加一下浏览器前缀就好啦！

以上所述是小编给大家介绍的CSS3实现的几个小loading效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！