文章目录

• 【HTML+CSS+JavaScript】实现鼠标点击烟花效果（爆炸型、心型、圆形）
• • 一. 效果图
  • 二. 鼠标点击烟花效果 - 心型实现代码
  • • (1) HTML部分代码
    • (2) CSS部分代码
    • (3) 内部的JavaScript部分代码
  • 三. 鼠标点击烟花效果 - 圆型实现代码
  • • (1) HTML部分代码
    • (2) CSS部分代码
    • (3) 内部的JavaScript部分代码
  • 四. 鼠标点击烟花效果 - 爆炸型实现代码
  • • (1) HTML部分代码
    • (2) CSS部分代码
    • (3) 内部的JavaScript部分代码
  • 五. 共同引用的JavaScript部分代码
  • 六. 完整的代码和图片获取

【HTML+CSS+JavaScript】实现鼠标点击烟花效果（爆炸型、心型、圆形）

本文主要讲解三种烟花效果（爆炸型、心型、圆形），文章末尾附有完整的代码和图片获取链接。

一. 效果图

效果图(一) - 心型：

效果图(二) - 圆型：

效果图(三) - 爆炸型：

二. 鼠标点击烟花效果 - 心型实现代码

(1) HTML部分代码

(2) CSS部分代码

* {padding: 0px;margin: 0px;
}body {background: #000;width: 100%;height: 100%;overflow: hidden;
}

(3) 内部的JavaScript部分代码

//this绑定的属性可以在整个构造函数内部都可以使用，而变量只能在函数内部使用。
function Fireworks(x, y) { //x,y鼠标的位置this.x = x;this.y = y;var that = this;//1.创建烟花。this.ceratefirework = function() {this.firework = document.createElement('div'); //整个构造函数内部都可以使用this.firework.style.cssText = `width:5px;height:5px;background:#fff;position:absolute;left:${this.x}px;top:${document.documentElement.clientHeight}px;`;document.body.appendChild(this.firework);this.fireworkmove();};//2.烟花运动和消失this.fireworkmove = function() {buffermove(this.firework, {top: this.y}, function() {document.body.removeChild(that.firework); //烟花消失，碎片产生that.fireworkfragment();});};//3.创建烟花的碎片this.fireworkfragment = function() {var num = this.ranNum(30, 60); //盒子的个数this.perRadio = 2 * Math.PI / num; //弧度for (var i = 0; i < num; i++) {this.fragment = document.createElement('div');this.fragment.style.cssText = `width:5px;height:5px;background:rgb(${this.ranNum(0, 255)},${this.ranNum(0, 255)},${this.ranNum(0, 255)});position:absolute;left:${this.x}px;top:${this.y}px;`;document.body.appendChild(this.fragment);this.fireworkboom(this.fragment, i); //将当前创建的碎片传过去，方便运动和删除}}//4.碎片运动this.fireworkboom = function(obj, i) { //obj:创建的碎片var r = 0.1;obj.timer = setInterval(function() { //一个盒子运动r += 0.4;if (r >= 10) {clearInterval(obj.timer);document.body.removeChild(obj);}obj.style.left = that.x + 16 * Math.pow(Math.sin(that.perRadio * i), 3) * r + 'px';obj.style.top = that.y - (13 * Math.cos(that.perRadio * i) - 5 * Math.cos(2 * that.perRadio * i) - 2 * Math.cos(3 * that.perRadio * i) - Math.cos(4 * that.perRadio * i)) * r + 'px';}, 20);}//随机方法this.ranNum = function(min, max) {return Math.round(Math.random() * (max - min)) + min;};
}
document.onclick = function(ev) {var ev = ev || window.event;new Fireworks(ev.clientX, ev.clientY).ceratefirework();
}

三. 鼠标点击烟花效果 - 圆型实现代码

(1) HTML部分代码

(2) CSS部分代码

* {padding: 0px;margin: 0px;
}body {background: #000;width: 100%;height: 100%;overflow: hidden;
}

(3) 内部的JavaScript部分代码

//this绑定的属性可以在整个构造函数内部都可以使用，而变量只能在函数内部使用。
function Fireworks(x, y) { //x,y鼠标的位置this.x = x;this.y = y;var that = this;//1.创建烟花。this.ceratefirework = function() {this.firework = document.createElement('div'); //整个构造函数内部都可以使用this.firework.style.cssText = `width:5px;height:5px;background:#fff;position:absolute;left:${this.x}px;top:${document.documentElement.clientHeight}px;`;document.body.appendChild(this.firework);this.fireworkmove();};//2.烟花运动和消失this.fireworkmove = function() {var that = this;buffermove(this.firework, {top: this.y}, function() {document.body.removeChild(that.firework); //烟花消失，碎片产生that.fireworkfragment();});};//3.创建烟花的碎片this.fireworkfragment = function() {var num = this.ranNum(30, 60); //盒子的个数this.perRadio = 2 * Math.PI / num; //弧度for (var i = 0; i < num; i++) {this.fragment = document.createElement('div');this.fragment.style.cssText = `width:5px;height:5px;background:rgb(${this.ranNum(0, 255)},${this.ranNum(0, 255)},${this.ranNum(0, 255)});position:absolute;left:${this.x}px;top:${this.y}px;`;document.body.appendChild(this.fragment);this.fireworkboom(this.fragment, i); //将当前创建的碎片传过去，方便运动和删除}}//4.碎片运动this.fireworkboom = function(obj, i) { //obj:创建的碎片var r = 10;obj.timer = setInterval(function() { //一个盒子运动r += 4;if (r >= 200) {clearInterval(obj.timer);document.body.removeChild(obj);}obj.style.left = that.x + Math.sin(that.perRadio * i) * r + 'px';obj.style.top = that.y + Math.cos(that.perRadio * i) * r + 'px';}, 20);}//随机方法this.ranNum = function(min, max) {return Math.round(Math.random() * (max - min)) + min;};
}
document.onclick = function(ev) {var ev = ev || window.event;new Fireworks(ev.clientX, ev.clientY).ceratefirework();
}

四. 鼠标点击烟花效果 - 爆炸型实现代码

(1) HTML部分代码

(2) CSS部分代码

* {padding: 0px;margin: 0px;
}body {background: #000;width: 100%;height: 100%;overflow: hidden;
}

(3) 内部的JavaScript部分代码

//this绑定的属性可以在整个构造函数内部都可以使用，而变量只能在函数内部使用。
function Fireworks(x, y) { //x,y鼠标的位置this.x = x;this.y = y;var that = this;//1.创建烟花。this.ceratefirework = function() {this.firework = document.createElement('div'); //整个构造函数内部都可以使用this.firework.style.cssText = `width:5px;height:5px;background:#fff;position:absolute;left:${this.x}px;top:${document.documentElement.clientHeight}px;`;document.body.appendChild(this.firework);this.fireworkmove();};//2.烟花运动和消失this.fireworkmove = function() {buffermove(this.firework, {top: this.y}, function() {document.body.removeChild(that.firework); //烟花消失，碎片产生that.fireworkfragment();});};//3.创建烟花的碎片this.fireworkfragment = function() {for (var i = 0; i < this.ranNum(30, 60); i++) {this.fragment = document.createElement('div');this.fragment.style.cssText = `width:5px;height:5px;background:rgb(${this.ranNum(0, 255)},${this.ranNum(0, 255)},${this.ranNum(0, 255)});position:absolute;left:${this.x}px;top:${this.y}px;`;document.body.appendChild(this.fragment);this.fireworkboom(this.fragment); //将当前创建的碎片传过去，方便运动和删除}}//4.碎片运动this.fireworkboom = function(obj) { //obj:创建的碎片//设点速度(值不同，正负符号不同)var speedx = parseInt((Math.random() > 0.5 ? '-' : '') + this.ranNum(1, 15));var speedy = parseInt((Math.random() > 0.5 ? '-' : '') + this.ranNum(1, 15));//初始速度var initx = this.x;var inity = this.y;obj.timer = setInterval(function() { //一个盒子运动initx += speedx;inity += speedy;if (inity >= document.documentElement.clientHeight) {clearInterval(obj.timer);document.body.removeChild(obj);}obj.style.left = initx + 'px';obj.style.top = inity + 'px';}, 20);}//随机方法this.ranNum = function(min, max) {return Math.round(Math.random() * (max - min)) + min;};
}document.onclick = function(ev) {var ev = ev || window.event;new Fireworks(ev.clientX, ev.clientY).ceratefirework();
}

五. 共同引用的JavaScript部分代码

function getstyle(obj, attr) {if (window.getComputedStyle) {//标准return getComputedStyle(obj)[attr]} else {//IEreturn obj.currentStyle[attr]}
}function buffermove(obj, json, fn) {var speed = 0clearInterval(obj.timer)obj.timer = setInterval(function() {var bstop = truefor (var attr in json) {var currentvalue = 0if (attr === 'opacity') {currentvalue = Math.round(getstyle(obj, attr) * 100)} else {currentvalue = parseInt(getstyle(obj, attr))}speed = (json[attr] - currentvalue) / 10speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)if (currentvalue != json[attr]) {if (attr === 'opacity') {obj.style.opacity = (currentvalue + speed) / 100obj.style.filter = 'alpha(opacity:' + (currentvalue + speed) + ')'} else {obj.style[attr] = currentvalue + speed + 'px'}bstop = false}}if (bstop) {clearInterval(obj.timer)fn && fn()}}, 5)
}

六. 完整的代码和图片获取

注：细心地网友估计已经发现三种效果的CSS和HTML这两部分的代码其实是一样的。

完整的代码和图片获取方式：

链接：https://pan.baidu.com/s/16kbVr5pOcBqxdCRfs-GJnA?pwd=yhxg 
提取码：yhxg