Javascript 实现鼠标点击网页爆闪特效

function clickEffect(body) {
let t, e, i, n, s, o, d = [],
l = !1,
h = 0;
const r = ["#F27C91", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"],
a = document.createElement("canvas");
body.appendChild(a), a.setAttribute("style", "width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;");
const c = document.createElement("span");

function u() {
a.width = 2 * window.innerWidth, a.height = 2 * window.innerHeight, a.style.width = window.innerWidth + "px", a.style.height = window.innerHeight + "px", o.scale(2, 2), e = a.width = window.innerWidth, i = a.height = window.innerHeight, n = {
x: e / 2,
y: i / 2
}, s = {
x: e / 2,
y: i / 2
}
}
c.classList.add("pointer"), body.appendChild(c), a.getContext && window.addEventListener ? (o = a.getContext("2d"), u(), window.addEventListener("resize", u, !1), function t() {
o.fillStyle = "rgba(255, 255, 255, 0)";
o.clearRect(0, 0, a.width, a.height);
for (let t = 0; t < d.length; t++) {
let e = d[t];
e.r < 0 || (o.fillStyle = e.color, o.beginPath(), o.arc(e.x, e.y, e.r, 0, 2 * Math.PI, !1), o.fill(), e.update()) } 1 == l ? h += .2 : !l && h >= 0 && (h -= .4);
! function() {
for (let t = 0; t < d.length; t++) {
let n = d[t];
(n.x + n.r < 0 || n.x - n.r > e || n.y + n.r < 0 || n.y - n.r > i || n.r < 0) && d.splice(t, 1)
}
}();
requestAnimationFrame(t)
}(), window.addEventListener("mousedown", function(e) {
m(p(10, 20), e.clientX, e.clientY), body.classList.add("is-pressed"), t = setTimeout(function() {
body.classList.add("is-longpress"), l = !0
}, 500)
}, !1), window.addEventListener("mouseup", function(e) {
clearInterval(t), 1 == l && (body.classList.remove("is-longpress"), m(p(50 + Math.ceil(h), 100 + Math.ceil(h)), e.clientX, e.clientY), l = !1), body.classList.remove("is-pressed")
}, !1), window.addEventListener("mousemove", function(t) {
let e = t.clientX,
i = t.clientY;
c.style.top = i + "px", c.style.left = e + "px"
}, !1)) : console.log("canvas or addEventListener is unsupported!");
class w {
constructor(t = n.x, e = n.y) {
this.x = t, this.y = e, this.angle = 2 * Math.PI * Math.random(), this.multiplier = 1 == l ? p(14 + h, 15 + h) : p(6, 12), this.vx = (this.multiplier + .5 * Math.random()) * Math.cos(this.angle), this.vy = (this.multiplier + .5 * Math.random()) * Math.sin(this.angle), this.r = p(8, 12) + 3 * Math.random(), this.color = r[Math.floor(Math.random() * r.length)]
}
update() {
this.x += this.vx - s.x, this.y += this.vy - s.y, s.x = -2 / window.innerWidth * Math.sin(this.angle), s.y = -2 / window.innerHeight * Math.cos(this.angle), this.r -= .3, this.vx *= .9, this.vy *= .9
}
}

function m(t = 1, e = n.x, i = n.y) {
for (let n = 0; n < t; n++) d.push(new w(e, i))
}

function p(t, e) {
return Math.floor(Math.random() * e) + t
}
}

clickEffect(body);