想让网站落雪花，一段代码实现雪花飘落效果

在冬季或者圣诞节之类的节日来临时，想让自己的网站增添一个雪花飘落的动态效果，其实很简单，在网页内插入一段代码就可以实现。

第一种：

演示页面：雪花飘落演示1

代码：（中间随机飘落）

    <script src="https://o.xiezhizhe.com/jquery-1.8.0.js"></script>
    <script src="https://o.xiezhizhe.com/snowy.js"></script>
    <style type="text/css">
        .snow-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 100001;
        }
        
        body {
            background-color: #000;
        }
    </style>
    <div class="snow-container"></div>

第二种：

演示页面：雪花飘落演示2

代码：（从左向右飘落）

    <script src="https://o.xiezhizhe.com/jquery-1.8.0.js"></script>
    <script src="https://o.xiezhizhe.com/snowy.js"></script>
    <script src="https://o.xiezhizhe.com/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;}
     body {
            background-color: #000;
        }
</style>
<div class="snow-container"></div>

第三种：

演示页面：雪花飘落演示3

代码：（快速随机飘落）

    <script src="https://o.xiezhizhe.com/jquery-1.8.0.js"></script>
    <script src="https://o.xiezhizhe.com/snowy.js"></script>
    <script src="https://o.xiezhizhe.com/Snows.js"></script>
    <style type="text/css">

    .snow-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100001;}
     body {
            background-color: #000;
        }
</style>
<div class="snow-container"></div>

第四种：

演示页面：实体雪花飘落效果

代码：（这个适用于平安夜，圣诞节背景可改，雪花的密度尺寸均可改，简单好用）

	<script src="https://o.xiezhizhe.com/jquery-1.8.0.js"></script>
	<script src="https://o.xiezhizhe.com/jq.snow.js"></script>
    <!--下面是调用方法和参数说明-->
	<script>
	$(function(){
		$.fn.snow({ 
			minSize: 5,		//雪花的最小尺寸
			maxSize: 40, 	//雪花的最大尺寸
			newOn: 100		//雪花出现的频率 这个数值越小雪花越多
		});
	});
	</script>

使用说明：

因为需要引入jquery库，为了方便大家的使用，代码内已经使用cdn引入了jquery库和所需要的js文件，所以直接复制代码到自己html页面的head标签内就可以实现相应的雪花飘落效果了。