枫叶飘落

2020-08-10 19:01:32 作者：互联网

<!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>

标签：img,random,innerWidth,rotateY,枫叶,._,飘落,Math
来源： https://www.cnblogs.com/jfq2070/p/13471599.html