(-1)写在前面
我用的是chrome49,这个idea是我在stackoverflow上回答问题时看到了,多谢这位同行,加深了我对很多技术点的理解,最近刚到北京,忙碌了一两天,在后续的日子里,会被安排面试,学习计划只能按工作流走了,做完这个要看一个特别酷的效果,好激动!
(0)效果演示
(1)实现方案
动画效果都是用animation做的
(2)知识点详解
a. border-radius:40px;
当div的长高都是80px的时候,div是一个圆形,其实长高都是60px的时候也是圆型,同理都是40、30也是圆型,当然案例中没有使用这种方式。具体实现在代码中说明
b. position:absolute;
当div使用此属性时,margin:0 auto是无效的,小球使用了这个属性,他的水平居中的实现方式在代码中说明
c. animation:down 1.5s infinite alternate;
I.1.5s 是动画的持续时间,因为延迟时间出现在持续时间的后面,所以只出现一个带s的参数是持续时间。
II.这里的alternate是指反向播放动画,比如说一个动画的帧如下
@keyframes down { from { … } 95% { … } to { … } }
正向播放是from-95-to,反向播放to-95%-from
d. @keyframes down{95%{…}}
如果对应animate:down 1.5s;
动画在执行到95%就到达了最终状态,剩余5%的时间会用在回到初始状态。
(3)代码加解释
为了生活