用JQ写下雪特效,设置完CSS样式背景颜色去除边距后导入JQ然后引入雪花图片,在定时器函数里setInterval用随机数Math.random()设置图片大小,在用$(window).width()获取屏幕的宽,用屏幕的宽减去图片大小得到随机的left值用css设置图片。然后用屏幕的高度-雪花大小$(window).height()-size得到雪花移动距离,设置一个自定义动画animate加上雪花移动距离top就可以下雪了。代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{background-color: #000000;margin: 0;/* 去掉自带的外边距 */}
img{position: absolute;}
</style>
</head>
<body>
//引入JQ
<script src="JQuery3.6min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//开启定时器添加雪花图片
setInterval(function(){
var img = $("<img src='雪花.png'>");
$("body").append(img);//插入指定内容。
//设置雪花的尺寸20- 40px
//0-20 + 20
var size = parseInt(Math.random())+20;
img.css("width",size+"px");
//得到屏幕宽度
var w = $(window).width();
//取值范围应该是0-屏幕宽度-雪花宽度
var left =parseInt(Math.random()*(w-size));
//把得到的随机1eft给到图片
img.css("left",left+"px");
//添加雪花移动的动画
//得到雪花移动的距离 = 屏幕高度-雪花尺寸
var top = $(window).height()-size;
img.animate({"top":top+"px"},size*100)/* .fadeOut(1000,function(){
//当动画完成时执行此代码
img.remove();
//console.log($("img").length);
}); */
},10)
</script>
</body>
</html>
雪花图片: