javascript实现烟花效果

css部分代码

		**{margin: 0;padding: 0;}
		#container{
				width: 100%;
				height: 1000px;
				cursor: pointer;
				position: relative;
				overflow: hidden;
				background: url(../../day17/代码/img/) repeat fixed center;
			}
			.fire{
				width: 20px;
				height:20px;
				position: absolute;
				bottom: 0;
				border-radius: 50%;
			}
			.small-fire{
				width: 10px;
				height:10px;
				position: absolute;
				border-radius: 50%;
			}*

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22

body部分代码

	*<div ></div>*

• 1

js部分代码

	class Fire{
		constructor(pos){
			 = ("container");
			 = ;
			 = ;
		}
		create(){
			 = ("div");
			 = "fire";
			 = randomColor();
			();
			 =  + "px";
			();
		}
		fireMove(){
			move(,{
				top:
			},()=>{
				();
				var randomNum = random(10,20);
				var r = random(100,300);
				for(var i=0;i<randomNum;i++){
					var sf = new SmallFire({
						cont:,
						x:,
						y:,
						r:r,
						sum:randomNum,
						i:i
					});
					();
				}
			});
		}
	}
	
	class SmallFire{
		constructor(obj) {
			 = ;
			 = ;
			 = ;
			 = ;
			 = ;
			 = ;
		}
		create(){
			 = ("div");
			 = "small-fire";
			 = randomColor();
			();
			 =  + "px";
			 =  + "px";
			();
		}
		
		
    smallMove(){
        move(,{
            left:parseInt(( /180 * (360/*) ) * ) + ,
            top:parseInt(( /180 * (360/*) ) * ) + 
        },()=>{
            ();
        });
    }
}
	
	var ocont = ("container");
	 = function(eve){
		var e = eve || ;
		var x =  - ;
		var y =  - ;
		var f = new Fire({
			x:x,
			y:y
		});
		();
	}
	
	function random(a,b){
		return (()*(a-b)+b);
	}
	function randomColor(){
		return `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`;
	}
	function move(ele,obj,cb){
clearInterval();
 = setInterval(() => {
    var i = true;
    for(var attr in obj){
        if(attr == "opacity"){
            var iNow = getStyle(ele,attr) * 100;
        }else{
            var iNow = parseInt(getStyle(ele,attr));
        }

        let speed = (obj[attr] - iNow)/10;
        speed = speed < 0 ? (speed) : (speed);
        if(iNow !== obj[attr]){
            i = false;
        }
        if(attr == "opacity"){
             = (iNow + speed)/100;
        }else{
            [attr] = iNow + speed + "px";
        }
    }
    if(i){
        clearInterval();
        if(cb){
            cb();
        }
    }
}, 30);
}
function getStyle(ele,attr){
    if(){
    return [attr];
}else{
    return getComputedStyle(ele,false)[attr];
}
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100
• 101
• 102
• 103
• 104
• 105
• 106
• 107
• 108
• 109
• 110
• 111
• 112
• 113
• 114
• 115
• 116
• 117
• 118
• 119
• 120
• 121

实际效果图