htmlcssjs
<div class="a">1123132123</div>
<div class="img-box"></div>
body{
background: black;
/* overflow: hidden; */
height: 10000px;
}
.img-box{
top: 0;
left: 0;
position: fixed;
z-index: 999;
}
img{
position: absolute;
}
.a{
width: 100px;
height: 100px;
background: aquamarine;
}
setInterval(function(){
//创建雪花图片
const snow = $('<img src="../img/snow.png">');
//得到窗口的宽高
const width = document.documentElement.clientWidth;
const height = document.documentElement.clientHeight;
//设置随机雪花宽高0-14
const size = Math.floor(Math.random()*5+12)+'px';
//设置随机的横向位置
const left = Math.floor(Math.random()*width)+'px';
//设置css样式
snow.css({'width':size,'height':size,'left':left,'top':0});
//添加到body中
$('.img-box').append(snow);
//让图片移动到窗口最下面
const time = Math.floor(Math.random()*5000)+3000;
//让图片落下后过一段时间消失
snow.animate({'top':(height-parseInt(size))+'px'},time).fadeOut(1000,function(){$(this).remove()});
},100);
Comments | NOTHING