龙空技术网

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

小郑搞码事 651

前言:

眼前姐妹们对“js下雪特效”大概比较珍视,同学们都想要剖析一些“js下雪特效”的相关内容。那么小编同时在网络上收集了一些对于“js下雪特效””的相关文章,希望各位老铁们能喜欢,你们快快来了解一下吧!

点击上方蓝字关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!

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

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

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

DOM结构就是<div id="snowFlow"></div>

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

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

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

标签: #js下雪特效