先上效果图
测试环境，jquery-1.11.1，IE11
html部分，只引用jquery和自定义js，<body>标签中为空
自定义js代码
var flakeColor = "#fff";
var newOn=20;//间隔多长时间产生一个雪片
var flake = $("<div></div>").css({"position":"absolute"}).html("❄");
$(function () {
var documentWidth = $(document).width();//获取浏览器的宽度
var documentHeight = $(document).height();//获取浏览器的高度
setInterval(function () {
var startLeft = Math.random()*documentWidth;//雪片一开始的时候距离浏览器的left
var endLeft = Math.random()*documentWidth;//雪片下落后距离浏览器的left
// console.log(documentWidth,Math.random(),startLeft,endLeft)
var flakeSize = 5 + Math.random()*50;//雪片随机的大小
var startOpacity = 0.7 + 0.3*Math.random();//雪片一开始的透明度
var endOpacity = 0.4 + 0.3*Math.random();//雪片下落后的透明度
var durationTime = 4000 + 6000*Math.random();//雪片下落的时间
flake.clone().appendTo($("body")).css({
"left":startLeft,
"color":flakeColor,
"top": "-55px",
"font-size":flakeSize,
"opacity":startOpacity
}).animate({
"left":endLeft,
"top":documentHeight,
"opacity":endOpacity
},durationTime,function () {
$(this).remove();
})
},newOn);
});
css代码
body {
background: #000;
overflow: hidden;
}