先看效果，效果是比较简约的：
原理：
效果就是在网页的任何地方鼠标点击后都出现一个小火花~原理并不复杂，就是鼠标点击后生成一个盒子，盒子里放字体图标或文字，然后操控它们的属性变化，最后再让它们消失就好。（还有小火花是我本地的字体图标，可以用自己的方式引入图标，或只写文字也可）
实现：
1.写body属性，目的是这样就能获取点击的位置：
body{
height: 100vh;
}
2.定义一个小火花第一次出现的初始样式：
.tx{
font-family: 'icomoon';
position: absolute;
color: #000;
font-size: 15px;
user-select: none;
}
注意：一些属性用处
font-family: ‘icomoon’; 引入字体图标，也可自己方式引入~
user-select: none; 文本不可选中~
3.js获取body这个元素，绑定点击事件（执行tianJia（e）这个函数）：
var baba = document.querySelector('body');
baba.addEventListener('click',function(e){
tianJia(e);
})
4.建立一个数组，用来存储点击后生成的盒子：
var erZi =[];
5.tianJia（e）函数：
function tianJia(e){
var sunZi = document.createElement('div');
sunZi.className = 'tx';
sunZi.innerHTML = '<span></span>';
baba.appendChild(sunZi);
erZi.push({
el:sunZi,
top: e.clientY - 20,
left: e.clientX - 20,
opacity: 1,
scale: 1,
color: `rgb(${
255*Math.random()},${
255*Math.random()},${
255*Math.random()})`
});
move();
};
注意：一些属性用处
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
color: “…” 返回随机生成的一个颜色~
步骤说明：
var sunZi…添加一个div盒子叫sunZi，
sunZi.className…给它添加 css初始的样式‘tx’，
sunZi.innerHTML… 添加字体图标，也可以写文本，
baba.appendChild(sunZi); …向body里添加这个盒子，
erZi.push({… 向数组添加这个盒子，还有它的距离顶部距离在加上20，距离它左边距离再往上20，（加多少自己看哪个出现的初始位置好而定），透明度为1，scale是transform属性里的代表缩放的值，定义为1；
move();执行函数；
6.move函数：
function move(){
for(var i=0;i<erZi.length;i++)
{
if(erZi[i].opacity<=0){
baba.removeChild(erZi[i].el);
erZi.splice(i,1);
return;
}
erZi[i].top--;
erZi[i].opacity=erZi[i].opacity-0.01;
erZi[i].scale= erZi[i].scale+0.02;
erZi[i].el.style.cssText = `
top: ${
erZi[i].top}px;
left: ${
erZi[i].left}px;
color: ${
erZi[i].color};
opacity: ${
erZi[i].opacity};
transform: scale(${
erZi[i].scale});`
}
window.requestAnimationFrame(move);
}
注意：一些属性用处
erZi.splice(i,1);方法可删除从 index 处开始的零个或多个元素，
window.requestAnimationFrame(); //自带的，为请求动画帧，以屏幕刷新为准，一般是每秒60帧，每刷新会自动调用一次move。
步骤说明：
for(var i=0;i<erZi.length;i++)…遍历数组，看里面有几个盒子，目的改他们的样式；
if(erZi[i].opacity<=0){…}判断盒子（小火花）的透明度为0了吗，就是消失没，消失了就body删除掉前面创建的节点，删除数组里的盒子；
erZi[i].top–; 让他慢慢向上走；
erZi[i].opacity…慢慢变透明直到0，
erZi[i].scale…慢慢变大，
（上面这些改变数值是多少可以自己调），
erZi[i].el.style.cssText…就是添加css样式了；
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?wr5es');
src: url('fonts/icomoon.eot?wr5es#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?wr5es') format('truetype'),
url('fonts/icomoon.woff?wr5es') format('woff'),
url('fonts/icomoon.svg?wr5es#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
/* 上面是我引入我的字体图标库 */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
}
.tx{
font-family: 'icomoon';
position: absolute;
color: #000;
font-size: 15px;
user-select: none;
}
</style>
<body>
<script>
var baba = document.querySelector('body');
baba.addEventListener('click',function(e){
tianJia(e);
})
var erZi =[];
function tianJia(e){
var sunZi = document.createElement('div');
sunZi.className = 'tx';
sunZi.innerHTML = '<span></span>';
baba.appendChild(sunZi);
erZi.push({
el:sunZi,
top: e.clientY - 20,
left: e.clientX - 20,
opacity: 1,
scale: 1,
color: `rgb(${
255*Math.random()},${
255*Math.random()},${
255*Math.random()})`
});
move();
};
function move(){
for(var i=0;i<erZi.length;i++)
{
if(erZi[i].opacity<=0){
baba.removeChild(erZi[i].el);
erZi.splice(i,1);
return;
}
erZi[i].top--;
erZi[i].opacity=erZi[i].opacity-0.01;
erZi[i].scale= erZi[i].scale+0.02;
erZi[i].el.style.cssText = `
top: ${
erZi[i].top}px;
left: ${
erZi[i].left}px;
color: ${
erZi[i].color};
opacity: ${
erZi[i].opacity};
transform: scale(${
erZi[i].scale});`
}
window.requestAnimationFrame(move);
}
</script>
</body>
</html>
总结：
哈哈哈，
更多：
炫彩流光按钮~