效果图:
步骤一:
写好结构;div是装小圆点的盒子。span是每个小圆点。
步骤二:
给div设置宽高,居中在页面显示。
步骤三:
给大盒子居中;设为相对定位;因为子级都需要用到绝对定位;把刚才设置好的a动画给大盒子调用。
步骤四:
设置动画,从0开始透明度为1,知道动画结束的时候透明度为0的过渡。
步骤五:
总共5个span,分别设置动画执行时间,使效果看起来是依次排列的动。
步骤六:
设置动画,从0开始透明度为1,知道动画结束的时候透明度为0的过渡。
步骤七:
1.给span设置样式为左浮动,宽高15px,设置为圆和背景颜色,执行刚才定义好的动画为1秒钟执行完毕。
2.最后一个span取消margin是为了不让最后一个小圆点不往下掉。