红包特效

发布于 2021-09-07  321 次阅读

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        
        div{

            position:absolute;
            background-image: url(https:www.zhangchu.fun/img/hongbao.png);
			background-size: 100% 100%;
        }
    </style>
</head>
<body id="body">

</body>
</html>
<script>

    function hongbao(){
        //  创建一个div
		
        var div = document.createElement('div');
        //  设置随机大小的宽度和高度
		var sj=Math.floor(Math.random()*100)
		if(sj<50){
			sj=50
		}
        div.style.width = sj + 'px';
        div.style.height = div.style.width;
		
      
        //  设置div的随机位置
		var wz=Math.floor(Math.random()*1000000)%1060 - 1000;
		
        div.style.top = wz + 'px';
        div.style.left = (Math.floor(Math.random()*1000000)%1240) + 'px';

        //  计时器
        setInterval(function(){
            //  获取当前的位置
             console.log(div.offsetLeft);
             console.log(div.offsetTop);
            div.style.top = div.offsetTop + 5 + 'px';
			div.left=div.offsetLeft + ((Math.floor(Math.random()*1000000)%10)-5);
            div.style.left = div.letf+ 'px';
            if(div.offsetTop > 600){
                div.style.top = (Math.floor(Math.random()*1000000)%1000 - 1200) + 'px';
				
              } 	
		    
		
        },80)
        //  把div插入到body里面
        body.appendChild(div);
    }

    for(i=0;i<8;i++){
        hongbao()
    }


</script>

效果图