不多解釋,直接上源碼,純手打,不借用任何插件
先來css代碼
<style> * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 700px; background-color: hsl(0, 0%, 0%);
//給body添加一個overflow:hidden;可以讓網頁不顯示滾動條 } .fire { position: absolute; width: 8px; height: 16px; /* width: 30px; height: 30px; */ border-radius: 100%; } .fires { width: 6px; height: 6px; position: absolute; border-radius: 3px; } </style>
html和js直接就放在一起了,因為html就是一個骨架,啥都沒有,所有的元素都是通過js事件添加的
<!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>-煙火-</title>
</head>
<body>
<script>
//返回瀏覽器的寬度和高度
const w = window.screen.availWidth;
const h = window.screen.availHeight;
//動態添加元素
document.addEventListener("mousedown", function (e) {
let div = document.createElement("div");
div.className = 'fire';
document.body.appendChild(div);
let fire = document.getElementsByClassName("fire");
fire[0].style.backgroundColor = color();
//返回當前點擊位置的相對坐標
let clickX = e.clientX;
let clickY = e.clientY;
//設置盒子的初始位置
fire[0].style.top = h + 'px';
fire[0].style.left = clickX + 'px';
// 調用定時器讓盒子移動到當前的被點擊的位置
const speed = 13;
let loop = setInterval(move, 30);
function move() {
if (fire[0].offsetTop - speed >= clickY) {
fire[0].style.top = fire[0].offsetTop - speed + 'px';
} else {
clearInterval(loop);
fire[0].style.top = clickY + 'px';
document.body.innerHTML = '';
//在消失的瞬間調用函數,生成無數的盒子
stars(clickX, clickY);
//給每個div不同的定位屬性
}
}
});
// console.log(color2())
function stars(clickX, clickY) {
let star_num = Math.ceil(Math.random() * 50 + 50);
for (let i = 0; i <= star_num; i++) {
let div = document.createElement("div");
//給當前添加的div設置相同的定位,讓div都在同一個位置
div.style.backgroundColor = color();
div.style.top = clickY + 'px';
div.style.left = clickX + 'px';
//並且給已經生成的div指定類名,也就是樣式
div.className = "fires";
// 每車次生成小div的時候,同時生成無數的隨機數,讓每個div自帶不同的數值
let num1 = Math.random() * 20 - 10;
let num2 = Math.random() * 20 - 10;
// 這里設置不同的自定義屬性是為了給不同的盒子,不同的初始速度,不然使用for循環添加動畫的時候,所有的盒子都會以相同的速度移動,就沒有了煙花的特效
div.setAttribute("speed_X", num1);
div.setAttribute("speed_Y", num2);
document.body.appendChild(div);
}
//創建完所有的小盒子之后,使用新的函數給每個div設定不同的初速度
// 讓每個盒子以不同的初速度移動
speed();
}
function speed() {
// 設置定時器每次運動的時間差
const body = document.querySelector("body");
const runningtime = .3;
const divs = document.querySelectorAll(".fires");
for (let i = 0; i < divs.length; i++) {
const timer = setInterval(function () {
divs[i].style.top = divs[i].offsetTop - divs[i].getAttribute("speed_y") + "px";
divs[i].style.left = divs[i].offsetLeft - divs[i].getAttribute("speed_X") + "px";
divs[i].setAttribute("speed_y", divs[i].getAttribute("speed_y") - runningtime);
// 判斷粒子的位置,如果粒子超出screen,就讓粒子所對應的盒子從body中移除,不然動畫停不下來,就容易造成卡頓
if (divs[i].offsetTop > h || divs[i].offsetLeft > w || divs[i].offsetLeft < 0) {
clearInterval(timer)
body.removeChild(divs[i]);
}
}, 30);
}
}
//動態生成顏色
function color() {
const num1 = Math.floor(Math.random() * 256);
const num2 = Math.floor(Math.random() * 256);
const num3 = Math.floor(Math.random() * 256);
return "rgb(" + num1 + "," + num2 + "," + num3 + ")"
}
function color2() {
return "#" + function (color) {
return new Array(7 - color.length).join("0") + color
}((Math.random() * 0x1000000 << 0).toString(16))
}
//顏色 移位運算符
function color3() {
return "#" + (~~(Math.random() * (1 << 24))).toString(16)
}
</script>
</body>
</html>
附上截圖
然后這是散開之后的截圖了,技術有限,也就只能做成這樣了,畢竟還是學者
結尾提供了幾種大神提供的生成顏色的方式,然而我只會利用隨機數生成255位的顏色,不過親測有效(瞻仰大神);