html+css+js实现烟花效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body{height:100%;}
.cont{width: 90%;height: 90%;background: black;margin: 0 auto;position: relative;}
.fire{width: 10px;height: 20px;position: absolute;}
.s_fire{width: 10px;height: 10px;border-radius: 50%;position: absolute;}
</style>
</head>
<body>
<div class="cont"></div>
</body>
<script src="./move.js"></script>
<script>
class Fire{
constructor({start,target,origin,cont,className}){
this.start=start;
this.target = target;
this.origin=origin;
this.cont=cont;
this.className=className
this.creatE()
}
creatE(){
this.ele=document.createElement('div')
this.ele.className=this.className
this.cont.appendChild(this.ele)
this.ele.style.background=randomColor()
this.ele.style.left=this.start.x+'px'
this.ele.style.top=this.start.y+'px'
this.move()
}
move(){
move(this.ele,{
left:this.target.x,
top:this.target.y
},()=>{
this.ele.remove();
if(this.origin==0){
this.creatSmall()
}
})
}
creatSmall(){
for(let i=0;i<random(10,20);i++){
new Fire({
start:{
x:this.target.x,
y:this.target.y
},
target:{
x:random(0,this.cont.offsetWidth-10),
y:random(0,this.cont.offsetHeight-10)
},
origin:1,
cont:this.cont,
className:'s_fire'
})
}
}
}
const cont=document.querySelector('.cont')
const contW= cont.offsetWidth
const contY= cont.offsetHeight
document.οnclick=function(){
const startX = random(0,contW-10)
new Fire({
start:{
x:startX,
y:contY
},
target:{
x:startX,
y:random(0,contY-100)
},
origin:0,
cont,
className:'fire'
})
}
function randomColor(){
return `rgb(${random(100,255)},${random(100,255)},${random(100,255)})`;
}
function random(a,b){
return Math.round(Math.random()*(a-b)+b)
}
</script>
</html>