记得圣诞节时有不少网站上出现雪花飞舞的特效，看着很唯美，那么我们如果使自己的网站也具备这样的效果呢？
我们可以参考HTML5 canvas制作的3D雪花特效插件nice-Snowing。
使用到的详细js代码我们也分享出来，点击这边下载：立即下载 密码: dtd8
如同网页表面出现下雨特效一样，雪花特效使用不同的canvas来制作不同层次的雪花效果，使整个下雪场景具有明显的3D空间层次感，使下雪效果更加真实。
具体怎么实现？马氪软件总结了两步：
一、头部header引入
<style>
.snow-canvas {
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
pointer-events: none;
}
</style>
二、底部footer引入
<canvas class="snow-canvas" speed="1" interaction="false" size="2" count="80" opacity="0.00001" start-color="rgba(253,252,251,1)" end-color="rgba(251,252,253,0.3)" wind-power="0" image="false" width="1366" height="667"></canvas>
<canvas class="snow-canvas" speed="2" interaction="true" size="6" count="30" start- color="rgba(253,252,251,1)" end-color="rgba(251,252,253,0.3)" opacity="0.00001" wind- power="2" image="false" width="1366" height="667"></canvas>
<canvas class="snow-canvas" speed="3" interaction="true" size="12" count="20" wind- power="-5" image="imgs/snow.png" width="1366" height="666"></canvas>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/snow-plugin.js"></script>
<script>
$(function(){
$(".snow-canvas").snow();
});
</script>
经过这两步，再刷新你的网页就能看到“雪花那个飘”啦，特效比较真实的(而且是自适应网页-响应式)，喜欢就收藏。
无锡做网站也会不定期更新技术类文章，方便更多朋友了解网站设计开发知识，做到心中有数。
本文链接：http://mkapps.cn/news/design/210.html
无锡第二秀网络科技有限公司
- 旗下 : 马氪软件
- 主营业务 : 网站设计开发；微信公众号、小程序开发；APP开发；网络营销推广；广告设计 等
- 联系人 : 徐经理
- 手机 : 18706171959
- 电话 : 0510-85873959
- 邮箱 : b1990g228@qq.com
- 网址 : http://mkapps.cn
