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

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

第一种:

演示页面:雪花飘落演示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标签内就可以实现相应的雪花飘落效果了。

给TA打赏
共{{data.count}}人
人已打赏
共享资源

HTML+JS制作一个简单的3D仿真圣诞树和纯HTML和CSS制作的圣诞树

2021-12-16 12:26:37

共享资源

8个阿里巴巴出品的实用在线工具,皆是良心神器!

2021-12-18 15:47:35

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧