圣诞树的雪花飘飘（结尾附源码）

写在前面：博主是一只经过实战开发历练后投身培训事业的“小山猪”，昵称取自动画片《狮子王》中的“彭彭”，总是以乐观、积极的心态对待周边的事物。本人的技术路线从Java全栈工程师一路奔向大数据开发、数据挖掘领域，如今终有小成，愿将昔日所获与大家交流一二，希望对学习路上的你有所助益。同时，博主也想通过此次尝试打造一个完善的技术图书馆，任何与文章技术点有关的异常、错误、注意事项均会在末尾列出，欢迎大家通过各种方式提供素材。

对于文章中出现的任何错误请大家批评指出，一定及时修改。
有任何想要讨论和学习的问题可联系我：zhuyc@vip.163.com。
发布文章的风格因专栏而异，均自成体系，不足之处请大家指正。

圣诞树的雪花飘飘（结尾附源码）

本文关键字：圣诞节、雪花、圣诞树、动画、前端

文章目录

圣诞树的雪花飘飘（结尾附源码）
- 一、小编碎碎念
- 二、代码效果
- - 1. 运行效果
  - 2. 核心代码
  - 3. 代码说明
- 三、源码直达

一、小编碎碎念

又是一年圣诞节，刚好赶上周末，狠狠的休息了两天。节日过了之后才起来看一下有没有什么活动，还好持续周期比较长，赶上年末，好些活动的时间都重叠在了一起。作为勋章收割机，一看到活动有勋章送，那肯定是不能错过，想来写一个雪花飘落❄️配上圣诞树也是极好的～

二、代码效果

由于使用前端实现，所以代码结构十分简单，参考了一些效果不错的代码，重新修饰了一下，雪中的圣诞树就出现了。

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，这样雪花效果就可以出来了，自定义的网页内容只需要顺次写在后面就可以了。

三、源码直达

仓库地址：https://gitcode.net/u012039040/ChristmasTree

扫描下方二维码，加入CSDN官方粉丝微信群，可以与我直接交流，还有更多福利哦~

圣诞树的雪花飘飘（结尾附源码）