[摘要]
今天分享一个特别棒的下雪特效，该雪花特效在页面中构建了一个3D雪花场景，在里面制作出非常有层次感的雪花飞舞效果，并且可以通过鼠标和雪花场景进行互动。
过了圣诞迎来元旦，再接着很快就春节了，北方已早下了几场大雪了，一直都想给网站弄个下雪特效。去年圣诞之际雅兮网就部署了下雪特效，不过说实话效果并不是特别理想。详情请看《纯代码为WordPress添加雪花飘落效果》
不理想的原因是下雪特效实现功能代码比较古板，原理就是不断向页面加载雪花图片，控制雪花大小和飘落速度，但整个感觉却不是特别的吸引人。但是下面我分享这个特效，却颠覆了传统的雪花特效，采用JQuery+Html5来实现的超真实3D雪花飞舞特效。
我们先来看一段demo，（当前雅兮网已经部署了该特效，直接查看效果）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>JQuery+Html5实现超真实3D雪花飞舞特效</title>
<style type="text/css"> *{margin:0;padding:0;border: 0;font-family: 'Microsoft Yahei';}
.wrap{width: 1200px;margin: 50px auto;text-align: center;}
.wrap font{font-size: 80px;color: #fff;}
.wrap img{margin-top: 50px;width: 100%;}
</style>
</head>
<body style="background-color: grey;">
<div class="wrap">
<font>雅兮网-yaxi.net</font>
<img src="img.jpg">
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="snow.js"></script>
<style type="text/css">
.snow-container{
position:fixed;
top:0;left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:100001;
}
</style>
<div class="snow-container"></div>
</body>
</html>
怎么样？是不是很特别。实现起来是非常简单的，因为原作者已经高度整合了特效代码，我们只需要将如下代码放入<body>后即可，推荐放在底部，不影响别的内容加载。
<!--3D飘雪花特效 整理by yaxi.net-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="snow.js"></script>
<style type="text/css">
.snow-container{
position:fixed;
top:0;left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:100001;
}
</style>
<div class="snow-container"></div>
上述<style></style>你可以写入样式表，也可以直接丢入页面，看你喜欢。snow.js文件请自行下载，并修改文件路径。本站开启防盗链，直接引用会失效。如果你的页面已经引入了JQuery.js库，那第一段就不需要了。
刷新页面，是不是瞬间有种大雪纷飞的感觉了？
snow.js文件下载地址：
点击下载 密码：9l44
该JQuery插件特效是2015年京东为配合双12年终盛宴活动在活动页面添加的雪花飞舞3D视觉特效。该雪花特效在页面中构建了一个3D雪花场景，在里面制作出非常有层次感的雪花飞舞效果，并且可以通过鼠标和雪花场景进行互动。
喜欢的话就部署到你的网站吧，该特效适合所有web站点，但一定要先载入JQuery库。另外旧版浏览器对H5支持不好，所以此特效仅支持现代浏览器，让IE见鬼去吧！！
本文最后更新于2017年12月28日，已超过 1 年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！
粤公网安备 44040402000065号
放到自己的网站，却获取不了高度。
@哒哒哒： js放到网站，复制了.snow-container的样式。完成。完美
博主，请问那个snow.js应该从哪下载呀？纯小白路过。。。
@白起： 文中更新了文件下载地址，请自行下载
不错，过来点个赞支持一下先！
很有冬天的气氛哦
记得以前搞过一次雪花可以堆积在页面上的效果，几年了，忘记咋弄了，![[晕]](https://www.yaxi.net/wp-content/themes/wing/img/smilies/yun.gif)
@何先生： 那厉害了哦，不过雪花“下”太久，会不会把整改屏幕淹没了![[偷笑]](https://www.yaxi.net/wp-content/themes/wing/img/smilies/tx.gif)
也就冬天，或是冬天节日的时候用用，我就懒得部署了。再则生在南方广西桂林的我，都已经好多年没见咱们这下雪了，假如看到自己的博客雪花纷飞反倒觉得不习惯，呵呵![[呲牙]](https://www.yaxi.net/wp-content/themes/wing/img/smilies/cy.gif)
。
确实挺真实的，看起来效果很不错
我好像昨天在你网站上看到效果了，不错！