用原生js实现的烟花效果

首先附上css布局 （html的body中仅有一个container，其他是自己后期用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%;
}

以下为烟花效果js代码，布局不同可能会导致差异

class Fire{
        constructor(pos){
            this.cont = document.getElementById("container");
            // 因为传给了new的方法，那么constructor负责接收
            // 接收之后，直接解析到this，方便在后续方法中使用
            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)})`;
    }

注意：上面代码中的move()是之前已经封装好的运动，此时直接引用了，所以还需引入一个外部的运动js文件，在主页中也有总结，这里就不重复了，如果需要可以去翻看参考