之前写过一次类似树叶落下的效果,当时想到的方法是,动态的往body里面添加元素,添加一些随机的属性,然后写一个动画,让他按照随机的速度落下,达到一种落差的效果,最后判断top值是否超过clientHeight,超过就remove掉。
嗯,看样子不错,也能跑起来,但是在安卓手机上测试,会有卡顿,后来优化了下,改成css3动画,再次测试,不错,安卓也不卡了,挺流畅,但是代码量又增加了,并且这样反复的对dom进行属性的重绘,添加和删除,效率很低。
今天换了另一种写法,所有动画效果全部利用css3来完成,也不用反复的进行dom添加和删除操作了,并且代码量是之前的三分之一。先看下面的演示效果吧。