JavaScript 实现简易烟花特效教程
本文详细解析如何使用原生JavaScript结合CSS3实现简易烟花绽放效果。通过模拟圆周运动、随机半径变化及节点位置重置，逐步构建烟花轨迹。文章提供从基础代码到封装类的完整实现思路，并探讨利用背景图优化视觉效果的方法，适合前端开发者学习动画逻辑与DOM操作。
JavaScript实现简易烟花特效教程
本文分享了使用JavaScript实现烟花动画效果的具体代码示例，供读者参考学习。
效果展示如下图所示：
基础圆周运动原理
首先，我们需要理解并实现基础的圆周运动原理。
// d1
/*css*/
div{
height: 4px;
width: 4px;
background: red;
position: absolute;
}
//js
var div = document.getElementById('div'); // 画运动点
document.getElementsByTagName('body')[0].appendChild(tdiv); // 添加节点
var deg = 0; // 运动角度
var r = 100; // 半径
var center = [300, 300] // 圆心
var dd = Math.PI/180; // PI和角度之间的转换
setInterval(function(){
deg++;
div.style.left = center[0] + Math.cos(deg * dd) * r + 'px';
div.style.top = center[1] + Math.sin(deg * dd) * r + 'px';
},16);运行上述代码后，屏幕上会出现一个沿圆周运动的红色方块。这一步骤的意义在于模拟烟花绽放的基础逻辑：可以将烟花的绽放想象为多个方块从圆心向四周扩散的运动过程。以一束包含10个绽放点的烟花为例，其运动轨迹每隔36度（360度除以10）分布一条。明确了这一规律后，后续实现将更为简便。
// d2
var divs = []; // 保存烟花节点
var len = 10; // 烟花节点个数
var temp = 360 / len; // 运动轨迹所隔角度
for(var i = 0; i < len; i++){
var tdiv = document.createElement('div');
var tr1 = r; // 半径
var deg = i * temp; // 当前轨迹所在的角度值
var left = center[0] + Math.cos(deg * dd) * tr1
var topLen = center[1] + Math.sin(deg * dd) * tr1
tdiv.style.left = left +'px';
tdiv.style.top = topLen +'px';
tdiv.data = { // 存放节点的位置信息
deg : deg,
r : tr1,
left : left,
top : topLen
};
document.getElementsByTagName('body')[0].appendChild(tdiv);
divs.push(tdiv);
}运行改进后的代码，可以看到如下效果：
随机半径与轨迹优化
虽然看起来已具备一些烟花的雏形，但实际烟花的运动轨迹并非如此整齐划一，即起点相同、终点也相同的模式。这里的终点距离即为半径长度，因此，通过改变半径的大小即可打乱这种整齐感，使轨迹更加自然。
// d3
function getRanR(a,b){ // 随机得到a-b的值
return Math.floor(Math.random()*(b-a+1)+a);
}将代码中for循环内的 tr1 替换为 getRanR(0,200); 函数调用。
CSS3动画与节点控制
此时画面显得杂乱，尚无明显烟花形态。不过，通过让元素动起来，效果便会显现。为了使节点运动起来，需修改 d2 部分的JS代码，使各节点的起始位置回归圆心。同时，为了简化开发，这里采用CSS3来实现运动效果。
/*css*/
div{
height: 4px;
width: 4px;
background: red;
position: absolute;
transition: 1s all; // 就添加这一句
}
// js
tdiv.style.left = center[0] +'px';
tdiv.style.top = center[1] +'px';从 d2 的代码逻辑可以看出，运动轨迹的数据已存储在各节点对象中。通过获取 divs 集合中的各个节点，我们只需操作这些DOM元素即可实现动画。
document.onclick = function () {
for(var i = 0; i < divs.length; i++){
divMove(divs[i])
}
}
function divMove(div){
var data = div.data;
div.style.left = data.left + 'px';
div.style.top = data.top + 'px';
}运动效果如下图所示：
代码封装与完整实现
至此，我们看到了一个简易的烟花效果。若将此简易效果连续播放，即可达到图1所示的完整烟花效果。因此，首要任务是对该简易烟花效果进行代码封装。在动画实现方面，为了便于操作，此处引入了jQuery库。以下是HTML与CSS部分的代码：
<html>
<head>
<meta charset="utf-8">
<style>
*{
padding: 0;
margin: 0;
}
div.boom-div{
height: 4px;
width: 4px;
background: orange;
position: absolute;
border-radius: 50%;
}
#container{
width: 100%;
height: 100%;
position: relative;
}
.input-container{
position: absolute;
z-index: 1;
}
</style>
</head>
<body>
<div class="input-container">
<input id="repaint" type="button" value="重绘">
<input id="zero" type="button" value="清零">
<input id="save" type="button" value="保存">
</div>
<div id="container"></div>
</body>
</html>接下来是JavaScript核心逻辑部分。
var boom = {
init: function (center, len, container, type) {
this.len = len || 20; // 烟花节点个数
this.maxR = 100; // 最大半径
this.speed = 1500; // 速度
this.divs = []; // 存放烟花节点
this.center = center; // 圆心
this.type = type; // 类型
this.container = container; // 容器
this.paint();
},
getRanR: function (a, b) { // 得到随机数
return Math.floor(Math.random() * (b - a + 1 )+ a);
},
// 画出烟花节点所在点，以及保存去往点信息
// 圆心， 半径， 容器， 类型
paint: function () {
var that = this;
var center = that.center.slice(),
len = that.len,
container = that.container,
type = that.type,
dd = Math.PI / 180,
temp = 360 / len;
for (var i= 0; i < len; i++) {
var div = document.createElement('div');
var deg = i * temp; // 当前轨迹所在的角度值
var cc = []; // 节点的结束点
var tr = that.getRanR(0, that.maxR); // 半径
var left = 0; // 烟花节点所在的位置
var topLen = 0; // 烟花节点所在的位置
var xCenter = center[0],
yCenter = center[1];
if (type) { // 当类型为真时，整个烟花效果就是向外扩张
left = xCenter; // 为假时则是向内收缩，本质一样都是拿到开始点和结束点
topLen = yCenter; // 只是将开始和结束换了个位置
cc = [xCenter + Math.cos(deg * dd) * tr, yCenter + Math.sin(deg * dd) * tr];
} else {
left = xCenter + Math.cos(deg * dd) * tr;
topLen = yCenter + Math.sin(deg * dd) * tr;
cc = [xCenter, yCenter];
}
div.className = 'boom-div';
div.style.left = left + 'px';
div.style.top = topLen + 'px';
div.data = {
left: cc[0], // 节点的结束点
top: cc[1], // 节点的结束点
}
that.divs.push(div);
container.appendChild(div);
}
// 使节点运动起来
that.move();
},
// 运动
move: function () {
var that = this;
var len = that.len,
container = that.container,
divLen = that.divs.length;
for (var i = 0; i < divLen; i++) {
var div = that.divs[i];
$(div).animate({
left: div.data.left,
top: div.data.top,
opacity: 0,
}, that.speed, "linear", function() {
// 运动完结后删除节点
this.parentNode.removeChild(this);
});
}
}
}关于特效的控制逻辑。
var container = $('#container')[0];
var arr = []; // 存放鼠标点击位置
var iCount = -1;
$(container).on('mousedown', function(e) {
iCount++;
e = e || window.event;
boom.init([e.clientX, e.clientY], 20,container, 1)
arr[iCount] = []; // 每点击一次，增加一个二位数组
$(container).on('mousemove', function(e) {
e = e || window.event;
boom.init([e.clientX, e.clientY], 20, container, 1)
arr[iCount].push([e.clientX, e.clientY]) // 鼠标每移动一次，添加鼠标位置
})
$(container).on('mouseup', function() {
$(container).off('mousemove')
})
});
// 重绘
$('#repaint').click(function() {
// console.log(arr)
if( !arr.length ){
return;
}
var tempArr= [];
// 将所有点取出来，转换为二维数组
for(var i = 0; i < arr.length; i++){
for(var j = 0; j< arr[i].length; j++){
tempArr.push(arr[i][j])
}
}
var count = 0;
var timmer = setInterval(function(){
if( ++ count >= tempArr.length){
clearInterval(timmer)
}
boom.init(tempArr[count],20,container,1)
},16)
});
$('#zero').click(function(){
iCount=-1;
arr=[]
});烟花节点可以使用背景图片替代，例如小爱心或五角星等图形，只需适当调整图片大小即可。
此外，还推荐以下更多JavaScript精彩特效供参考：
JavaScript菜单特效大全
JavaScript仿QQ特效汇总
JavaScript时钟特效汇总
以上就是本文的全部内容，希望这些内容能对各位的学习有所帮助，也欢迎大家继续支持本站。
什么时候该用JS构造器：与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选？场景与方法总结
2026-11-05 14:41:02
p5.js 中 setup() 和 draw() 函数的执行机制详解
2026-11-05 12:32:38