原生js烟花效果

效果图：

直接上代码：

#container{
			width: 80%;
			height: 600px;
			border: 2px solid red;
			background: #000;
			margin:20px auto;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}
		.fire{
			width: 10px;
			height:10px;
			position: absolute;
			bottom: 0;
		}
		.small-fire{
			width: 10px;
			height:10px;
			position: absolute;
			border-radius: 50%;
		}

class Fire{
        constructor(pos){
            this.cont = document.getElementById("container");
            this.x = pos.x;
            this.y = pos.y;
        }
        create(){
            this.f = document.createElement("div");
            this.f.className = "fire";
            this.f.style.background = randomColor();
            this.cont.appendChild(this.f);
            // 位置为鼠标点击的坐标的位置
            this.f.style.left = this.x + "px";
            // 初始信息设置完成后，开始运动
            this.fireMove();
        }
        fireMove(){
            move(this.f,{
                top:this.y
            },()=>{
                this.f.remove();
                var randomNum = random(10,20);
                var r = random(100,200);
                // 根据个数，重复创建小烟花实例
                for(var i=0;i<randomNum;i++){
                    // 创建实例时，需要将：以下信息都传到小烟花的实例中
                        // 大框，坐标，半径，个数，当前烟花的索引
                    var sf = new SmallFire({
                        cont:this.cont,
                        x:this.x,
                        y:this.y,
                        r:r,
                        sum:randomNum,
                        i:i
                    });
                    // 执行创建方法
                    sf.create();
                }
            });
        }
    }
    class SmallFire{
        constructor(obj){
            // 接收并解析：大框，坐标，半径，个数，当前烟花的索引
            this.cont = obj.cont;
            this.x = obj.x;
            this.y = obj.y;
            this.r = obj.r;
            this.sum = obj.sum;
            this.i = obj.i;
        }
        create(){
            // 创建小烟花的元素，设置位置，和样式
            this.f = document.createElement("div");
            this.f.className = "small-fire";
            this.f.style.background = randomColor();
            this.cont.appendChild(this.f);
            this.f.style.left = this.x + "px";
            this.f.style.top = this.y + "px";
            // 小烟花开始运动
            this.smallMove();
        }
        smallMove(){
            move(this.f,{
                left:parseInt(Math.cos( Math.PI/180 * (360/this.sum*this.i) ) * this.r) + this.x,
                top:parseInt(Math.sin( Math.PI/180 * (360/this.sum*this.i) ) * this.r) + this.y
            },()=>{
                this.f.remove();
            });
        }
    }
    var ocont = document.getElementById("container");
    ocont.onclick = function(eve){
        var e = eve || window.event;
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        var f = new Fire({
            x:x,
            y:y
        });
        // 执行创建烟花的方法
        f.create();
    }
	//随机颜色
    function random(a,b){
        return Math.round(Math.random()*(a-b)+b);
    }
    function randomColor(){
        return `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`;
    }

来源：CSDN

作者：漫长的路一人走

链接：https://blog.csdn.net/qq_41548835/article/details/104729434