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