试着用js做了一个烟花功能，建议不要把数量和速度调太高，否则直接卡死，下面是效果图
可以加小球数量，范围和时间，时间越少速度越快
如果时间变成负数很大概率卡死 图中小点就是将要绽开的烟花
小球的大小也是可控的，这里面都可以设置
var Number = 20 //数量 太大会奔溃
var magnitude = 150 //绽放大小范围 PX
const size = [10, 15] //小球大小范围 PX
const velocity = 1; //停留时间 S
var timeli = 1; //烟花发射速度 S
var sotp = false //停止烟花
var timeList ; //计时器
下面是代码 很多东西可以简写，比较懒就复制粘贴了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>demo</title>
<style>
* {
padding: 0;
margin: 0;
}
.body {
width: 100vw;
height: 100vh;
background-color: #fff;
}
.bondsman {
display: block;
position: absolute;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.div {
transform: translate(-50%, -50%);
position: fixed;
direction: revert;
}
.span {
position: fixed;
width: 2px;
background: #0a0a0a;
height: 10px;
}
#button {
position: fixed;
transform: translate(-50%, -50%);
left: 20%;
bottom: 10%;
border: none;
z-index: 999;
height: 60px;
line-height: 60px;
width: 120px;
}
#button1 {
position: fixed;
transform: translate(-50%, -50%);
left: 40%;
bottom: 10%;
border: none;
z-index: 999;
height: 60px;
line-height: 60px;
width: 120px;
}
#button2 {
position: fixed;
transform: translate(-50%, -50%);
left: 60%;
bottom: 10%;
border: none;
z-index: 999;
height: 60px;
line-height: 60px;
width: 120px;
}
#button3 {
position: fixed;
transform: translate(-50%, -50%);
left: 80%;
bottom: 10%;
border: none;
z-index: 999;
height: 60px;
line-height: 60px;
width: 120px;
}
button:active{ box-shadow: 0px 0px 50px #F60 inset; color:#fff; }
</style>
</head>
<body class="body">
<button onclick="bottom()" id="button">开始</button>
<button onclick="bottom1()" id="button1">加球</button>
<button onclick="bottom2()" id="button2">加范围</button>
<button onclick="bottom3()" id="button3"> 加速</button>
</body>
<script>
// 鼠标点击出现一样的烟花
// var num = 1
// document.body.onclick = function (e) {
// num++
// method(e.clientX, e.clientY,num);
// };
const list = ["red", "yellow", "green", "blue", "orange", "black",
"LightPink","Magenta","DarkSlateBlue","MediumBlue","DoderBlue",
"PaleGodenrod","Salmon","IndianRed","Maroon","DimGray",
"OrangeRed","LightSalmon","Chocolate","DarkGreen","Lime",
"Gold","Magenta","LawnGreen","MediumBlue","RoyalBlue",
"PaleGreen","SeaGreen","Turquoise","DarkTurquoise","DeepSkyBlue",
"Aqua","LightGoldenrodYellow"]; //颜色
var Number = 20 //数量 太大会奔溃
var magnitude = 150 //绽放大小范围 PX
const size = [10, 15] //小球大小范围 PX
const velocity = 1; //停留时间 S
var timeli = 1; //烟花发射速度 S
var sotp = false //停止烟花
var timeList ; //计时器
const buttom = document.getElementById('button')
const buttom1 = document.getElementById('button1')
const buttom2= document.getElementById('button2')
const buttom3 = document.getElementById('button3')
function method(x, y,e) {
const box = document.createElement("div");
box.className = 'div'
box.id = 'item'+e
box.style.left = x + "px";
box.style.top = y + "px";
box.style.width = magnitude + "px"
box.style.height = magnitude + "px"
document.body.appendChild(box);
const div = document.getElementById(`item${e}`)
for (let i = 0; i < Number; i++) {
const index = Math.floor(Math.random() * list.length);
const a = Math.floor(Math.random() * (size[0] - size[1])) + size[1]
const color = list[index];
const bondsman = document.createElement("span");
bondsman.classList.add("bondsman");
bondsman.style.background = color;
bondsman.style.left = '50%';
bondsman.style.top = '50%';
bondsman.style.width = a + 'px';
bondsman.style.height = a + 'px';
bondsman.style.transition = velocity + 's';
bondsman.style.opacity = 0
div.appendChild(bondsman);
}
const time = velocity * 1000
const span = div.getElementsByClassName("bondsman");
setTimeout(() => {
for (let i = 0; i < span.length; i++) {
if (Math.round(Math.random())) {
span[i].style.left = Math.floor(Math.random() * (100 - 0)) + 0 + '%'
span[i].style.top = Math.floor(Math.random() * (100 - 0)) + 0 + '%'
span[i].style.opacity = 1
} else {
span[i].style.left = Math.floor(Math.random() * (100 - 0)) + 0 + '%'
span[i].style.top = Math.floor(Math.random() * (100 - 0)) + 0 + '%'
span[i].style.opacity = 1
}
setTimeout(() => {
span[i].style.opacity = 0;
}, time / 2)
}
}, 100)
setTimeout(() => {
document.body.removeChild(div)
}, time + 100)
}
function wire(e) {
return new Promise((resolve)=>{
const box = document.createElement("div");
box.className = 'span'
box.id = 'index'+e
box.style.left = Math.floor(Math.random() * (90 - 10)) + 10 + '%'
box.style.top = '100%'
box.style.transition = velocity + 's'
box.opacity = 0;
document.body.appendChild(box);
const span = document.getElementById(`index${e}`)
setTimeout(() => {
span.style.top = Math.floor(Math.random() * (50 - 15)) + 15 + '%'
}, 200)
setTimeout(() => {
span.opacity = 1;
}, 300)
setTimeout(() => {
let data = {
span:span,e:e}
resolve(data)
}, velocity * 1000 + 100)
})
}
function bottom(){
sotp = !sotp
if (sotp) {
I = 0
timeList = setInterval(() => {
wire(I++).then((data)=>{
method(data.span.offsetLeft, data.span.offsetTop,data.e)
setTimeout(()=>{
document.body.removeChild(data.span)
},100)
})
}, timeli*1000)
} else {
console.log('清除')
clearInterval(timeList)
}
sotp? buttom.innerText="结束" :buttom.innerHTML="开始"
}
function bottom1(){
Number = Number+10
buttom1.innerText="当前"+Number+'个'
}
function bottom2(){
magnitude = magnitude+50
buttom2.innerText="当前范围"+magnitude +'px'
}
function bottom3(){
console.log(timeli)
timeli = ( timeli*1000-100)/1000
console.log(timeli)
buttom3.innerText="当前速度"+timeli+'s'
}
小白一个，多多关照
