今天给大家带来几个好看的基于 HTML+CSS+JS 的烟花特效
雪花 、 樱花 、 浪漫贺卡 以及 圣诞树 我前段时间刚做过，感兴趣的也可以看看我前几期的博客：
雪花：https://haiyong.blog.csdn.net/article/details/105786233
樱花：https://haiyong.blog.csdn.net/article/details/122008942
圣诞树和贺卡：https://haiyong.blog.csdn.net/article/details/122024043
目录
🎇 五种不同的JS烟花特效
🍕 一、简单大气的烟花
演示地址：http://haiyong.site/fireworks1
HTML代码：
这里的HTML代码很简短
<div><canvasid="canvas"></canvas></div>
CSS代码
css也只有这两段内容
body{background:black;overflow:hidden;margin:0;}canvas{background:#000;}
JS代码
所有的源码都在这里了，复制粘贴即可
window.addEventListener("resize", resizeCanvas,false);
window.addEventListener("DOMContentLoaded", onLoad,false);
window.requestAnimationFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||function(callback){
window.setTimeout(callback,1000/60);};var canvas, ctx, w, h, particles =[], probability =0.04,
xPoint, yPoint;functiononLoad(){
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");resizeCanvas();
window.requestAnimationFrame(updateWorld);}functionresizeCanvas(){if(!!canvas){
w = canvas.width = window.innerWidth;
h = canvas.height = window.innerHeight;}}functionupdateWorld(){update();paint();
window.requestAnimationFrame(updateWorld);}functionupdate(){if(particles.length <500&& Math.random()< probability){createFirework();}var alive =[];for(var i=0; i<particles.length; i++){if(particles[i].move()){
alive.push(particles[i]);}}
particles = alive;}functionpaint(){
ctx.globalCompositeOperation ='source-over';
ctx.fillStyle ="rgba(0,0,0,0.2)";
ctx.fillRect(0,0, w, h);
ctx.globalCompositeOperation ='lighter';for(var i=0; i<particles.length; i++){
particles[i].draw(ctx);}}functioncreateFirework(){
xPoint = Math.random()*(w-200)+100;
yPoint = Math.random()*(h-200)+100;var nFire = Math.random()*50+100;var c ="rgb("+(~~(Math.random()*200+55))+","+(~~(Math.random()*200+55))+","+(~~(Math.random()*200+55))+")";for(var i=0; i<nFire; i++){var particle =newParticle();
particle.color = c;var vy = Math.sqrt(25-particle.vx*particle.vx);if(Math.abs(particle.vy)> vy){
particle.vy = particle.vy>0? vy:-vy;}
particles.push(particle);}}functionParticle(){this.w =this.h = Math.random()*4+1;this.x = xPoint-this.w/2;this.y = yPoint-this.h/2;this.vx =(Math.random()-0.5)*10;this.vy =(Math.random()-0.5)*10;this.alpha = Math.random()*.5+.5;this.color;}Particle.prototype ={
gravity:0.05,move:function(){this.x +=this.vx;this.vy +=this.gravity;this.y +=this.vy;this.alpha -=0.01;if(this.x <=-this.w ||this.x >= screen.width ||this.y >= screen.height ||this.alpha <=0){returnfalse;}returntrue;},draw:function(c){
c.save();
c.beginPath();
c.translate(this.x+this.w/2,this.y+this.h/2);
c.arc(0,0,this.w,0, Math.PI*2);
c.fillStyle =this.color;
c.globalAlpha =this.alpha;
c.closePath();
c.fill();
c.restore();}}
🍜 二、在农村看到的烟花
演示地址：http://haiyong.site/fireworks2（需要使用电脑打开，没做响应式手机端打开一片黑，或者可以看看后面的烟花）
HTML代码：
这里的HTML代码还是一样的简短
<divid="jsi-fireworks-container"class="container"></div>
CSS代码
css也只有这三段内容
html, body{width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;background-color: #101010;}.container{position: absolute;width: 500px;height: 500px;top: 50%;left: 50%;margin-top: -250px;margin-left: -250px;}canvas{position: absolute;top: 0;left: 0;}
JS代码
JS代码比较长，我这里放了一部分，需要完整源码的可以关注公众号【海拥】回复【烟花】
varRENDERER={LEAF_INTERVAL_RANGE:{min :100, max :200},FIREWORK_INTERVAL_RANGE:{min :20, max :200},SKY_COLOR:'hsla(210, 60%, %luminance%, 0.2)',STAR_COUNT:100,init:function(){this.setParameters();this.reconstructMethod();this.createTwigs();this.createStars();this.render();},setParameters:function(){this.$container =$('#jsi-fireworks-container');this.width =this.$container.width();this.height =this.$container.height();this.distance = Math.sqrt(Math.pow(this.width /2,2)+ Math.pow(this.height /2,2));this.contextFireworks =$('<canvas />').attr({width :this.width, height :this.height}).appendTo(this.$container).get(0).getContext('2d');this.contextTwigs =$('<canvas />').attr({width :this.width, height :this.height}).appendTo(this.$container).get(0).getContext('2d');this.twigs =[];this.leaves =[newLEAF(this.width,this.height,this)];this.stars =[];this.fireworks =[newFIREWORK(this.width,this.height,this)];this.leafInterval =this.getRandomValue(this.LEAF_INTERVAL_RANGE)|0;this.maxFireworkInterval =this.getRandomValue(this.FIREWORK_INTERVAL_RANGE)|0;this.fireworkInterval =this.maxFireworkInterval;},reconstructMethod:function(){this.render =this.render.bind(this);},getRandomValue:function(range){return range.min +(range.max - range.min)* Math.random();},createTwigs:function(){this.twigs.push(newTWIG(this.width,this.height,0,0, Math.PI*3/4,0));this.twigs.push(newTWIG(this.width,this.height,this.width,0,-Math.PI*3/4, Math.PI));this.twigs.push(newTWIG(this.width,this.height,0,this.height, Math.PI/4, Math.PI));this.twigs.push(newTWIG(this.width,this.height,this.width,this.height,-Math.PI/4,0));},createStars:function(){for(var i =0, length =this.STAR_COUNT; i < length; i++){this.stars.push(newSTAR(this.width,this.height,this.contextTwigs,this));}},render:function(){requestAnimationFrame(this.render);var maxOpacity =0,
contextTwigs =this.contextTwigs,
contextFireworks =this.contextFireworks;for(var i =this.fireworks.length -1; i >=0; i--){
maxOpacity = Math.max(maxOpacity,this.fireworks[i].getOpacity());}
contextTwigs.clearRect(0,0,this.width,this.height);
contextFireworks.fillStyle =this.SKY_COLOR.replace('%luminance',5+ maxOpacity *15);
contextFireworks.fillRect(0,0,this.width,this.height);for(var i =this.fireworks.length -1; i >=0; i--){if(!this.fireworks[i].render(contextFireworks)){this.fireworks.splice(i,1);}}for(var i =this.stars.length -1; i >=0; i--){this.stars[i].render(contextTwigs);}for(var i =this.twigs.length -1; i >=0; i--){this.twigs[i].render(contextTwigs);}for(var i =this.leaves.length -1; i >=0; i--){if(!this.leaves[i].render(contextTwigs)){this.leaves.splice(i,1);}}if(--this.leafInterval ==0){this.leaves.push(newLEAF(this.width,this.height,this));this.leafInterval =this.getRandomValue(this.LEAF_INTERVAL_RANGE)|0;}if(--this.fireworkInterval ==0){this.fireworks.push(newFIREWORK(this.width,this.height,this));this.maxFireworkInterval =this.getRandomValue(this.FIREWORK_INTERVAL_RANGE)|0;this.fireworkInterval =this.maxFireworkInterval;}}};
🧀 三、可点击的烟花
演示地址：http://haiyong.site/fireworks3
HTML代码：
<canvasid="canvas"></canvas>
CSS代码
body{background-color: #000;}canvas{display: block;margin: auto;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-select:none;}
完整JS代码
(function(){var Fireworks,GRAVITY,K,SPEED, ToRadian, canvas, context, ctx, fireBoss, repeat, stage;
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
stage =newcreatejs.Stage(canvas);
stage.autoClear =false;
ctx = canvas.getContext("2d");
ctx.fillStyle ="rgba(0, 0, 0, 0)";
ctx.fillRect(0,0, canvas.width, canvas.height);
createjs.Ticker.setFPS(50);
createjs.Touch.enable(stage);
stage.update();// 重力GRAVITY=1;// 抵抗K=0.9;// 速度SPEED=12;// 从度数转换为弧度ToRadian=function(degree){return degree * Math.PI/180.0;};// 制作烟花的class
Fireworks =classFireworks{constructor(sx =100, sy =100, particles =70){var circle, i, j, rad, ref, speed;this.sx = sx;this.sy = sy;this.particles = particles;this.sky =newcreatejs.Container();this.r =0;this.h = Math.random()*360|0;this.s =100;this.l =50;this.size =3;for(i = j =0, ref =this.particles;(0<= ref ? j < ref : j > ref); i =0<= ref ?++j :--j){
speed = Math.random()*12+2;
circle =newcreatejs.Shape();
circle.graphics.f(`hsla(${this.h}, ${this.s}%, ${this.l}%, 1)`).dc(0,0,this.size);
circle.snapToPixel =true;
circle.compositeOperation ="lighter";
rad =ToRadian(Math.random()*360|0);
circle.set({
x:this.sx,
y:this.sy,
vx: Math.cos(rad)* speed,
vy: Math.sin(rad)* speed,
rad: rad
});this.sky.addChild(circle);}
stage.addChild(this.sky);}explode(){var circle, j, p, ref;if(this.sky){++this.h;for(p = j =0, ref =this.sky.getNumChildren();(0<= ref ? j < ref : j > ref); p =0<= ref ?++j :--j){
circle =this.sky.getChildAt(p);// 加速度
circle.vx = circle.vx *K;
circle.vy = circle.vy *K;// 位置计算
circle.x += circle.vx;
circle.y += circle.vy +GRAVITY;this.l = Math.random()*100;// 粒度this.size =this.size -0.001;if(this.size >0){
circle.graphics.c().f(`hsla(${this.h}, 100%, ${this.l}%, 1)`).dc(0,0,this.size);}}if(this.sky.alpha >0.1){this.sky.alpha -=K/50;}else{
stage.removeChild(this.sky);this.sky =null;}}else{}}};
fireBoss =[];setInterval(function(){
ctx.fillStyle ="rgba(0, 0, 0, 0.1)";
ctx.fillRect(0,0, canvas.width, canvas.height);},40);setInterval(function(){var x, y;
x = Math.random()* canvas.width |0;
y = Math.random()* canvas.height |0;
fireBoss.push(newFireworks(x, y));return fireBoss.push(newFireworks(x, y));},1300);repeat=function(){var fireworks, j, ref;for(fireworks = j =0, ref = fireBoss.length;(0<= ref ? j < ref : j > ref); fireworks =0<= ref ?++j :--j){if(fireBoss[fireworks].sky){
fireBoss[fireworks].explode();}}
stage.update();};
createjs.Ticker.on("tick", repeat);
stage.addEventListener("stagemousedown",function(){
fireBoss.push(newFireworks(stage.mouseX, stage.mouseY));return fireBoss.push(newFireworks(stage.mouseX, stage.mouseY));});}).call(this);
🍖 四、3D旋转烟花
演示地址：http://haiyong.site/fireworks4
HTML代码：
<canvasid="canvas"></canvas>
CSS代码
html,body{margin:0px;width:100%;height:100%;overflow:hidden;background:#000;}#canvas{width:100%;height:100%;}
部分JS代码
JS代码比较长我就不全列出来了，需要完整源码可以点击此处下载本篇文章所有源码：
functioninitVars(){
pi=Math.PI;
ctx=canvas.getContext("2d");
canvas.width=canvas.clientWidth;
canvas.height=canvas.clientHeight;
cx=canvas.width/2;
cy=canvas.height/2;
playerZ=-25;
playerX=playerY=playerVX=playerVY=playerVZ=pitch=yaw=pitchV=yawV=0;
scale=600;
seedTimer=0;seedInterval=5,seedLife=100;gravity=.02;
seeds=newArray();
sparkPics=newArray();
s="https://cantelope.org/NYE/";for(i=1;i<=10;++i){
sparkPic=newImage();
sparkPic.src=s+"spark"+i+".png";
sparkPics.push(sparkPic);}
sparks=newArray();
pow1=newAudio(s+"pow1.ogg");
pow2=newAudio(s+"pow2.ogg");
pow3=newAudio(s+"pow3.ogg");
pow4=newAudio(s+"pow4.ogg");
frames =0;}functionrasterizePoint(x,y,z){var p,d;
x-=playerX;
y-=playerY;
z-=playerZ;
p=Math.atan2(x,z);
d=Math.sqrt(x*x+z*z);
x=Math.sin(p-yaw)*d;
z=Math.cos(p-yaw)*d;
p=Math.atan2(y,z);
d=Math.sqrt(y*y+z*z);
y=Math.sin(p-pitch)*d;
z=Math.cos(p-pitch)*d;var rx1=-1000,ry1=1,rx2=1000,ry2=1,rx3=0,ry3=0,rx4=x,ry4=z,uc=(ry4-ry3)*(rx2-rx1)-(rx4-rx3)*(ry2-ry1);if(!uc)return{x:0,y:0,d:-1};var ua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc;var ub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc;if(!z)z=.000000001;if(ua>0&&ua<1&&ub>0&&ub<1){return{
x:cx+(rx1+ua*(rx2-rx1))*scale,
y:cy+y/z*scale,
d:Math.sqrt(x*x+y*y+z*z)};}else{return{
x:cx+(rx1+ua*(rx2-rx1))*scale,
y:cy+y/z*scale,
d:-1};}}functionspawnSeed(){
seed=newObject();
seed.x=-50+Math.random()*100;
seed.y=25;
seed.z=-50+Math.random()*100;
seed.vx=.1-Math.random()*.2;
seed.vy=-1.5;//*(1+Math.random()/2);
seed.vz=.1-Math.random()*.2;
seed.born=frames;
seeds.push(seed);}
🍰 五、可拖动视角的自定义烟花
演示地址：http://haiyong.site/fireworks5
HTML代码：
<divid="WebGL-output"></div>
CSS代码
body{margin: 0;overflow: hidden;background:-webkit-linear-gradient(0deg,rgb(0, 12, 91),rgb(0, 0, 0));background:linear-gradient(0deg,rgb(0, 12, 91),rgb(0, 0, 0));}
部分JS代码
JS代码比较长我就不全列出来了，需要完整源码可以参见文章末尾两种获取源码方式
let scene,
camera,
renderer,
orbitControls,
planeMesh,
canvasTexture,
isAutoLaunch =true;const gravity =newTHREE.Vector3(0,-0.005,0);const friction =0.998;const noise =newSimplexNoise();const textureSize =128.0;const fireworksInstances =[];let outputDom;constgetOffsetXYZ=i=>{const offset =3;const index = i * offset;const x = index;const y = index +1;const z = index +2;return{ x, y, z };};constgetOffsetRGBA=i=>{const offset =4;const index = i * offset;const r = index;const g = index +1;const b = index +2;const a = index +3;return{ r, g, b, a };};const gui =newdat.GUI();const guiControls =newfunction(){this.ParticleSize =300;this.AutoLaunch =true;}();
gui.add(guiControls,'ParticleSize',100,600);
gui.add(guiControls,'AutoLaunch').onChange(e=>{
isAutoLaunch = e;
outputDom.style.cursor = isAutoLaunch ?'auto':'pointer';});constgetRandomNum=(max =0, min =0)=> Math.floor(Math.random()*(max +1- min))+ min;constlaunchFireWorks=()=>{if(fireworksInstances.length >5)return;const fw = Math.random()>8?newBasicFIreWorks():newRichFIreWorks();
fireworksInstances.push(fw);
scene.add(fw.meshGroup);};constautoLaunch=()=>{if(!isAutoLaunch)return;if(Math.random()>0.7)launchFireWorks();};constdrawRadialGradation=(ctx, canvasRadius, canvasW, canvasH)=>{
ctx.save();const gradient = ctx.createRadialGradient(canvasRadius, canvasRadius,0, canvasRadius, canvasRadius, canvasRadius);
gradient.addColorStop(0.0,'rgba(255,255,255,1.0)');
gradient.addColorStop(0.5,'rgba(255,255,255,0.5)');
gradient.addColorStop(1.0,'rgba(255,255,255,0)');
ctx.fillStyle = gradient;
ctx.fillRect(0,0, canvasW, canvasH);
ctx.restore();};constgetTexture=()=>{const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');const diameter = textureSize;
canvas.width = diameter;
canvas.height = diameter;const canvasRadius = diameter /2;drawRadialGradation(ctx, canvasRadius, canvas.width, canvas.height);const texture =newTHREE.Texture(canvas);
texture.type =THREE.FloatType;
texture.needsUpdate =true;return texture;};
canvasTexture =getTexture();constgetPointMesh=(num, vels, type)=>{const bufferGeometry =newTHREE.BufferGeometry();const vertices =[];const velocities =[];const colors =[];const adjustSizes =[];const masses =[];const colorType = Math.random()>0.3?'single':'multiple';const singleColor =getRandomNum(100,20)*0.01;constmultipleColor=()=>getRandomNum(100,1)*0.01;let rgbType;const rgbTypeDice = Math.random();if(rgbTypeDice >0.66){
rgbType ='red';}elseif(rgbTypeDice >0.33){
rgbType ='green';}else{
rgbType ='blue';}for(let i =0; i < num; i++){const pos =newTHREE.Vector3(0,0,0);
vertices.push(pos.x, pos.y, pos.z);
velocities.push(vels[i].x, vels[i].y, vels[i].z);if(type ==='seed'){let size;if(type ==='trail'){
size = Math.random()*0.1+0.1;}else{
size = Math.pow(vels[i].y,2)*0.04;}if(i ===0) size *=1.1;
adjustSizes.push(size);
masses.push(size *0.017);
colors.push(1.0,1.0,1.0,1.0);}else{const size =getRandomNum(guiControls.ParticleSize,10)*0.001;
adjustSizes.push(size);
masses.push(size *0.017);if(colorType ==='multiple'){
colors.push(multipleColor(),multipleColor(),multipleColor(),1.0);}else{switch(rgbType){case'red':
colors.push(singleColor,0.1,0.1,1.0);break;case'green':
colors.push(0.1, singleColor,0.1,1.0);break;case'blue':
colors.push(0.1,0.1, singleColor,1.0);break;default:
colors.push(singleColor,0.1,0.1,1.0);}}}}
bufferGeometry.addAttribute('position',newTHREE.Float32BufferAttribute(vertices,3).setDynamic(true));
bufferGeometry.addAttribute('velocity',newTHREE.Float32BufferAttribute(velocities,3).setDynamic(true));
bufferGeometry.addAttribute('color',newTHREE.Float32BufferAttribute(colors,4).setDynamic(true));
bufferGeometry.addAttribute('adjustSize',newTHREE.Float32BufferAttribute(adjustSizes,1).setDynamic(true));
bufferGeometry.addAttribute('mass',newTHREE.Float32BufferAttribute(masses,1).setDynamic(true));
🥇 评论区抽粉丝送书啦
💌 欢迎大家在评论区提出意见和建议! (抽三位幸运儿送书，实物图如下)💌
《元宇宙：图说元宇宙、设计元宇宙（全两册）》
【内容简介】
**元宇宙到底有多火？前有林俊杰在元宇宙上买房，后有张碧晨新歌《Interstellar》也与星际银河有关，但是，你对元宇宙的概念知道多少呢？是不是也对这个名词熟之又熟，却对其内涵迷迷糊糊？
北京大学出版社联合文津图书奖得主、全国十大科普教育平台“量子学派”与中国科学院院士，共同推出《元宇宙：图说元宇宙、设计元宇宙（全两册）》一书，拒绝概念堆砌及材料汇编，原创首发，助你从零开始读懂元宇宙，并不断向上跃迁，轻松成为元宇宙架构师！
320幅手绘插图+场景化叙事+十一维元宇宙关系图谱，更有大拉页版“2140世界设定”，让元宇宙的世界清晰可见。
**
也有不想靠抽，想自己买的同学可以参考下面的链接
当当自营购买链接：
《元宇宙：图说元宇宙、设计元宇宙（全两册）》- 当当图书
✨ 完整源码下载
本篇文章所有源码都已打包好，下载方式有如下三种
1.CSDN资源下载（这个需要付费，白嫖的可以往下看）https://download.csdn.net/download/qq_44273429/75794027
2.关注公众号【海拥】回复【烟花】获取
3.通过下方卡片获取博主的联系方式，记得备注CSDN👇👇👇
本文转载自: https://blog.csdn.net/qq_44273429/article/details/122486667
版权归原作者 海拥✘ 所有， 如有侵权，请联系我们删除。
版权归原作者 海拥✘ 所有， 如有侵权，请联系我们删除。