分享两种下雪特效:

第一种

<script type="text/javascript">
(function($){
    $.fn.snow = function(options){
    var $flake = $('</p>
<p>
</p>
<p>
</p>
<p>
</p>
<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('❄'),
    documentHeight     = $(document).height(),
    documentWidth    = $(document).width(),
    defaults = {
        minSize        : 10,
        maxSize        : 20,
        newOn        : 1000,
        flakeColor    : "#AFDAEF" /* 此处能够定义雪花颜色，若要白色能够改成#FFFFFF */
    },
    options    = $.extend({}, defaults, options);
    var interval= setInterval( function(){
    var startPositionLeft = Math.random() * documentWidth - 100,
    startOpacity = 0.5 + Math.random(),
    sizeFlake = options.minSize + Math.random() * options.maxSize,
    endPositionTop = documentHeight - 200,
    endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
    durationFall = documentHeight * 10 + Math.random() * 5000;
    $flake.clone().appendTo('body').css({
        left: startPositionLeft,
        opacity: startOpacity,
        'font-size': sizeFlake,
        color: options.flakeColor
    }).animate({
        top: endPositionTop,
        left: endPositionLeft,
        opacity: 0.2
    },durationFall,'linear',function(){
        $(this).remove()
    });
    }, options.newOn);
    };
})(jQuery);
$(function(){
    $.fn.snow({ 
        minSize: 5, /* 定义雪花最小尺寸 */
        maxSize: 50,/* 定义雪花最大尺寸 */
        newOn: 300  /* 定义密集程度，数字越小越密集 */
    });
});
</script>

第二种
<script type = "text/javascript">
/* 控制下雪 */
功能降雪 (雪) {
/* 可配置属性 */
雪 = 雪 | | {}；
此.maxFlake = snow.maxFlake | | 200; /* 最多片数 */
这.Flaketize = 雪.Flaketize | | 10; /* 雪花形状 */
此。下降速度 = 雪。下降速度 | | 1; /* 坠落速度 */
}
/* 兼容写法 */
requestAnimationFrame = window.requestAnimationFrame | |
window.mo zRequestAnimationFrame | |
window.webkitRequestAnimationFrame | |
window.msRequestAnimationFrame | |
window.oRequestAnimationFrame | |
函数 (callback) { setTimeout(callback，1000 / 60); }；

cancelAnimationFrame = window.ca ncelAnimationFrame | |
window.mo zCancelAnimationFrame | |
window.webkitCancelAnimationFrame | |
window.msCancelAnimationFrame | |
窗口。oCancelAnimationFrame；
/* 开始下雪 */
snowFall.prototype.start = function(){
/* 建立画布 */
snowCanvas.apply (此)；
/* 建立雪花形状 */
应用 (本)；
/* 画雪 */
drawSnow.apply (本)
}
/* 建立画布 */
函数snowCanvas() {
/* 添加Dom结点 */
var snowcanvas = document.createElement("canvas");
snowcanvas.id = "降雪"；
snowcanvas.width = window.innerWidth;
snowcanvas.height = document.body.clientHeight;
snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");
document.getElementsByTagName("body")[0].appendChild(snowcanvas);
this.ca nvas = snowcanvas；
此 = snowcanvas.getContext (“2d”)；
/* 窗口大小改变的处理 */
window.onresize = function() {
snowcanvas.width = window.innerWidth;
/* snowcanvas.height = window.innerHeight */
}
}
/* 雪运动对象 */
函数flakeMove(canvasWidth，canvasHeight，flakexize，fallSpeed) {
此 = Math.floor(Math.random() * canvasWidth); /* 坐标 */
此 = Math.floor(Math.random() * canvasHeight); /* y坐标 */
此 = Math.random() * flakesize + 2; /* 形状 */
此.maxSize = flakepize; /* 最大形状 */
此.speed = Math.random() * 1 + fallSpeed; /* 坠落速度 */
此.fallSpeed = fallSpeed; /* 坠落速度 */
此 = 此速度; /* Y方向速度 */
此velX = 0; /* X方向速度 */
此.stepSize = Math.random() / 30; /* 步长 */
此步长 = 0 /* 步数 */
}
flakeMove.prototype.update = function() {
变量x = 此，
y = 这个。y；
/* 左右摆动(余弦) */
这velX * = 0.98；
if (此.velY <= 此.speed) {
这。velY = 这。速度
}
这个.velX + = Math.cos (这个.step + = .05) * 这个.stepSize；

这个.y + = 这个.velY；
这个x + = 这个velX；
/* 飞出边界的处理 */
if (this.x >= canvas.width | | this.x <= 0 | | this.y >= canvas.height | | this.y <= 0) {
此.reset(canvas.width，canvas.height)
}
};
/* 飞出边界-放置最顶端继续坠落 */
flakeMove.prototype.reset = 函数 (宽度，高度) {
this.x = Math.floor(Math.random() * width);
这。y = 0；
此 = Math.random() * 此.maxSize + 2；
此速度 = Math.random() * 1 + 此.fallSpeed；
这个.Ely = 这个.速度；
这velX = 0；
};
// 渲染雪花随机形状(此处可修改雪花颜色!)
flakeMove.prototype.render = 函数 (ctx) {
var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
snowFlake.addColorStop(0，"rgba(255，255，255，0.9)"); /* 此处是雪花颜色，默认是白色 */
snowFlake.addColorStop(.5，"rgba(255，255，255，0.5)"); /* 若要改成其余颜色，请自行查 */
snowFlake.addColorStop(1，"rgba(255，255，255，0)"); /* 找16进制的RGB颜色代码。 */
ctx.save();
ctx.fillStyle = 雪花；
ctx.beginPath();
ctx.arc (此.x，此.y，此.size，0，Math.PI * 2)；
ctx.fill();
ctx.restore();
};
/* 建立雪花-定义形状 */
函数createFlakes() {
var maxFlake = 此.maxFlake，
flakes = this.flakes = [],
画布 = this.ca nva；
for (var i = 0; i < maxFlake; i ++) {
flakes.push(new flakeMove(canvas.width，canvas.height，此.Flakesize，此.fallSpeed))
}
}
/* 画雪 */
函数雪花 () {
var maxFlake = 此.maxFlake，
薄片 = 这个。薄片；
ctx = 这个。ctx，canvas = this.ca nvas，那 = 这个；
/* 清空雪花 */
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var e = 0; e < maxFlake; e ++) {
薄片 [e].更新 ()；
薄片 [e].渲染 (ctx)；
}
/* 一帧一帧的画 */
此循环 = requestAnimationFrame(function() {
drawSnow.apply (那个)；
});
}
/* 调用及控制方法 */
var snow = 新降雪量 ({maxFlake:500})；
snow.start();
</script>
因站点不允许复制，你可以前往'♪(^ ∇ ^ *)欢迎肥来!网页js实现下雪雪花特效 | 唐晓萌的小站'下载
@ 小林酱
点击导航站预览一下效果