实现雪花飘落效果的方法有很多,CSS,JS,canvas,这些技术点稍加思考,效果就出来了,但是,想写出一个好的,简短的实现方试,就得多想想了。下面我来推荐一种比较的实现方式-用最少的原生JS处理,当然,需要借住CSS3来实现一些效果。
不多说了,先来看一下效果:
利用了一张图片,大致的实现思路是:在HTML中随机生成div,每个div都包含一张雪花图片,用随机数控制div的left和height,让它在一定时间内产生动画最终消失,动画效果用CSS的keyframes来控制(需要注意一下兼容性)。
DOM结构就是
看一下CSS3的效果怎么处理:
最后就是JS的代码的实现过程:
很简单的一个实例,代码也不多,容易看懂,当然,有时候也可以使用*符号来处理这么一样效果,根据具体需求来选择。
领取专属 10元无门槛券
私享最新 技术干货