黑马程序员技术交流社区

标题: 纯CSS3效果-Loading效果---出自黑马深圳中心 [打印本页]

作者: 陈伟豪    时间: 2016-11-23 17:39
标题: 纯CSS3效果-Loading效果---出自黑马深圳中心
本帖最后由 陈伟豪 于 2016-11-23 17:49 编辑
纯CSS3效果-Loading效果

效果图:

步骤一:
写好结构;div是装小圆点的盒子。span是每个小圆点。


步骤二:
div设置宽高,居中在页面显示。


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


步骤四:
设置动画,从0开始透明度为1,知道动画结束的时候透明度为0的过渡。


步骤五:
总共5span,分别设置动画执行时间,使效果看起来是依次排列的动。


步骤六:
设置动画,从0开始透明度为1,知道动画结束的时候透明度为0的过渡。


步骤七:
1.span设置样式为左浮动,宽高15px,设置为圆和背景颜色,执行刚才定义好的动画为1秒钟执行完毕。
2.最后一个span取消margin是为了不让最后一个小圆点不往下掉。



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

作者: 17862971894    时间: 2016-11-23 18:15
不错

作者: 陈伟豪    时间: 2016-11-24 18:22
17862971894 发表于 2016-11-23 18:15
不错






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2