/\~~~~~~~~~~~~~\　　　▓　　^*^　　　☆　　$$　 .☆ 
　　./　\~~~▓~　 ~~~~\ ◆　　万圣节 .快乐　 *　 $◢◣$　 * 
　　/ ^^ \ ══════\.◆　　　 *　*　　*　 $◢★◣$　 * 
　..▎[]　▎田　田 ▎ |┃◆　 .　　　　　*　 $◢■■◣$　 * 
　  ▎　　▎　　　 ▎'|'▎ @　　　　　　　* $◢■■■◣$ * 
＃ ■■■■■■■■■■〓▄▃▂▁祝你万圣节快乐︸︸||︸︸

枫叶飘落 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>snow</title>
	<style>
	html,body{
		margin: 0;
		padding: 0;
	}
	body{
		width: 100%;
		height: 100vh;
		overflow:hidden;
	}
		img{
			position: absolute;
			top: 0;
			left: 0;
		transform-style: preserve-3d;

		}
	</style>
</head>
<body>
	
</body>
<script>
	const {innerWidth,innerHeight} = window;
	class Snow{
		constructor(){
			this._img = document.createElement('img');
			this._img.src ="./image/snow.png";
			this._img.width=(Math.random()*20+30);
			this.x = Math.random()*innerWidth;
			this.y = -50;
			this.speedX = (Math.random()*1+1)*(Math.random()>0.5?1:-1);
			this.speedY = Math.random()*1+1;
			this.rotate = 0;
			this.rotateSpeed = (Math.random()*1+1)*(Math.random()>0.5?1:-1);
			this.rotateY = 0;
			this.rotateYSpeed =Math.random()*1+0.3;
			this.bindMove = this.move.bind(this)
			this.bindMove()
		}
		get img(){
			return this._img;
		}
		move(){
			this.x+=this.speedX;
			this.y+=this.speedY;
			this.rotate +=this.rotateSpeed;
			this.rotateY += this.rotateYSpeed;
			this.img.style.transform=`translate(${this.x}px,${this.y}px) rotateZ(${this.rotate}deg) rotateY(${this.rotateY/2}deg) `
			if(this.x>innerWidth||this.x<0 ||this.y>innerHeight){
				this._img.remove()
			}
			requestAnimationFrame(this.bindMove)
		}
	}
	setInterval(()=>{
		for(let i=0;i<6;i++){
			document.body.append(new Snow().img)
		}
	},1000)
</script>
</html>

　　

posted on 2020-08-10 18:59  不认命，就是我的命  阅读(190)  评论(0)    收藏  举报

导航