新年将至，100行Html+css实现烟花特效陪你跨年（附春节对联）

悠悠 2023-10-05 22:07 15阅读 0赞

#### 文章目录 ####

*   *   *   *  加特林版烟花
             *  漫天飞雨烟花
             *  花好月圆烟花
             *  心动一刹烟花
             *  春节对联

##### 加特林版烟花 #####

![3b4c784f024d4391abbc08deef09ea7d.gif][]  
`特点`

> 根据鼠标点击的速度出现烟花，像加特林一样哒哒哒，希望朋友们在2022年能够像加特林一样疯狂输出，打败所有的不甘与平凡，向着自己的梦想努力前进着

`html代码`

<!DOCTYPE html>
    <html>
    <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>html5鼠标点击页面放烟花特效</title>
    
    <style>
    html,body{
          height:100%;margin:0;padding:0}
    ul,li{
          text-indent:0;text-decoration:none;margin:0;padding:0}
    img{
          border:0}
    body{
          background-color:#000;color:#999;font:100%/18px helvetica, arial, sans-serif}
    canvas{
          cursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20}
    </style>
    
    </head>
    <body>
    
    <script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
    <script type="text/javascript">
    $(function(){
          
    var Fireworks = function(){
          
    var self = this;
    var rand = function(rMi, rMa){
          return ~~((Math.random()*(rMa-rMi+1))+rMi);}
    var hitTest = function(x1, y1, w1, h1, x2, y2, w2, h2){
          return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);};
    window.requestAnimFrame=function(){
          return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){
          window.setTimeout(a,1E3/60)}}();
    
    self.init = function(){
           
    self.canvas = document.createElement('canvas');             
    self.canvas.width = self.cw = $(window).innerWidth();
    self.canvas.height = self.ch = $(window).innerHeight();         
    self.particles = [];    
    self.partCount = 150;
    self.fireworks = [];    
    self.mx = self.cw/2;
    self.my = self.ch/2;
    self.currentHue = 30;
    self.partSpeed = 5;
    self.partSpeedVariance = 10;
    self.partWind = 50;
    self.partFriction = 5;
    self.partGravity = 1;
    self.hueMin = 0;
    self.hueMax = 360;
    self.fworkSpeed = 4;
    self.fworkAccel = 10;
    self.hueVariance = 30;
    self.flickerDensity = 25;
    self.showShockwave = true;
    self.showTarget = false;
    self.clearAlpha = 25;
    
    $(document.body).append(self.canvas);
    self.ctx = self.canvas.getContext('2d');
    self.ctx.lineCap = 'round';
    self.ctx.lineJoin = 'round';
    self.lineWidth = 1;
    self.bindEvents();          
    self.canvasLoop();
    
    self.canvas.onselectstart = function() {
          
    return false;
    };
    };      
    
    self.createParticles = function(x,y, hue){
          
    var countdown = self.partCount;
    while(countdown--){
          
    var newParticle = {
          
        x: x,
        y: y,
        coordLast: [
            {
          x: x, y: y},
            {
          x: x, y: y},
            {
          x: x, y: y}
        ],
        angle: rand(0, 360),
        speed: rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeed + self.partSpeedVariance)),
        friction: 1 - self.partFriction/100,
        gravity: self.partGravity/2,
        hue: rand(hue-self.hueVariance, hue+self.hueVariance),
        brightness: rand(50, 80),
        alpha: rand(40,100)/100,
        decay: rand(10, 50)/1000,
        wind: (rand(0, self.partWind) - (self.partWind/2))/25,
        lineWidth: self.lineWidth
    };              
    self.particles.push(newParticle);
    }
    };
    
    
    self.updateParticles = function(){
          
    var i = self.particles.length;
    while(i--){
          
    var p = self.particles[i];
    var radians = p.angle * Math.PI / 180;
    var vx = Math.cos(radians) * p.speed;
    var vy = Math.sin(radians) * p.speed;
    p.speed *= p.friction;
                    
    p.coordLast[2].x = p.coordLast[1].x;
    p.coordLast[2].y = p.coordLast[1].y;
    p.coordLast[1].x = p.coordLast[0].x;
    p.coordLast[1].y = p.coordLast[0].y;
    p.coordLast[0].x = p.x;
    p.coordLast[0].y = p.y;
    
    p.x += vx;
    p.y += vy;
    p.y += p.gravity;
    
    p.angle += p.wind;              
    p.alpha -= p.decay;
    
    if(!hitTest(0,0,self.cw,self.ch,p.x-p.radius, p.y-p.radius, p.radius*2, p.radius*2) || p.alpha < .05){
                            
        self.particles.splice(i, 1);    
    }
    };
    };
    
    self.drawParticles = function(){
          
    var i = self.particles.length;
    while(i--){
          
    var p = self.particles[i];                          
    
    var coordRand = (rand(1,3)-1);
    self.ctx.beginPath();                               
    self.ctx.moveTo(Math.round(p.coordLast[coordRand].x), Math.round(p.coordLast[coordRand].y));
    self.ctx.lineTo(Math.round(p.x), Math.round(p.y));
    self.ctx.closePath();               
    self.ctx.strokeStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+p.alpha+')';
    self.ctx.stroke();              
    
    if(self.flickerDensity > 0){
          
        var inverseDensity = 50 - self.flickerDensity;                  
        if(rand(0, inverseDensity) === inverseDensity){
          
            self.ctx.beginPath();
            self.ctx.arc(Math.round(p.x), Math.round(p.y), rand(p.lineWidth,p.lineWidth+3)/2, 0, Math.PI*2, false)
            self.ctx.closePath();
            var randAlpha = rand(50,100)/100;
            self.ctx.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+randAlpha+')';
            self.ctx.fill();
        }   
    }
    };
    };
    
    
    self.createFireworks = function(startX, startY, targetX, targetY){
          
    var newFirework = {
          
    x: startX,
    y: startY,
    startX: startX,
    startY: startY,
    hitX: false,
    hitY: false,
    coordLast: [
        {
          x: startX, y: startY},
        {
          x: startX, y: startY},
        {
          x: startX, y: startY}
    ],
    targetX: targetX,
    targetY: targetY,
    speed: self.fworkSpeed,
    angle: Math.atan2(targetY - startY, targetX - startX),
    shockwaveAngle: Math.atan2(targetY - startY, targetX - startX)+(90*(Math.PI/180)),
    acceleration: self.fworkAccel/100,
    hue: self.currentHue,
    brightness: rand(50, 80),
    alpha: rand(50,100)/100,
    lineWidth: self.lineWidth
    };          
    self.fireworks.push(newFirework);
    
    };
    
    
    self.updateFireworks = function(){
          
    var i = self.fireworks.length;
    
    while(i--){
          
    var f = self.fireworks[i];
    self.ctx.lineWidth = f.lineWidth;
    
    vx = Math.cos(f.angle) * f.speed,
    vy = Math.sin(f.angle) * f.speed;
    f.speed *= 1 + f.acceleration;              
    f.coordLast[2].x = f.coordLast[1].x;
    f.coordLast[2].y = f.coordLast[1].y;
    f.coordLast[1].x = f.coordLast[0].x;
    f.coordLast[1].y = f.coordLast[0].y;
    f.coordLast[0].x = f.x;
    f.coordLast[0].y = f.y;
    
    if(f.startX >= f.targetX){
          
        if(f.x + vx <= f.targetX){
          
            f.x = f.targetX;
            f.hitX = true;
        } else {
          
            f.x += vx;
        }
    } else {
          
        if(f.x + vx >= f.targetX){
          
            f.x = f.targetX;
            f.hitX = true;
        } else {
          
            f.x += vx;
        }
    }
    
    if(f.startY >= f.targetY){
          
        if(f.y + vy <= f.targetY){
          
            f.y = f.targetY;
            f.hitY = true;
        } else {
          
            f.y += vy;
        }
    } else {
          
        if(f.y + vy >= f.targetY){
          
            f.y = f.targetY;
            f.hitY = true;
        } else {
          
            f.y += vy;
        }
    }               
    
    if(f.hitX && f.hitY){
          
        self.createParticles(f.targetX, f.targetY, f.hue);
        self.fireworks.splice(i, 1);
        
    }
    };
    };
    
    self.drawFireworks = function(){
          
    var i = self.fireworks.length;
    self.ctx.globalCompositeOperation = 'lighter';
    while(i--){
          
    var f = self.fireworks[i];      
    self.ctx.lineWidth = f.lineWidth;
    
    var coordRand = (rand(1,3)-1);                  
    self.ctx.beginPath();                           
    self.ctx.moveTo(Math.round(f.coordLast[coordRand].x), Math.round(f.coordLast[coordRand].y));
    self.ctx.lineTo(Math.round(f.x), Math.round(f.y));
    self.ctx.closePath();
    self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+f.alpha+')';
    self.ctx.stroke();  
    
    if(self.showTarget){
          
        self.ctx.save();
        self.ctx.beginPath();
        self.ctx.arc(Math.round(f.targetX), Math.round(f.targetY), rand(1,8), 0, Math.PI*2, false)
        self.ctx.closePath();
        self.ctx.lineWidth = 1;
        self.ctx.stroke();
        self.ctx.restore();
    }
        
    if(self.showShockwave){
          
        self.ctx.save();
        self.ctx.translate(Math.round(f.x), Math.round(f.y));
        self.ctx.rotate(f.shockwaveAngle);
        self.ctx.beginPath();
        self.ctx.arc(0, 0, 1*(f.speed/5), 0, Math.PI, true);
        self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+rand(25, 60)/100+')';
        self.ctx.lineWidth = f.lineWidth;
        self.ctx.stroke();
        self.ctx.restore();
    }
    };
    };
    
    self.bindEvents = function(){
          
    $(window).on('resize', function(){
                    
    clearTimeout(self.timeout);
    self.timeout = setTimeout(function() {
          
        self.canvas.width = self.cw = $(window).innerWidth();
        self.canvas.height = self.ch = $(window).innerHeight();
        self.ctx.lineCap = 'round';
        self.ctx.lineJoin = 'round';
    }, 100);
    });
    
    $(self.canvas).on('mousedown', function(e){
          
    self.mx = e.pageX - self.canvas.offsetLeft;
    self.my = e.pageY - self.canvas.offsetTop;
    self.currentHue = rand(self.hueMin, self.hueMax);
    self.createFireworks(self.cw/2, self.ch, self.mx, self.my); 
    
    $(self.canvas).on('mousemove.fireworks', function(e){
          
        self.mx = e.pageX - self.canvas.offsetLeft;
        self.my = e.pageY - self.canvas.offsetTop;
        self.currentHue = rand(self.hueMin, self.hueMax);
        self.createFireworks(self.cw/2, self.ch, self.mx, self.my);                                 
    });             
    });
    
    $(self.canvas).on('mouseup', function(e){
          
    $(self.canvas).off('mousemove.fireworks');                                  
    });
            
    }
    
    self.clear = function(){
          
    self.particles = [];
    self.fireworks = [];
    self.ctx.clearRect(0, 0, self.cw, self.ch);
    };
    
    
    self.canvasLoop = function(){
          
    requestAnimFrame(self.canvasLoop, self.canvas);         
    self.ctx.globalCompositeOperation = 'destination-out';
    self.ctx.fillStyle = 'rgba(0,0,0,'+self.clearAlpha/100+')';
    self.ctx.fillRect(0,0,self.cw,self.ch);
    self.updateFireworks();
    self.updateParticles();
    self.drawFireworks();           
    self.drawParticles();
    
    };
    
    self.init();        
    
    }
    var fworks = new Fireworks();
    
    });
    
    </script>
    
    </body>
    </html>

##### 漫天飞雨烟花 #####

![f8d60aa49bbf4e2b979547d6ba1acc20.gif][]  
`特点`

> 根据鼠标的速度和点击会绽放出烟花，为何叫漫天飞雨呢，因为这个特效特别像“霞”的R技能，希望朋友们在这个不平凡的一年能够躲避所有不好的事情，也能够克服各种困难，像霞一样释放大招，征服生活，漫天飞雨。

`HTML代码`

<!DOCTYPE html>
    <html dir="ltr" lang="zh-CN">
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>带交互功能的HTML5+JS烟花特效</title> 
    <style>
    /* basic styles for black background and crosshair cursor */
    body {
          
    	background: #000;
    	margin: 0;
    }
    
    canvas {
          
    	cursor: crosshair;
    	display: block;
    }
    </style>
    </head>
    <canvas id="canvas">Canvas is not supported in your browser.</canvas>
    <script>
    // when animating on canvas, it is best to use requestAnimationFrame instead of setTimeout or setInterval
    // not supported in all browsers though and sometimes needs a prefix, so we need a shim
    window.requestAnimFrame = ( function() {
          
    	return window.requestAnimationFrame ||
    				window.webkitRequestAnimationFrame ||
    				window.mozRequestAnimationFrame ||
    				function( callback ) {
          
    					window.setTimeout( callback, 1000 / 60 );
    				};
    })();
    
    // now we will setup our basic variables for the demo
    var canvas = document.getElementById( 'canvas' ),
    		ctx = canvas.getContext( '2d' ),
    		// full screen dimensions
    		cw = window.innerWidth,
    		ch = window.innerHeight,
    		// firework collection
    		fireworks = [],
    		// particle collection
    		particles = [],
    		// starting hue
    		hue = 120,
    		// when launching fireworks with a click, too many get launched at once without a limiter, one launch per 5 loop ticks
    		limiterTotal = 5,
    		limiterTick = 0,
    		// this will time the auto launches of fireworks, one launch per 80 loop ticks
    		timerTotal = 80,
    		timerTick = 0,
    		mousedown = false,
    		// mouse x coordinate,
    		mx,
    		// mouse y coordinate
    		my;
    		
    // set canvas dimensions
    canvas.width = cw;
    canvas.height = ch;
    
    // now we are going to setup our function placeholders for the entire demo
    
    // get a random number within a range
    function random( min, max ) {
          
    	return Math.random() * ( max - min ) + min;
    }
    
    // calculate the distance between two points
    function calculateDistance( p1x, p1y, p2x, p2y ) {
          
    	var xDistance = p1x - p2x,
    			yDistance = p1y - p2y;
    	return Math.sqrt( Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 ) );
    }
    
    // create firework
    function Firework( sx, sy, tx, ty ) {
          
    	// actual coordinates
    	this.x = sx;
    	this.y = sy;
    	// starting coordinates
    	this.sx = sx;
    	this.sy = sy;
    	// target coordinates
    	this.tx = tx;
    	this.ty = ty;
    	// distance from starting point to target
    	this.distanceToTarget = calculateDistance( sx, sy, tx, ty );
    	this.distanceTraveled = 0;
    	// track the past coordinates of each firework to create a trail effect, increase the coordinate count to create more prominent trails
    	this.coordinates = [];
    	this.coordinateCount = 3;
    	// populate initial coordinate collection with the current coordinates
    	while( this.coordinateCount-- ) {
          
    		this.coordinates.push( [ this.x, this.y ] );
    	}
    	this.angle = Math.atan2( ty - sy, tx - sx );
    	this.speed = 2;
    	this.acceleration = 1.05;
    	this.brightness = random( 50, 70 );
    	// circle target indicator radius
    	this.targetRadius = 1;
    }
    
    // update firework
    Firework.prototype.update = function( index ) {
          
    	// remove last item in coordinates array
    	this.coordinates.pop();
    	// add current coordinates to the start of the array
    	this.coordinates.unshift( [ this.x, this.y ] );
    	
    	// cycle the circle target indicator radius
    	if( this.targetRadius < 8 ) {
          
    		this.targetRadius += 0.3;
    	} else {
          
    		this.targetRadius = 1;
    	}
    	
    	// speed up the firework
    	this.speed *= this.acceleration;
    	
    	// get the current velocities based on angle and speed
    	var vx = Math.cos( this.angle ) * this.speed,
    			vy = Math.sin( this.angle ) * this.speed;
    	// how far will the firework have traveled with velocities applied?
    	this.distanceTraveled = calculateDistance( this.sx, this.sy, this.x + vx, this.y + vy );
    	
    	// if the distance traveled, including velocities, is greater than the initial distance to the target, then the target has been reached
    	if( this.distanceTraveled >= this.distanceToTarget ) {
          
    		createParticles( this.tx, this.ty );
    		// remove the firework, use the index passed into the update function to determine which to remove
    		fireworks.splice( index, 1 );
    	} else {
          
    		// target not reached, keep traveling
    		this.x += vx;
    		this.y += vy;
    	}
    }
    
    // draw firework
    Firework.prototype.draw = function() {
          
    	ctx.beginPath();
    	// move to the last tracked coordinate in the set, then draw a line to the current x and y
    	ctx.moveTo( this.coordinates[ this.coordinates.length - 1][ 0 ], this.coordinates[ this.coordinates.length - 1][ 1 ] );
    	ctx.lineTo( this.x, this.y );
    	ctx.strokeStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';
    	ctx.stroke();
    	
    	ctx.beginPath();
    	// draw the target for this firework with a pulsing circle
    	ctx.arc( this.tx, this.ty, this.targetRadius, 0, Math.PI * 2 );
    	ctx.stroke();
    }
    
    // create particle
    function Particle( x, y ) {
          
    	this.x = x;
    	this.y = y;
    	// track the past coordinates of each particle to create a trail effect, increase the coordinate count to create more prominent trails
    	this.coordinates = [];
    	this.coordinateCount = 5;
    	while( this.coordinateCount-- ) {
          
    		this.coordinates.push( [ this.x, this.y ] );
    	}
    	// set a random angle in all possible directions, in radians
    	this.angle = random( 0, Math.PI * 2 );
    	this.speed = random( 1, 10 );
    	// friction will slow the particle down
    	this.friction = 0.95;
    	// gravity will be applied and pull the particle down
    	this.gravity = 1;
    	// set the hue to a random number +-20 of the overall hue variable
    	this.hue = random( hue - 20, hue + 20 );
    	this.brightness = random( 50, 80 );
    	this.alpha = 1;
    	// set how fast the particle fades out
    	this.decay = random( 0.015, 0.03 );
    }
    
    // update particle
    Particle.prototype.update = function( index ) {
          
    	// remove last item in coordinates array
    	this.coordinates.pop();
    	// add current coordinates to the start of the array
    	this.coordinates.unshift( [ this.x, this.y ] );
    	// slow down the particle
    	this.speed *= this.friction;
    	// apply velocity
    	this.x += Math.cos( this.angle ) * this.speed;
    	this.y += Math.sin( this.angle ) * this.speed + this.gravity;
    	// fade out the particle
    	this.alpha -= this.decay;
    	
    	// remove the particle once the alpha is low enough, based on the passed in index
    	if( this.alpha <= this.decay ) {
          
    		particles.splice( index, 1 );
    	}
    }
    
    // draw particle
    Particle.prototype.draw = function() {
          
    	ctx. beginPath();
    	// move to the last tracked coordinates in the set, then draw a line to the current x and y
    	ctx.moveTo( this.coordinates[ this.coordinates.length - 1 ][ 0 ], this.coordinates[ this.coordinates.length - 1 ][ 1 ] );
    	ctx.lineTo( this.x, this.y );
    	ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')';
    	ctx.stroke();
    }
    
    // create particle group/explosion
    function createParticles( x, y ) {
          
    	// increase the particle count for a bigger explosion, beware of the canvas performance hit with the increased particles though
    	var particleCount = 30;
    	while( particleCount-- ) {
          
    		particles.push( new Particle( x, y ) );
    	}
    }
    
    // main demo loop
    function loop() {
          
    	// this function will run endlessly with requestAnimationFrame
    	requestAnimFrame( loop );
    	
    	// increase the hue to get different colored fireworks over time
    	hue += 0.5;
    	
    	// normally, clearRect() would be used to clear the canvas
    	// we want to create a trailing effect though
    	// setting the composite operation to destination-out will allow us to clear the canvas at a specific opacity, rather than wiping it entirely
    	ctx.globalCompositeOperation = 'destination-out';
    	// decrease the alpha property to create more prominent trails
    	ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
    	ctx.fillRect( 0, 0, cw, ch );
    	// change the composite operation back to our main mode
    	// lighter creates bright highlight points as the fireworks and particles overlap each other
    	ctx.globalCompositeOperation = 'lighter';
    	
    	// loop over each firework, draw it, update it
    	var i = fireworks.length;
    	while( i-- ) {
          
    		fireworks[ i ].draw();
    		fireworks[ i ].update( i );
    	}
    	
    	// loop over each particle, draw it, update it
    	var i = particles.length;
    	while( i-- ) {
          
    		particles[ i ].draw();
    		particles[ i ].update( i );
    	}
    	
    	// launch fireworks automatically to random coordinates, when the mouse isn't down
    	if( timerTick >= timerTotal ) {
          
    		if( !mousedown ) {
          
    			// start the firework at the bottom middle of the screen, then set the random target coordinates, the random y coordinates will be set within the range of the top half of the screen
    			fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) );
    			timerTick = 0;
    		}
    	} else {
          
    		timerTick++;
    	}
    	
    	// limit the rate at which fireworks get launched when mouse is down
    	if( limiterTick >= limiterTotal ) {
          
    		if( mousedown ) {
          
    			// start the firework at the bottom middle of the screen, then set the current mouse coordinates as the target
    			fireworks.push( new Firework( cw / 2, ch, mx, my ) );
    			limiterTick = 0;
    		}
    	} else {
          
    		limiterTick++;
    	}
    }
    
    // mouse event bindings
    // update the mouse coordinates on mousemove
    canvas.addEventListener( 'mousemove', function( e ) {
          
    	mx = e.pageX - canvas.offsetLeft;
    	my = e.pageY - canvas.offsetTop;
    });
    
    // toggle mousedown state and prevent canvas from being selected
    canvas.addEventListener( 'mousedown', function( e ) {
          
    	e.preventDefault();
    	mousedown = true;
    });
    
    canvas.addEventListener( 'mouseup', function( e ) {
          
    	e.preventDefault();
    	mousedown = false;
    });
    
    // once the window loads, we are ready for some fireworks!
    window.onload = loop;
    </script>

##### 花好月圆烟花 #####

![51ea3fda21814410a198d0619e73ba26.gif][]  
`特点`

> 根据鼠标的点击和移动会绽放烟花，在这个花好月圆之夜，你想到了什么？哈哈哈，是不是特别美好，希望小伙伴们在新的一年能够找到心爱的人吧，也希望有情人终成眷属，争取努努力，为我们代码届在增添一位小小程序猿。

`html代码`

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
    	<style>
    		body{
          margin:0;padding:0;overflow: hidden;}
    		.city{
          width:100%;position:fixed;bottom: 0px;z-index: 100;}
    		.city img{
          width: 100%;}
    	</style>
    	<title>html5夜景放烟花绽放动画效果</title>
    </head>
    <body onselectstart = "return false">
    
    <div style="height:700px;overflow:hidden;">
    
    	<canvas id='cas' style="background-color:rgba(0,5,24,1);">浏览器不支持canvas</canvas>
    	<div class="city"><img src="img/city.png" alt="" /></div>
    	<img src="img/moon.png" alt="" id="moon" style="visibility: hidden;"/>
    	<div style="display:none">
    		<div class="shape">新年快乐</div>
    		<div class="shape">合家幸福</div>
            <div class="shape">万事如意</div>
            <div class="shape">心想事成</div>
            <div class="shape">财源广进</div>
    	</div>
    	
    </div>
    	
    	<script>
    		var canvas = document.getElementById("cas");
    		var ocas = document.createElement("canvas");
    		var octx = ocas.getContext("2d");
    		var ctx = canvas.getContext("2d");
    		ocas.width = canvas.width = window.innerWidth;
    		ocas.height = canvas.height = 700;
    		var bigbooms = [];
    	
    		window.onload = function(){
          
    			initAnimate()
    		}
    
    		function initAnimate(){
          
    			drawBg();
    
    			lastTime = new Date();
    			animate();
    		}
    
    		var lastTime;
    		function animate(){
          
    			ctx.save();
    			ctx.fillStyle = "rgba(0,5,24,0.1)";
    			ctx.fillRect(0,0,canvas.width,canvas.height);
    			ctx.restore();
    
    
    			var newTime = new Date();
                if(newTime-lastTime>500+(window.innerHeight-767)/2){
          
    				var random = Math.random()*100>2?true:false;
    				var x = getRandom(canvas.width/5 , canvas.width*4/5);
    				var y = getRandom(50 , 200);
    				if(random){
          
    					var bigboom = new Boom(getRandom(canvas.width/3,canvas.width*2/3) ,2,"#FFF" , {
          x:x , y:y});
    					bigbooms.push(bigboom)
    				}
    				else {
          
    					var bigboom = new Boom(getRandom(canvas.width/3,canvas.width*2/3) ,2,"#FFF" , {
          x:canvas.width/2 , y:200} , document.querySelectorAll(".shape")[parseInt(getRandom(0, document.querySelectorAll(".shape").length))]);
    					bigbooms.push(bigboom)
    				}
    				lastTime = newTime;
    				console.log(bigbooms)
    			}
    
    			stars.foreach(function(){
          
    				this.paint();
    			})
    
    			drawMoon();
    
    			bigbooms.foreach(function(index){
          
    				var that = this;
    				if(!this.dead){
          
    					this._move();
    					this._drawLight();
    				}
    				else{
          
    					this.booms.foreach(function(index){
          
    						if(!this.dead) {
          
    							this.moveTo(index);
    						}
    						else if(index === that.booms.length-1){
          
    							bigbooms[bigbooms.indexOf(that)] = null;
    						}
    					})
    				}
    			});
    			
    			raf(animate);
    		}
    
    		function drawMoon(){
          
    			var moon = document.getElementById("moon");
    			var centerX = canvas.width-200 , centerY = 100 , width = 80;
    			if(moon.complete){
          
    				ctx.drawImage(moon , centerX , centerY , width , width )
    			}
    			else {
          
    				moon.onload = function(){
          
    					ctx.drawImage(moon ,centerX , centerY , width , width)
    				}
    			}
    			var index = 0;
    			for(var i=0;i<10;i++){
          
    				ctx.save();
    				ctx.beginPath();
    				ctx.arc(centerX+width/2 , centerY+width/2 , width/2+index , 0 , 2*Math.PI);
    				ctx.fillStyle="rgba(240,219,120,0.005)";
    				index+=2;
    				ctx.fill();
    				ctx.restore();
    			}
    			
    		}
    
    		Array.prototype.foreach = function(callback){
          
    			for(var i=0;i<this.length;i++){
          
    				if(this[i]!==null) callback.apply(this[i] , [i])
    			}
    		}
    
    		var raf = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
           window.setTimeout(callback, 1000 / 60); };
     		
    		canvas.onclick = function(){
          
    			var x = event.clientX;
    			var y = event.clientY;
    			var bigboom = new Boom(getRandom(canvas.width/3,canvas.width*2/3) ,2,"#FFF" , {
          x:x , y:y});
    			bigbooms.push(bigboom)
    		}
    
    		// canvas.addEventLisener("touchstart" , function(event){
          
    		// 	var touch = event.targetTouches[0];
    		// 	var x = event.pageX;
    		// 	var y = event.pageY;
    		// 	var bigboom = new Boom(getRandom(canvas.width/3,canvas.width*2/3) ,2,"#FFF" , {x:x , y:y});
    		// 	bigbooms.push(bigboom)
    		// })
    
    		var Boom = function(x,r,c,boomArea,shape){
          
    			this.booms = [];
    			this.x = x;
    			this.y = (canvas.height+r);
    			this.r = r;
    			this.c = c;
    			this.shape = shape || false;
    			this.boomArea = boomArea;
    			this.theta = 0;
    			this.dead = false;
    			this.ba = parseInt(getRandom(80 , 200));
    		}
    		Boom.prototype = {
          
    			_paint:function(){
          
    				ctx.save();
    				ctx.beginPath();
    				ctx.arc(this.x,this.y,this.r,0,2*Math.PI);
    				ctx.fillStyle = this.c;
    				ctx.fill();
    				ctx.restore();
    			},
    			_move:function(){
          
    				var dx = this.boomArea.x - this.x , dy = this.boomArea.y - this.y;
    				this.x = this.x+dx*0.01;
    				this.y = this.y+dy*0.01;
    
    				if(Math.abs(dx)<=this.ba && Math.abs(dy)<=this.ba){
          
    					if(this.shape){
          
    						this._shapBoom();
    					}
    					else this._boom();
    					this.dead = true;
    				}
    				else {
          
    					this._paint();
    				}
    			},
    			_drawLight:function(){
          
    				ctx.save();
    				ctx.fillStyle = "rgba(255,228,150,0.3)";
    				ctx.beginPath();
    				ctx.arc(this.x , this.y , this.r+3*Math.random()+1 , 0 , 2*Math.PI);
    				ctx.fill();
    				ctx.restore();
    			},
    			_boom:function(){
          
    				var fragNum = getRandom(30 , 200);
    				var style = getRandom(0,10)>=5? 1 : 2;
    				var color;
    				if(style===1){
          
    					color = {
          
    						a:parseInt(getRandom(128,255)),
    						b:parseInt(getRandom(128,255)),
    						c:parseInt(getRandom(128,255))
    					}
    				}
    
    				var fanwei = parseInt(getRandom(300, 400));
    				for(var i=0;i<fragNum;i++){
          
    					if(style===2){
          
    						color = {
          
    							a:parseInt(getRandom(128,255)),
    							b:parseInt(getRandom(128,255)),
    							c:parseInt(getRandom(128,255))
    						}
    					}
    					var a = getRandom(-Math.PI, Math.PI);
    					var x = getRandom(0, fanwei) * Math.cos(a) + this.x;
    					var y = getRandom(0, fanwei) * Math.sin(a) + this.y; 
    					var radius = getRandom(0 , 2)
    					var frag = new Frag(this.x , this.y , radius , color , x , y );
    					this.booms.push(frag);
    				}
    			},
    			_shapBoom:function(){
          
    				var that = this;
    				putValue(ocas , octx , this.shape , 5, function(dots){
          
    					var dx = canvas.width/2-that.x;
    					var dy = canvas.height/2-that.y;
    					for(var i=0;i<dots.length;i++){
          
    						color = {
          a:dots[i].a,b:dots[i].b,c:dots[i].c}
    						var x = dots[i].x;
    						var y = dots[i].y;
    						var radius = 1;
    						var frag = new Frag(that.x , that.y , radius , color , x-dx , y-dy);
    						that.booms.push(frag);
    					}
    				})
    			}
    		}
    
    		function putValue(canvas , context , ele , dr , callback){
          
    			context.clearRect(0,0,canvas.width,canvas.height);
    			var img = new Image();
    			if(ele.innerHTML.indexOf("img")>=0){
          
    				img.src = ele.getElementsByTagName("img")[0].src;
    				imgload(img , function(){
          
    					context.drawImage(img , canvas.width/2 - img.width/2 , canvas.height/2 - img.width/2);
    					dots = getimgData(canvas , context , dr);
    					callback(dots);
    				})
    			}
    			else {
          
    				var text = ele.innerHTML;
    				context.save();
    				var fontSize =200;
    				context.font = fontSize+"px 宋体 bold";
    				context.textAlign = "center";
    				context.textBaseline = "middle";
    				context.fillStyle = "rgba("+parseInt(getRandom(128,255))+","+parseInt(getRandom(128,255))+","+parseInt(getRandom(128,255))+" , 1)";
    				context.fillText(text , canvas.width/2 , canvas.height/2);
    				context.restore();
    				dots = getimgData(canvas , context , dr);
    				callback(dots);
    			}
    		}
    
    		function imgload(img , callback){
          
    			if(img.complete){
          
    				callback.call(img);
    			}
    			else {
          
    				img.onload = function(){
          
    					callback.call(this);
    				}
    			}
    		}
    
    		function getimgData(canvas , context , dr){
          
    			var imgData = context.getImageData(0,0,canvas.width , canvas.height);
    			context.clearRect(0,0,canvas.width , canvas.height);
    			var dots = [];
    			for(var x=0;x<imgData.width;x+=dr){
          
    				for(var y=0;y<imgData.height;y+=dr){
          
    					var i = (y*imgData.width + x)*4;
    					if(imgData.data[i+3] > 128){
          
    						var dot = {
          x:x , y:y , a:imgData.data[i] , b:imgData.data[i+1] , c:imgData.data[i+2]};
    						dots.push(dot);
    					}
    				}
    			}
    			return dots;
    		}
    
    		function getRandom(a , b){
          
    			return Math.random()*(b-a)+a;
    		}
    
    
    		var maxRadius = 1 , stars=[];
    		function drawBg(){
          
    			for(var i=0;i<100;i++){
          
    				var r = Math.random()*maxRadius;
    				var x = Math.random()*canvas.width;
    				var y = Math.random()*2*canvas.height - canvas.height;
    				var star = new Star(x , y , r);
    				stars.push(star);
    				star.paint()
    			}
    
    		}
    
    		var Star = function(x,y,r){
          
    			this.x = x;this.y=y;this.r=r;
    		}
    		Star.prototype = {
          
    			paint:function(){
          
    				ctx.save();
    				ctx.beginPath();
    				ctx.arc(this.x , this.y , this.r , 0 , 2*Math.PI);
    				ctx.fillStyle = "rgba(255,255,255,"+this.r+")";
    				ctx.fill();
    				ctx.restore();
    			}
    		}
    
    		var focallength = 250;
    		var Frag = function(centerX , centerY , radius , color ,tx , ty){
          
    			this.tx = tx;
    			this.ty = ty;
    			this.x = centerX;
    			this.y = centerY;
    			this.dead = false;
    			this.centerX = centerX;
    			this.centerY = centerY;
    			this.radius = radius;
    			this.color = color;
    		}
    
    		Frag.prototype = {
          
    			paint:function(){
          
    				ctx.save();
    				ctx.beginPath();
    				ctx.arc(this.x , this.y , this.radius , 0 , 2*Math.PI);
    				ctx.fillStyle = "rgba("+this.color.a+","+this.color.b+","+this.color.c+",1)";
    				ctx.fill()
    				ctx.restore();
    			},
    			moveTo:function(index){
          
    				this.ty = this.ty+0.3;
    				var dx = this.tx - this.x , dy = this.ty - this.y;
    				this.x = Math.abs(dx)<0.1 ? this.tx : (this.x+dx*0.1);
    				this.y = Math.abs(dy)<0.1 ? this.ty : (this.y+dy*0.1);
    				if(dx===0 && Math.abs(dy)<=80){
          
    					this.dead = true;
    				}
    				this.paint();
    			}
    		}
    	</script>
    
    </body>
    </html>

##### 心动一刹烟花 #####

![e29ed1e60bc14a0bb96348b45112783b.gif][]  
`特点`

> 这是最后一个烟花了，我知道也许很少有人会看到这里，可能很多人觉得有趣就直接点了收藏，然后让它一直沉浸收藏夹里，直至落灰，最后的烟花其实不是送给你们的，是送给我的，送给自己这个太过糟糕的一年，大起大落，唉，也许家家有本难念的经吧，小的时候就有一个梦想，能不能学会斑的无限月读，让世界永远和平，人们再无痛苦，可看看那浩瀚的星空，自己又何尝不是很迷茫，人为何而生？我现在所做的事情的又为何？算了，不说了，说多了，哈哈哈，如果你能看到这的话，我可以问你一个问题么？

> 就你而然，你觉得根据你现在的阅历和经历，人活着的意义是什么呢？可以在评论区告诉我么？

`Html`

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>HTML5 Canvas五彩烟花动画特效</title>
    
    <style>
    *{
          
    	padding: 0;
    	margin: 0;
    }
    </style>
    
    </head>
    <body>
    
    <div id="example"></div>
    
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/firework.js"></script>
    <script type="text/javascript">
    	$(function(){
          
    		$("#example").fireworks({
          
    			width: "100%",
    			height: "100%"
    		});
    	});
    </script>
    
    </body>
    </html>

##### 春节对联 #####

`哎，小伙伴们，这个对联确确实实是总给你们的，希望你们在新的一年，码到成功！！！`

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5q2l5bCU5pav54m5_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>春联</title>
    </head>
    
    <body>
    <style>
        .font{
           font-family: 隶书; font-size: 36pt; color: #000000; font-weight: bold;
            background-color: #FF0000 }
        .font1{
           font-family: 隶书; font-size: 36pt; color: #000000; font-weight: bold }
        -->
    </style>
    
    <div style="position: absolute; top: 80; left: 217; width: 320; height: 386; font-size: 240pt; color: red">◆</div>
    <div style="position: absolute; top: 195; left: 305; width: 160; height: 160; font-size: 110pt; font-family: 隶书">淦</div>
    <div style="position: absolute; top: 10; left: 120; width: 527; height: 388">
        <table border="0" cellpadding="0" cellspacing="0" width="527" height="231">
            <tr>
                <td height="21" width="46"></td>
                <td height="21" width="449">
                </td>
                <td height="21" width="51"></td>
            </tr>
            <tr>
                <td height="211" width="46" align="center" class="font">
                    <p align="center">
                        废<br>
                        寝<br>
                        忘<br>
                        食<br>
                        编<br>
                        程<br>
                        序<br>
                <td height="211" width="449" align="center"></td>
                <td height="211" width="51" align="center" class="font">
                    闻<br>
                    机<br>
                    起<br>
                    早<br>
                    保<br>
                    运<br>
                    维<br>
            </tr>
        </table>
    </div>
    
    </body>
    </html>

.couplet_ad
    /* 底部固定*/
    {
        position:fixed;bottom:auto; top:0; width: 120px; height: 230px; z-index:99999; margin-top:158px;}
    html .couplet_ad
    /* IE6 底部固定*/
    {
        _position:absolute;
    _bottom:auto;
    _top:expression(eval(document.documentElement.scrollTop));}
    .couplet_ad a{
         display:block; cursor:pointer;}
    #ad_left{
         left: 0px;}
    #ad_right{
         right: 0px;}
     
     
     <div class="couplet_ad" id="ad_left">
    <a target="_blank" href=""><img src="dl.jpg"></a>
    <a onClick="ad_left();">关闭</a>
    </div>
    
    <div class="couplet_ad" id="ad_right">
    <a target="_blank" href=""><img src="dl.jpg"></a>
    <a  onClick="ad_right();">关闭</a>
    </div>
    
    <script language="javascript">
    function ad_left(){
        
    document.getElementById('ad_left').style.display="none";
    }
    function ad_right(){
        
    document.getElementById('ad_right').style.display="none";
    }
    </script>

[3b4c784f024d4391abbc08deef09ea7d.gif]: https://img-blog.csdnimg.cn/3b4c784f024d4391abbc08deef09ea7d.gif
[f8d60aa49bbf4e2b979547d6ba1acc20.gif]: https://img-blog.csdnimg.cn/f8d60aa49bbf4e2b979547d6ba1acc20.gif
[51ea3fda21814410a198d0619e73ba26.gif]: https://img-blog.csdnimg.cn/51ea3fda21814410a198d0619e73ba26.gif
[e29ed1e60bc14a0bb96348b45112783b.gif]: https://img-blog.csdnimg.cn/e29ed1e60bc14a0bb96348b45112783b.gif
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5q2l5bCU5pav54m5_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/81d6d1a632af4b3f83590ab821a0c621.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5q2l5bCU5pav54m5,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center