用最少原生JS实现雪花飘落

实现雪花飘落效果的方法有很多,CSS,JS,canvas,这些技术点稍加思考,效果就出来了,但是,想写出一个好的,简短的实现方试,就得多想想了。下面我来推荐一种比较的实现方式-用最少的原生JS处理,当然,需要借住CSS3来实现一些效果。

不多说了,先来看一下效果:

利用了一张图片,大致的实现思路是:在HTML中随机生成div,每个div都包含一张雪花图片,用随机数控制div的left和height,让它在一定时间内产生动画最终消失,动画效果用CSS的keyframes来控制(需要注意一下兼容性)。

DOM结构就是

看一下CSS3的效果怎么处理:

最后就是JS的代码的实现过程:

很简单的一个实例,代码也不多,容易看懂,当然,有时候也可以使用*符号来处理这么一样效果,根据具体需求来选择。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180319A1T6WQ00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券