用我的代码,给你浪漫的雪花飞舞

北方的冬天,现在已经雪花飘飘,作为南方的孩子,很难经历这种雪花飘飘的场景。

谁不想带着自己的女朋友在这漫天飞舞的雪花中牵着手,互相依偎。咳咳咳,很抱歉我还没有女盆友,都是我幻想着,也只有幻想才会那么唯美。

闲话不多说,我也没仔细多想,就用最笨的方法实现了,下面是代码:

用我的代码,给你浪漫的雪花飞舞

制作正方形div若干个

上面的有10个div,样式设计让他们处于绝对定位,让他可以随意流动而不影响布局。每个div的起始位置不同,最好遍布屏幕横轴。每个div都要有个id,由字母与接下来传入的数字j组成,然后在body标签前生成。

那么10个div雪花做好了,如何让它动起来呢?,那就是用计时器去完成了,看如下代码:

用我的代码,给你浪漫的雪花飞舞

计时器动态加载生成雪花动画

其中j为用于对应id数字,每1秒加1,然后每个div用动画函数方法animate,并在里面做好下落的高度,与下落飘移的位置,飘移的横向位置尽量分布均匀点,加上j,使之有飘移感而不是直直落下。每个div下落的时间都不同,这样才能交错,错乱,才有雪花飘飞之感,

那么接下来见证奇迹的时刻到了,看效果:

播放

暂停

进入全屏

退出全屏

00:00

00:00

重播

刷新

试试

本视频录制临时找了个软件,带水印了,我另外还加了张图,哈哈,其实蛮想P我喜欢的人跟我一起的,我怕被打,哈哈,不过发给她看,她说还可以了。

其实应该存在一个通用的算法,不会像我那个那么多,上面那个加J应该去掉,因为随着时间的推移,j变大。会偏向很大,所以算法有很大的优化空间,欢迎大家一起讨论。


分享到:


相關文章: