一、小编碎碎念
又是一年圣诞节，刚好赶上周末，狠狠的休息了两天。节日过了之后才起来看一下有没有什么活动，还好持续周期比较长，赶上年末，好些活动的时间都重叠在了一起。作为勋章收割机，一看到活动有勋章送，那肯定是不能错过，想来写一个雪花飘落❄️配上圣诞树🎄也是极好的～
二、代码效果
由于使用前端实现，所以代码结构十分简单，参考了一些效果不错的代码，重新修饰了一下，雪中的圣诞树就出现了。
1. 运行效果
尝试画了一下圣诞树，但是感觉画来画去一直都是卡通系，最后还是直接找一张png图片来的快一点，整体效果还是不错的，顺便温习了一下前端知识，巴适的很～
2. 核心代码
雪花的飘落效果主要是由js来控制，生成一个canvas，调整好定位方式，就可以覆盖整个网页，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>🌟🎄</title> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/snowy.js" type="text/javascript"></script> <script src="js/Snow.js" type="text/javascript"></script> <style> * { margin: 0; padding: 0; } .snow-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999; } .img { width: 100%; height: 2000px; background-color: black; text-align: center; } .img img { margin-top: 300px; } </style> </head> <body> <div class="snow-container"></div> <div class="img"> <img src="img/tree.png" alt="" height="500" /> </div> </body> </html>
3. 代码说明
- js文件：需要用到3个js文件，注意次序
- jquery放在最上面
- 引入snowy.js
- Snow.js放在最后
- css样式
首先需要去掉所有的外边距与内边距，否则可能会产生白边【看雪花当然是要用黑色背景啦】，但是如果你的网页使用丰富的内容进行填充可以忽略。
放置图片的div设置了很大的height值，主要原因是因为页面没有其它内容进行填充，需要把高度稍微的撑一下，自己在玩耍的时候可以去掉。
- body内容
在body的开头设定一个class为snow-container的div，这样雪花效果就可以出来了，自定义的网页内容只需要顺次写在后面就可以了。
三、源码直达
