纯CSS3效果-Loading效果

效果图：

步骤一：

写好结构；div是装小圆点的盒子。span是每个小圆点。

步骤二：

给div设置宽高，居中在页面显示。

步骤三：

给大盒子居中；设为相对定位；因为子级都需要用到绝对定位；把刚才设置好的a动画给大盒子调用。

步骤四：

设置动画，从0开始透明度为1，知道动画结束的时候透明度为0的过渡。

步骤五：

总共5个span，分别设置动画执行时间，使效果看起来是依次排列的动。

步骤六：

设置动画，从0开始透明度为1，知道动画结束的时候透明度为0的过渡。

步骤七：

1.给span设置样式为左浮动，宽高15px，设置为圆和背景颜色，执行刚才定义好的动画为1秒钟执行完毕。

2.最后一个span取消margin是为了不让最后一个小圆点不往下掉。

陈伟豪-CSS3效果-Loading效果.zip (152.57 KB, 下载次数: 46)

2016-11-23 17:47 上传

点击文件名下载附件

不错

17862971894 发表于 2016-11-23 18:15
不错