南京百度seo排名,网站seo关键词,企业标志,四川城乡和住房建设厅网站首页#x1f482; 个人网站:【 海拥】【神级代码资源网站】【办公神器】#x1f91f; 基于Web端打造的#xff1a;#x1f449;轻量化工具创作平台#x1f485; 想寻找共同学习交流的小伙伴#xff0c;请点击【全栈技术交流群】 给大家安利一个免费且实用的轻量化工具创作平台… 个人网站:【 海拥】【神级代码资源网站】【办公神器】 基于Web端打造的轻量化工具创作平台 想寻找共同学习交流的小伙伴请点击【全栈技术交流群】 给大家安利一个免费且实用的轻量化工具创作平台点击跳转到网站。
今天给大家带来几个好看的基于 HTMLCSSJS 的烟花特效
雪花 、 樱花 、 浪漫贺卡 以及 圣诞树 我前段时间刚做过感兴趣的也可以看看我前几期的博客
雪花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烟花特效 一、简单大气的烟花 二、在农村看到的烟花 三、可点击的烟花 四、3D旋转烟花 五、可拖动视角的自定义烟花 评论区抽粉丝送书啦✨ 完整源码下载 五种不同的JS烟花特效 一、简单大气的烟花
演示地址https://haiyong.site/demo/fireworks1.html HTML代码
这里的HTML代码很简短
divcanvas idcanvas/canvas
/divCSS代码
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;function onLoad() {canvas document.getElementById(canvas);ctx canvas.getContext(2d);resizeCanvas(); window.requestAnimationFrame(updateWorld);} function resizeCanvas() {if (!!canvas) {w canvas.width window.innerWidth;h canvas.height window.innerHeight;}} function updateWorld() {update();paint();window.requestAnimationFrame(updateWorld);} function update() {if (particles.length 500 Math.random() probability) {createFirework();}var alive [];for (var i0; iparticles.length; i) {if (particles[i].move()) {alive.push(particles[i]);}}particles alive;} function paint() {ctx.globalCompositeOperation source-over;ctx.fillStyle rgba(0,0,0,0.2);ctx.fillRect(0, 0, w, h);ctx.globalCompositeOperation lighter;for (var i0; iparticles.length; i) {particles[i].draw(ctx);}} function createFirework() {xPoint Math.random()*(w-200)100;yPoint Math.random()*(h-200)100;var nFire Math.random()*50100;var c rgb((~~(Math.random()*20055)),(~~(Math.random()*20055)),(~~(Math.random()*20055)));for (var i0; inFire; i) {var particle new Particle();particle.color c;var vy Math.sqrt(25-particle.vx*particle.vx);if (Math.abs(particle.vy) vy) {particle.vy particle.vy0 ? vy: -vy;}particles.push(particle);}} function Particle() {this.w this.h Math.random()*41; 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) {return false;}return true;},draw: function (c) {c.save();c.beginPath(); c.translate(this.xthis.w/2, this.ythis.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();}} 二、在农村看到的烟花
演示地址https://haiyong.site/demo/fireworks2.html需要使用电脑打开没做响应式手机端打开一片黑或者可以看看后面的烟花 HTML代码
这里的HTML代码还是一样的简短
div idjsi-fireworks-container classcontainer/divCSS代码
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代码比较长我这里放了一部分需要完整源码的可以关注公众号【海拥】回复【烟花】
var RENDERER {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 [new LEAF(this.width, this.height, this)];this.stars [];this.fireworks [new FIREWORK(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(new TWIG(this.width, this.height, 0, 0, Math.PI * 3 / 4, 0));this.twigs.push(new TWIG(this.width, this.height, this.width, 0, -Math.PI * 3 / 4, Math.PI));this.twigs.push(new TWIG(this.width, this.height, 0, this.height, Math.PI / 4, Math.PI));this.twigs.push(new TWIG(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(new STAR(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(new LEAF(this.width, this.height, this));this.leafInterval this.getRandomValue(this.LEAF_INTERVAL_RANGE) | 0;}if(--this.fireworkInterval 0){this.fireworks.push(new FIREWORK(this.width, this.height, this));this.maxFireworkInterval this.getRandomValue(this.FIREWORK_INTERVAL_RANGE) | 0;this.fireworkInterval this.maxFireworkInterval;}}
};三、可点击的烟花
演示地址https://haiyong.site/demo/fireworks3.html
HTML代码
canvas idcanvas/canvasCSS代码
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 new createjs.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;};// 制作烟花的classFireworks class Fireworks {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 new createjs.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 new createjs.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(new Fireworks(x, y));return fireBoss.push(new Fireworks(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(new Fireworks(stage.mouseX, stage.mouseY));return fireBoss.push(new Fireworks(stage.mouseX, stage.mouseY));});
}).call(this);四、3D旋转烟花
演示地址https://haiyong.site/demo/fireworks4.html HTML代码
canvas idcanvas/canvasCSS代码
html,body{margin:0px;width:100%;height:100%;overflow:hidden;background:#000;
}#canvas{width:100%;height:100%;
}部分JS代码
JS代码比较长我就不全列出来了需要完整源码可以点击此处下载本篇文章所有源码 function initVars(){piMath.PI;ctxcanvas.getContext(2d);canvas.widthcanvas.clientWidth;canvas.heightcanvas.clientHeight;cxcanvas.width/2;cycanvas.height/2;playerZ-25;playerXplayerYplayerVXplayerVYplayerVZpitchyawpitchVyawV0;scale600;seedTimer0;seedInterval5,seedLife100;gravity.02;seedsnew Array();sparkPicsnew Array();shttps://cantelope.org/NYE/;for(i1;i10;i){sparkPicnew Image();sparkPic.srcssparki.png;sparkPics.push(sparkPic);}sparksnew Array();pow1new Audio(spow1.ogg);pow2new Audio(spow2.ogg);pow3new Audio(spow3.ogg);pow4new Audio(spow4.ogg);frames 0;
}function rasterizePoint(x,y,z){var p,d;x-playerX;y-playerY;z-playerZ;pMath.atan2(x,z);dMath.sqrt(x*xz*z);xMath.sin(p-yaw)*d;zMath.cos(p-yaw)*d;pMath.atan2(y,z);dMath.sqrt(y*yz*z);yMath.sin(p-pitch)*d;zMath.cos(p-pitch)*d;var rx1-1000,ry11,rx21000,ry21,rx30,ry30,rx4x,ry4z,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(ua0ua1ub0ub1){return {x:cx(rx1ua*(rx2-rx1))*scale,y:cyy/z*scale,d:Math.sqrt(x*xy*yz*z)};}else{return {x:cx(rx1ua*(rx2-rx1))*scale,y:cyy/z*scale,d:-1};}
}function spawnSeed(){seednew Object();seed.x-50Math.random()*100;seed.y25;seed.z-50Math.random()*100;seed.vx.1-Math.random()*.2;seed.vy-1.5;//*(1Math.random()/2);seed.vz.1-Math.random()*.2;seed.bornframes;seeds.push(seed);
}五、可拖动视角的自定义烟花
演示地址https://haiyong.site/demo/fireworks5.html HTML代码 div idWebGL-output/divCSS代码
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 new THREE.Vector3(0, -0.005, 0);
const friction 0.998;
const noise new SimplexNoise();
const textureSize 128.0;
const fireworksInstances [];let outputDom;const getOffsetXYZ i {const offset 3;const index i * offset;const x index;const y index 1;const z index 2;return { x, y, z };
};const getOffsetRGBA 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 new dat.GUI();
const guiControls new function () {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;
});const getRandomNum (max 0, min 0) Math.floor(Math.random() * (max 1 - min)) min;const launchFireWorks () {if (fireworksInstances.length 5) return;const fw Math.random() 8 ? new BasicFIreWorks() : new RichFIreWorks();fireworksInstances.push(fw);scene.add(fw.meshGroup);
};const autoLaunch () {if (!isAutoLaunch) return;if (Math.random() 0.7) launchFireWorks();
};const drawRadialGradation (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();
};const getTexture () {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 new THREE.Texture(canvas);texture.type THREE.FloatType;texture.needsUpdate true;return texture;
};canvasTexture getTexture();const getPointMesh (num, vels, type) {const bufferGeometry new THREE.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;const multipleColor () getRandomNum(100, 1) * 0.01;let rgbType;const rgbTypeDice Math.random();if (rgbTypeDice 0.66) {rgbType red;} else if (rgbTypeDice 0.33) {rgbType green;} else {rgbType blue;}for (let i 0; i num; i) {const pos new THREE.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, new THREE.Float32BufferAttribute(vertices, 3).setDynamic(true));bufferGeometry.addAttribute(velocity, new THREE.Float32BufferAttribute(velocities, 3).setDynamic(true));bufferGeometry.addAttribute(color, new THREE.Float32BufferAttribute(colors, 4).setDynamic(true));bufferGeometry.addAttribute(adjustSize, new THREE.Float32BufferAttribute(adjustSizes, 1).setDynamic(true));bufferGeometry.addAttribute(mass, new THREE.Float32BufferAttribute(masses, 1).setDynamic(true));评论区抽粉丝送书啦 欢迎大家在评论区提出意见和建议! (抽三位幸运儿送书实物图如下) 《元宇宙图说元宇宙、设计元宇宙全两册》
【内容简介】 元宇宙到底有多火前有林俊杰在元宇宙上买房后有张碧晨新歌《Interstellar》也与星际银河有关但是你对元宇宙的概念知道多少呢是不是也对这个名词熟之又熟却对其内涵迷迷糊糊 北京大学出版社联合文津图书奖得主、全国十大科普教育平台“量子学派”与中国科学院院士共同推出《元宇宙图说元宇宙、设计元宇宙全两册》一书拒绝概念堆砌及材料汇编原创首发助你从零开始读懂元宇宙并不断向上跃迁轻松成为元宇宙架构师 320幅手绘插图场景化叙事十一维元宇宙关系图谱更有大拉页版“2140世界设定”让元宇宙的世界清晰可见。 也有不想靠抽想自己买的同学可以参考下面的链接
当当自营购买链接
《元宇宙图说元宇宙、设计元宇宙全两册》- 当当图书
✨ 完整源码下载
本篇文章所有源码都已打包好下载方式有如下三种 1.CSDN资源下载这个需要付费白嫖的可以往下看https://download.csdn.net/download/qq_44273429/75794027 2.关注公众号【海拥】回复【烟花】获取 3.通过下方卡片获取博主的联系方式记得备注CSDN
