鼠标点击烟花爆炸效果

效果预览：预览结果

一、快速使用（引用我创建好的`anime.min.js`文件）

<canvas class="fireworks"style="position: fixed; left: 0px; top: 0px; z-index: 1; pointer-events: none; width: 1440px; height: 451px;"width="2880" height="902"></canvas>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/UniqueYou/myjs@main/anime.min.js"></script>
<script type="text/javascript">"use strict"; function updateCoords(e) { pointerX = (e.clientX || e.touches[0].clientX) - canvasEl.getBoundingClientRect().left, pointerY = e.clientY || e.touches[0].clientY - canvasEl.getBoundingClientRect().top } function setParticuleDirection(e) { var t = anime.random(0, 360) * Math.PI / 180, a = anime.random(50, 180), n = [-1, 1][anime.random(0, 1)] * a; return { x: e.x + n * Math.cos(t), y: e.y + n * Math.sin(t) } } function createParticule(e, t) { var a = {}; return a.x = e, a.y = t, a.color = colors[anime.random(0, colors.length - 1)], a.radius = anime.random(16, 32), a.endPos = setParticuleDirection(a), a.draw = function () { ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.fillStyle = a.color, ctx.fill() }, a } function createCircle(e, t) { var a = {}; return a.x = e, a.y = t, a.color = "#F00", a.radius = 0.1, a.alpha = 0.5, a.lineWidth = 6, a.draw = function () { ctx.globalAlpha = a.alpha, ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.lineWidth = a.lineWidth, ctx.strokeStyle = a.color, ctx.stroke(), ctx.globalAlpha = 1 }, a } function renderParticule(e) { for (var t = 0; t < e.animatables.length; t++) { e.animatables[t].target.draw() } } function animateParticules(e, t) { for (var a = createCircle(e, t), n = [], i = 0; i < numberOfParticules; i++) { n.push(createParticule(e, t)) } anime.timeline().add({ targets: n, x: function (e) { return e.endPos.x }, y: function (e) { return e.endPos.y }, radius: 0.1, duration: anime.random(1200, 1800), easing: "easeOutExpo", update: renderParticule }).add({ targets: a, radius: anime.random(80, 160), lineWidth: 0, alpha: { value: 0, easing: "linear", duration: anime.random(600, 800) }, duration: anime.random(1200, 1800), easing: "easeOutExpo", update: renderParticule, offset: 0 }) } function debounce(e, t) { var a; return function () { var n = this, i = arguments; clearTimeout(a), a = setTimeout(function () { e.apply(n, i) }, t) } } var canvasEl = document.querySelector(".fireworks"); if (canvasEl) { var ctx = canvasEl.getContext("2d"), numberOfParticules = 30, pointerX = 0, pointerY = 0, tap = "mousedown", colors = ["#FF1461", "#18FF92", "#5A87FF", "#FBF38C"], setCanvasSize = debounce(function () { canvasEl.width = 2 * window.innerWidth, canvasEl.height = 2 * window.innerHeight, canvasEl.style.width = window.innerWidth + "px", canvasEl.style.height = window.innerHeight + "px", canvasEl.getContext("2d").scale(2, 2) }, 500), render = anime({ duration: 1 / 0, update: function () { ctx.clearRect(0, 0, canvasEl.width, canvasEl.height) } }); document.addEventListener(tap, function (e) { "sidebar" !== e.target.id && "toggle-sidebar" !== e.target.id && "A" !== e.target.nodeName && "IMG" !== e.target.nodeName && (render.play(), updateCoords(e), animateParticules(pointerX, pointerY)) }, !1), setCanvasSize(), window.addEventListener("resize", setCanvasSize, !1) } "use strict"; function updateCoords(e) { pointerX = (e.clientX || e.touches[0].clientX) - canvasEl.getBoundingClientRect().left, pointerY = e.clientY || e.touches[0].clientY - canvasEl.getBoundingClientRect().top } function setParticuleDirection(e) { var t = anime.random(0, 360) * Math.PI / 180, a = anime.random(50, 180), n = [-1, 1][anime.random(0, 1)] * a; return { x: e.x + n * Math.cos(t), y: e.y + n * Math.sin(t) } } function createParticule(e, t) { var a = {}; return a.x = e, a.y = t, a.color = colors[anime.random(0, colors.length - 1)], a.radius = anime.random(16, 32), a.endPos = setParticuleDirection(a), a.draw = function () { ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.fillStyle = a.color, ctx.fill() }, a } function createCircle(e, t) { var a = {}; return a.x = e, a.y = t, a.color = "#F00", a.radius = 0.1, a.alpha = 0.5, a.lineWidth = 6, a.draw = function () { ctx.globalAlpha = a.alpha, ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.lineWidth = a.lineWidth, ctx.strokeStyle = a.color, ctx.stroke(), ctx.globalAlpha = 1 }, a } function renderParticule(e) { for (var t = 0; t < e.animatables.length; t++) { e.animatables[t].target.draw() } } function animateParticules(e, t) { for (var a = createCircle(e, t), n = [], i = 0; i < numberOfParticules; i++) { n.push(createParticule(e, t)) } anime.timeline().add({ targets: n, x: function (e) { return e.endPos.x }, y: function (e) { return e.endPos.y }, radius: 0.1, duration: anime.random(1200, 1800), easing: "easeOutExpo", update: renderParticule }).add({ targets: a, radius: anime.random(80, 160), lineWidth: 0, alpha: { value: 0, easing: "linear", duration: anime.random(600, 800) }, duration: anime.random(1200, 1800), easing: "easeOutExpo", update: renderParticule, offset: 0 }) } function debounce(e, t) { var a; return function () { var n = this, i = arguments; clearTimeout(a), a = setTimeout(function () { e.apply(n, i) }, t) } } var canvasEl = document.querySelector(".fireworks"); if (canvasEl) { var ctx = canvasEl.getContext("2d"), numberOfParticules = 30, pointerX = 0, pointerY = 0, tap = "mousedown", colors = ["#FF1461", "#18FF92", "#5A87FF", "#FBF38C"], setCanvasSize = debounce(function () { canvasEl.width = 2 * window.innerWidth, canvasEl.height = 2 * window.innerHeight, canvasEl.style.width = window.innerWidth + "px", canvasEl.style.height = window.innerHeight + "px", canvasEl.getContext("2d").scale(2, 2) }, 500), render = anime({ duration: 1 / 0, update: function () { ctx.clearRect(0, 0, canvasEl.width, canvasEl.height) } }); document.addEventListener(tap, function (e) { "sidebar" !== e.target.id && "toggle-sidebar" !== e.target.id && "A" !== e.target.nodeName && "IMG" !== e.target.nodeName && (render.play(), updateCoords(e), animateParticules(pointerX, pointerY)) }, !1), setCanvasSize(), window.addEventListener("resize", setCanvasSize, !1) };
</script>

二、或引用自己的`anime.min.js`文件

创建anime.min.js添加下面内容,可以上传到服务器、github等……
[scode type=“green”]推荐[/scode]

将anime.min.js文件上传到github
使用 jsdelivr cdn加速将 github 文件上传到 jsdelivr 就可以访问了

[scode type=“share”]例如我的 anime.min.js链接[/scode]
https://cdn.jsdelivr.net/gh/UniqueYou/myjs@main/anime.min.js


/*烟花爆炸效果js
*/
var $jscomp = { scope: {} }; $jscomp.defineProperty = "function" == typeof Object.defineProperties ? Object.defineProperty : function (e, r, p) { if (p.get || p.set) throw new TypeError("ES3 does not support getters and setters."); e != Array.prototype && e != Object.prototype && (e[r] = p.value) }; $jscomp.getGlobal = function (e) { return "undefined" != typeof window && window === e ? e : "undefined" != typeof global && null != global ? global : e }; $jscomp.global = $jscomp.getGlobal(this); $jscomp.SYMBOL_PREFIX = "jscomp_symbol_";
$jscomp.initSymbol = function () { $jscomp.initSymbol = function () { }; $jscomp.global.Symbol || ($jscomp.global.Symbol = $jscomp.Symbol) }; $jscomp.symbolCounter_ = 0; $jscomp.Symbol = function (e) { return $jscomp.SYMBOL_PREFIX + (e || "") + $jscomp.symbolCounter_++ };
$jscomp.initSymbolIterator = function () { $jscomp.initSymbol(); var e = $jscomp.global.Symbol.iterator; e || (e = $jscomp.global.Symbol.iterator = $jscomp.global.Symbol("iterator")); "function" != typeof Array.prototype[e] && $jscomp.defineProperty(Array.prototype, e, { configurable: !0, writable: !0, value: function () { return $jscomp.arrayIterator(this) } }); $jscomp.initSymbolIterator = function () { } }; $jscomp.arrayIterator = function (e) { var r = 0; return $jscomp.iteratorPrototype(function () { return r < e.length ? { done: !1, value: e[r++] } : { done: !0 } }) };
$jscomp.iteratorPrototype = function (e) { $jscomp.initSymbolIterator(); e = { next: e }; e[$jscomp.global.Symbol.iterator] = function () { return this }; return e }; $jscomp.array = $jscomp.array || {}; $jscomp.iteratorFromArray = function (e, r) { $jscomp.initSymbolIterator(); e instanceof String && (e += ""); var p = 0, m = { next: function () { if (p < e.length) { var u = p++; return { value: r(u, e[u]), done: !1 } } m.next = function () { return { done: !0, value: void 0 } }; return m.next() } }; m[Symbol.iterator] = function () { return m }; return m };
$jscomp.polyfill = function (e, r, p, m) { if (r) { p = $jscomp.global; e = e.split("."); for (m = 0; m < e.length - 1; m++) { var u = e[m]; u in p || (p[u] = {}); p = p[u] } e = e[e.length - 1]; m = p[e]; r = r(m); r != m && null != r && $jscomp.defineProperty(p, e, { configurable: !0, writable: !0, value: r }) } }; $jscomp.polyfill("Array.prototype.keys", function (e) { return e ? e : function () { return $jscomp.iteratorFromArray(this, function (e) { return e }) } }, "es6-impl", "es3"); var $jscomp$this = this;
(function (e, r) { "function" === typeof define && define.amd ? define([], r) : "object" === typeof module && module.exports ? module.exports = r() : e.anime = r() })(this, function () {function e(a) { if (!h.col(a)) try { return document.querySelectorAll(a) } catch (c) { } } function r(a, c) { for (var d = a.length, b = 2 <= arguments.length ? arguments[1] : void 0, f = [], n = 0; n < d; n++)if (n in a) { var k = a[n]; c.call(b, k, n, a) && f.push(k) } return f } function p(a) { return a.reduce(function (a, d) { return a.concat(h.arr(d) ? p(d) : d) }, []) } function m(a) {if (h.arr(a)) return a;h.str(a) && (a = e(a) || a); return a instanceof NodeList || a instanceof HTMLCollection ? [].slice.call(a) : [a]} function u(a, c) { return a.some(function (a) { return a === c }) } function C(a) { var c = {}, d; for (d in a) c[d] = a[d]; return c } function D(a, c) { var d = C(a), b; for (b in a) d[b] = c.hasOwnProperty(b) ? c[b] : a[b]; return d } function z(a, c) { var d = C(a), b; for (b in c) d[b] = h.und(a[b]) ? c[b] : a[b]; return d } function T(a) {a = a.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, function (a, c, d, k) { return c + c + d + d + k + k }); var c = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);a = parseInt(c[1], 16); var d = parseInt(c[2], 16), c = parseInt(c[3], 16); return "rgba(" + a + "," + d + "," + c + ",1)"} function U(a) {function c(a, c, b) { 0 > b && (b += 1); 1 < b && --b; return b < 1 / 6 ? a + 6 * (c - a) * b : .5 > b ? c : b < 2 / 3 ? a + (c - a) * (2 / 3 - b) * 6 : a } var d = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(a) || /hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(a); a = parseInt(d[1]) / 360; var b = parseInt(d[2]) / 100, f = parseInt(d[3]) / 100, d = d[4] || 1; if (0 == b) f = b = a = f; else { var n = .5 > f ? f * (1 + b) : f + b - f * b, k = 2 * f - n, f = c(k, n, a + 1 / 3), b = c(k, n, a); a = c(k, n, a - 1 / 3) } return "rgba(" +255 * f + "," + 255 * b + "," + 255 * a + "," + d + ")"} function y(a) { if (a = /([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(a)) return a[2] } function V(a) { if (-1 < a.indexOf("translate") || "perspective" === a) return "px"; if (-1 < a.indexOf("rotate") || -1 < a.indexOf("skew")) return "deg" } function I(a, c) { return h.fnc(a) ? a(c.target, c.id, c.total) : a } function E(a, c) { if (c in a.style) return getComputedStyle(a).getPropertyValue(c.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()) || "0" } function J(a, c) {if (h.dom(a) &&u(W, c)) return "transform"; if (h.dom(a) && (a.getAttribute(c) || h.svg(a) && a[c])) return "attribute"; if (h.dom(a) && "transform" !== c && E(a, c)) return "css"; if (null != a[c]) return "object"} function X(a, c) { var d = V(c), d = -1 < c.indexOf("scale") ? 1 : 0 + d; a = a.style.transform; if (!a) return d; for (var b = [], f = [], n = [], k = /(\w+)\((.+?)\)/g; b = k.exec(a);)f.push(b[1]), n.push(b[2]); a = r(n, function (a, b) { return f[b] === c }); return a.length ? a[0] : d } function K(a, c) {switch (J(a, c)) { case "transform": return X(a, c); case "css": return E(a, c); case "attribute": return a.getAttribute(c) }return a[c] ||0} function L(a, c) { var d = /^(\*=|\+=|-=)/.exec(a); if (!d) return a; var b = y(a) || 0; c = parseFloat(c); a = parseFloat(a.replace(d[0], "")); switch (d[0][0]) { case "+": return c + a + b; case "-": return c - a + b; case "*": return c * a + b } } function F(a, c) { return Math.sqrt(Math.pow(c.x - a.x, 2) + Math.pow(c.y - a.y, 2)) } function M(a) { a = a.points; for (var c = 0, d, b = 0; b < a.numberOfItems; b++) { var f = a.getItem(b); 0 < b && (c += F(d, f)); d = f } return c } function N(a) {if (a.getTotalLength) return a.getTotalLength(); switch (a.tagName.toLowerCase()) {case "circle": return 2 *Math.PI * a.getAttribute("r"); case "rect": return 2 * a.getAttribute("width") + 2 * a.getAttribute("height"); case "line": return F({ x: a.getAttribute("x1"), y: a.getAttribute("y1") }, { x: a.getAttribute("x2"), y: a.getAttribute("y2") }); case "polyline": return M(a); case "polygon": var c = a.points; return M(a) + F(c.getItem(c.numberOfItems - 1), c.getItem(0))}} function Y(a, c) {function d(b) { b = void 0 === b ? 0 : b; return a.el.getPointAtLength(1 <= c + b ? c + b : 0) } var b = d(), f = d(-1), n = d(1); switch (a.property) {case "x": return b.x; case "y": return b.y;case "angle": return 180 * Math.atan2(n.y - f.y, n.x - f.x) / Math.PI}} function O(a, c) { var d = /-?\d*\.?\d+/g, b; b = h.pth(a) ? a.totalLength : a; if (h.col(b)) if (h.rgb(b)) { var f = /rgb\((\d+,\s*[\d]+,\s*[\d]+)\)/g.exec(b); b = f ? "rgba(" + f[1] + ",1)" : b } else b = h.hex(b) ? T(b) : h.hsl(b) ? U(b) : void 0; else f = (f = y(b)) ? b.substr(0, b.length - f.length) : b, b = c && !/\s/g.test(b) ? f + c : f; b += ""; return { original: b, numbers: b.match(d) ? b.match(d).map(Number) : [0], strings: h.str(a) || c ? b.split(d) : [] } } function P(a) {a = a ? p(h.arr(a) ? a.map(m) : m(a)) : []; return r(a,function (a, d, b) { return b.indexOf(a) === d })} function Z(a) { var c = P(a); return c.map(function (a, b) { return { target: a, id: b, total: c.length } }) } function aa(a, c) { var d = C(c); if (h.arr(a)) { var b = a.length; 2 !== b || h.obj(a[0]) ? h.fnc(c.duration) || (d.duration = c.duration / b) : a = { value: a } } return m(a).map(function (a, b) { b = b ? 0 : c.delay; a = h.obj(a) && !h.pth(a) ? a : { value: a }; h.und(a.delay) && (a.delay = b); return a }).map(function (a) { return z(a, d) }) } function ba(a, c) {var d = {}, b; for (b in a) {var f = I(a[b], c); h.arr(f) && (f = f.map(function (a) {return I(a,c)}), 1 === f.length && (f = f[0])); d[b] = f} d.duration = parseFloat(d.duration); d.delay = parseFloat(d.delay); return d} function ca(a) { return h.arr(a) ? A.apply(this, a) : Q[a] } function da(a, c) {var d; return a.tweens.map(function (b) {b = ba(b, c); var f = b.value, e = K(c.target, a.name), k = d ? d.to.original : e, k = h.arr(f) ? f[0] : k, w = L(h.arr(f) ? f[1] : f, k), e = y(w) || y(k) || y(e); b.from = O(k, e); b.to = O(w, e); b.start = d ? d.end : a.offset; b.end = b.start + b.delay + b.duration; b.easing = ca(b.easing); b.elasticity = (1E3 - Math.min(Math.max(b.elasticity, 1), 999)) /1E3; b.isPath = h.pth(f); b.isColor = h.col(b.from.original); b.isColor && (b.round = 1); return d = b})} function ea(a, c) { return r(p(a.map(function (a) { return c.map(function (b) { var c = J(a.target, b.name); if (c) { var d = da(b, a); b = { type: c, property: b.name, animatable: a, tweens: d, duration: d[d.length - 1].end, delay: d[0].delay } } else b = void 0; return b }) })), function (a) { return !h.und(a) }) } function R(a, c, d, b) {var f = "delay" === a; return c.length ? (f ? Math.min : Math.max).apply(Math, c.map(function (b) { return b[a] })) : f ? b.delay : d.offset + b.delay +b.duration} function fa(a) { var c = D(ga, a), d = D(S, a), b = Z(a.targets), f = [], e = z(c, d), k; for (k in a) e.hasOwnProperty(k) || "targets" === k || f.push({ name: k, offset: e.offset, tweens: aa(a[k], d) }); a = ea(b, f); return z(c, { children: [], animatables: b, animations: a, duration: R("duration", a, c, d), delay: R("delay", a, c, d) }) } function q(a) {function c() { return window.Promise && new Promise(function (a) { return p = a }) } function d(a) { return g.reversed ? g.duration - a : a } function b(a) {for (var b = 0, c = {}, d = g.animations, f = d.length; b < f;) {var e = d[b],k = e.animatable, h = e.tweens, n = h.length - 1, l = h[n]; n && (l = r(h, function (b) { return a < b.end })[0] || l); for (var h = Math.min(Math.max(a - l.start - l.delay, 0), l.duration) / l.duration, w = isNaN(h) ? 1 : l.easing(h, l.elasticity), h = l.to.strings, p = l.round, n = [], m = void 0, m = l.to.numbers.length, t = 0; t < m; t++) { var x = void 0, x = l.to.numbers[t], q = l.from.numbers[t], x = l.isPath ? Y(l.value, w * x) : q + w * (x - q); p && (l.isColor && 2 < t || (x = Math.round(x * p) / p)); n.push(x) } if (l = h.length) for (m = h[0], w = 0; w < l; w++)p = h[w + 1], t = n[w], isNaN(t) || (m = p ? m + (t + p) : m + (t + " "));else m = n[0]; ha[e.type](k.target, e.property, m, c, k.id); e.currentValue = m; b++} if (b = Object.keys(c).length) for (d = 0; d < b; d++)H || (H = E(document.body, "transform") ? "transform" : "-webkit-transform"), g.animatables[d].target.style[H] = c[d].join(" "); g.currentTime = a; g.progress = a / g.duration * 100} function f(a) { if (g[a]) g[a](g) } function e() { g.remaining && !0 !== g.remaining && g.remaining-- } function k(a) {var k = g.duration, n = g.offset, w = n + g.delay, r = g.currentTime, x = g.reversed, q = d(a); if (g.children.length) {var u = g.children, v = u.length;if (q >= g.currentTime) for (var G = 0; G < v; G++)u[G].seek(q); else for (; v--;)u[v].seek(q)} if (q >= w || !k) g.began || (g.began = !0, f("begin")), f("run"); if (q > n && q < k) b(q); else if (q <= n && 0 !== r && (b(0), x && e()), q >= k && r !== k || !k) b(k), x || e(); f("update"); a >= k && (g.remaining ? (t = h, "alternate" === g.direction && (g.reversed = !g.reversed)) : (g.pause(), g.completed || (g.completed = !0, f("complete"), "Promise" in window && (p(), m = c()))), l = 0)} a = void 0 === a ? {} : a; var h, t, l = 0, p = null, m = c(), g = fa(a); g.reset = function () {var a = g.direction, c = g.loop; g.currentTime =0; g.progress = 0; g.paused = !0; g.began = !1; g.completed = !1; g.reversed = "reverse" === a; g.remaining = "alternate" === a && 1 === c ? 2 : c; b(0); for (a = g.children.length; a--;)g.children[a].reset()}; g.tick = function (a) { h = a; t || (t = h); k((l + h - t) * q.speed) }; g.seek = function (a) { k(d(a)) }; g.pause = function () { var a = v.indexOf(g); -1 < a && v.splice(a, 1); g.paused = !0 }; g.play = function () { g.paused && (g.paused = !1, t = 0, l = d(g.currentTime), v.push(g), B || ia()) }; g.reverse = function () { g.reversed = !g.reversed; t = 0; l = d(g.currentTime) }; g.restart = function () {g.pause();g.reset(); g.play()}; g.finished = m; g.reset(); g.autoplay && g.play(); return g} var ga = { update: void 0, begin: void 0, run: void 0, complete: void 0, loop: 1, direction: "normal", autoplay: !0, offset: 0 }, S = { duration: 1E3, delay: 0, easing: "easeOutElastic", elasticity: 500, round: 0 }, W = "translateX translateY translateZ rotate rotateX rotateY rotateZ scale scaleX scaleY scaleZ skewX skewY perspective".split(" "), H, h = {arr: function (a) { return Array.isArray(a) }, obj: function (a) { return -1 < Object.prototype.toString.call(a).indexOf("Object") },pth: function (a) { return h.obj(a) && a.hasOwnProperty("totalLength") }, svg: function (a) { return a instanceof SVGElement }, dom: function (a) { return a.nodeType || h.svg(a) }, str: function (a) { return "string" === typeof a }, fnc: function (a) { return "function" === typeof a }, und: function (a) { return "undefined" === typeof a }, hex: function (a) { return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a) }, rgb: function (a) { return /^rgb/.test(a) }, hsl: function (a) { return /^hsl/.test(a) }, col: function (a) { return h.hex(a) || h.rgb(a) || h.hsl(a) }}, A = function () {function a(a,d, b) { return (((1 - 3 * b + 3 * d) * a + (3 * b - 6 * d)) * a + 3 * d) * a } return function (c, d, b, f) {if (0 <= c && 1 >= c && 0 <= b && 1 >= b) {var e = new Float32Array(11); if (c !== d || b !== f) for (var k = 0; 11 > k; ++k)e[k] = a(.1 * k, c, b); return function (k) {if (c === d && b === f) return k; if (0 === k) return 0; if (1 === k) return 1; for (var h = 0, l = 1; 10 !== l && e[l] <= k; ++l)h += .1; --l; var l = h + (k - e[l]) / (e[l + 1] - e[l]) * .1, n = 3 * (1 - 3 * b + 3 * c) * l * l + 2 * (3 * b - 6 * c) * l + 3 * c; if (.001 <= n) { for (h = 0; 4 > h; ++h) { n = 3 * (1 - 3 * b + 3 * c) * l * l + 2 * (3 * b - 6 * c) * l + 3 * c; if (0 === n) break; var m = a(l, c, b) - k, l = l - m / n } k = l } else if (0 ===n) k = l; else { var l = h, h = h + .1, g = 0; do m = l + (h - l) / 2, n = a(m, c, b) - k, 0 < n ? h = m : l = m; while (1e-7 < Math.abs(n) && 10 > ++g); k = m } return a(k, d, f)}}}}(), Q = function () {function a(a, b) { return 0 === a || 1 === a ? a : -Math.pow(2, 10 * (a - 1)) * Math.sin(2 * (a - 1 - b / (2 * Math.PI) * Math.asin(1)) * Math.PI / b) } var c = "Quad Cubic Quart Quint Sine Expo Circ Back Elastic".split(" "), d = {In: [[.55, .085, .68, .53], [.55, .055, .675, .19], [.895, .03, .685, .22], [.755, .05, .855, .06], [.47, 0, .745, .715], [.95, .05, .795, .035], [.6, .04, .98, .335], [.6, -.28, .735, .045], a], Out: [[.25,.46, .45, .94], [.215, .61, .355, 1], [.165, .84, .44, 1], [.23, 1, .32, 1], [.39, .575, .565, 1], [.19, 1, .22, 1], [.075, .82, .165, 1], [.175, .885, .32, 1.275], function (b, c) { return 1 - a(1 - b, c) }], InOut: [[.455, .03, .515, .955], [.645, .045, .355, 1], [.77, 0, .175, 1], [.86, 0, .07, 1], [.445, .05, .55, .95], [1, 0, 0, 1], [.785, .135, .15, .86], [.68, -.55, .265, 1.55], function (b, c) { return .5 > b ? a(2 * b, c) / 2 : 1 - a(-2 * b + 2, c) / 2 }]}, b = { linear: A(.25, .25, .75, .75) }, f = {}, e; for (e in d) f.type = e, d[f.type].forEach(function (a) {return function (d, f) {b["ease" + a.type + c[f]] = h.fnc(d) ?d : A.apply($jscomp$this, d)}}(f)), f = { type: f.type }; return b}(), ha = { css: function (a, c, d) { return a.style[c] = d }, attribute: function (a, c, d) { return a.setAttribute(c, d) }, object: function (a, c, d) { return a[c] = d }, transform: function (a, c, d, b, f) { b[f] || (b[f] = []); b[f].push(c + "(" + d + ")") } }, v = [], B = 0, ia = function () { function a() { B = requestAnimationFrame(c) } function c(c) { var b = v.length; if (b) { for (var d = 0; d < b;)v[d] && v[d].tick(c), d++; a() } else cancelAnimationFrame(B), B = 0 } return a }(); q.version = "2.2.0"; q.speed = 1; q.running = v; q.remove =function (a) { a = P(a); for (var c = v.length; c--;)for (var d = v[c], b = d.animations, f = b.length; f--;)u(a, b[f].animatable.target) && (b.splice(f, 1), b.length || d.pause()) }; q.getValue = K; q.path = function (a, c) { var d = h.str(a) ? e(a)[0] : a, b = c || 100; return function (a) { return { el: d, property: a, totalLength: N(d) * (b / 100) } } }; q.setDashoffset = function (a) { var c = N(a); a.setAttribute("stroke-dasharray", c); return c }; q.bezier = A; q.easings = Q; q.timeline = function (a) {var c = q(a); c.pause(); c.duration = 0; c.add = function (d) {c.children.forEach(function (a) {a.began =!0; a.completed = !0}); m(d).forEach(function (b) { var d = z(b, D(S, a || {})); d.targets = d.targets || a.targets; b = c.duration; var e = d.offset; d.autoplay = !1; d.direction = c.direction; d.offset = h.und(e) ? b : L(e, b); c.began = !0; c.completed = !0; c.seek(d.offset); d = q(d); d.began = !0; d.completed = !0; d.duration > b && (c.duration = d.duration); c.children.push(d) }); c.seek(0); c.reset(); c.autoplay && c.restart(); return c}; return c}; q.random = function (a, c) { return Math.floor(Math.random() * (c - a + 1)) + a }; return q
});

`设置外观`-`开发者设置`-`自定义输出body 尾部的HTML代码`插入代码

[scode type=“blue” size=""]需要修改引用 src="anime.min.js"[/scode]

<canvas class="fireworks"style="position: fixed; left: 0px; top: 0px; z-index: 1; pointer-events: none; width: 1440px; height: 451px;"width="2880" height="902"></canvas>
<script type="text/javascript" src="anime.min.js"></script>
<script type="text/javascript">"use strict"; function updateCoords(e) { pointerX = (e.clientX || e.touches[0].clientX) - canvasEl.getBoundingClientRect().left, pointerY = e.clientY || e.touches[0].clientY - canvasEl.getBoundingClientRect().top } function setParticuleDirection(e) { var t = anime.random(0, 360) * Math.PI / 180, a = anime.random(50, 180), n = [-1, 1][anime.random(0, 1)] * a; return { x: e.x + n * Math.cos(t), y: e.y + n * Math.sin(t) } } function createParticule(e, t) { var a = {}; return a.x = e, a.y = t, a.color = colors[anime.random(0, colors.length - 1)], a.radius = anime.random(16, 32), a.endPos = setParticuleDirection(a), a.draw = function () { ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.fillStyle = a.color, ctx.fill() }, a } function createCircle(e, t) { var a = {}; return a.x = e, a.y = t, a.color = "#F00", a.radius = 0.1, a.alpha = 0.5, a.lineWidth = 6, a.draw = function () { ctx.globalAlpha = a.alpha, ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.lineWidth = a.lineWidth, ctx.strokeStyle = a.color, ctx.stroke(), ctx.globalAlpha = 1 }, a } function renderParticule(e) { for (var t = 0; t < e.animatables.length; t++) { e.animatables[t].target.draw() } } function animateParticules(e, t) { for (var a = createCircle(e, t), n = [], i = 0; i < numberOfParticules; i++) { n.push(createParticule(e, t)) } anime.timeline().add({ targets: n, x: function (e) { return e.endPos.x }, y: function (e) { return e.endPos.y }, radius: 0.1, duration: anime.random(1200, 1800), easing: "easeOutExpo", update: renderParticule }).add({ targets: a, radius: anime.random(80, 160), lineWidth: 0, alpha: { value: 0, easing: "linear", duration: anime.random(600, 800) }, duration: anime.random(1200, 1800), easing: "easeOutExpo", update: renderParticule, offset: 0 }) } function debounce(e, t) { var a; return function () { var n = this, i = arguments; clearTimeout(a), a = setTimeout(function () { e.apply(n, i) }, t) } } var canvasEl = document.querySelector(".fireworks"); if (canvasEl) { var ctx = canvasEl.getContext("2d"), numberOfParticules = 30, pointerX = 0, pointerY = 0, tap = "mousedown", colors = ["#FF1461", "#18FF92", "#5A87FF", "#FBF38C"], setCanvasSize = debounce(function () { canvasEl.width = 2 * window.innerWidth, canvasEl.height = 2 * window.innerHeight, canvasEl.style.width = window.innerWidth + "px", canvasEl.style.height = window.innerHeight + "px", canvasEl.getContext("2d").scale(2, 2) }, 500), render = anime({ duration: 1 / 0, update: function () { ctx.clearRect(0, 0, canvasEl.width, canvasEl.height) } }); document.addEventListener(tap, function (e) { "sidebar" !== e.target.id && "toggle-sidebar" !== e.target.id && "A" !== e.target.nodeName && "IMG" !== e.target.nodeName && (render.play(), updateCoords(e), animateParticules(pointerX, pointerY)) }, !1), setCanvasSize(), window.addEventListener("resize", setCanvasSize, !1) } "use strict"; function updateCoords(e) { pointerX = (e.clientX || e.touches[0].clientX) - canvasEl.getBoundingClientRect().left, pointerY = e.clientY || e.touches[0].clientY - canvasEl.getBoundingClientRect().top } function setParticuleDirection(e) { var t = anime.random(0, 360) * Math.PI / 180, a = anime.random(50, 180), n = [-1, 1][anime.random(0, 1)] * a; return { x: e.x + n * Math.cos(t), y: e.y + n * Math.sin(t) } } function createParticule(e, t) { var a = {}; return a.x = e, a.y = t, a.color = colors[anime.random(0, colors.length - 1)], a.radius = anime.random(16, 32), a.endPos = setParticuleDirection(a), a.draw = function () { ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.fillStyle = a.color, ctx.fill() }, a } function createCircle(e, t) { var a = {}; return a.x = e, a.y = t, a.color = "#F00", a.radius = 0.1, a.alpha = 0.5, a.lineWidth = 6, a.draw = function () { ctx.globalAlpha = a.alpha, ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.lineWidth = a.lineWidth, ctx.strokeStyle = a.color, ctx.stroke(), ctx.globalAlpha = 1 }, a } function renderParticule(e) { for (var t = 0; t < e.animatables.length; t++) { e.animatables[t].target.draw() } } function animateParticules(e, t) { for (var a = createCircle(e, t), n = [], i = 0; i < numberOfParticules; i++) { n.push(createParticule(e, t)) } anime.timeline().add({ targets: n, x: function (e) { return e.endPos.x }, y: function (e) { return e.endPos.y }, radius: 0.1, duration: anime.random(1200, 1800), easing: "easeOutExpo", update: renderParticule }).add({ targets: a, radius: anime.random(80, 160), lineWidth: 0, alpha: { value: 0, easing: "linear", duration: anime.random(600, 800) }, duration: anime.random(1200, 1800), easing: "easeOutExpo", update: renderParticule, offset: 0 }) } function debounce(e, t) { var a; return function () { var n = this, i = arguments; clearTimeout(a), a = setTimeout(function () { e.apply(n, i) }, t) } } var canvasEl = document.querySelector(".fireworks"); if (canvasEl) { var ctx = canvasEl.getContext("2d"), numberOfParticules = 30, pointerX = 0, pointerY = 0, tap = "mousedown", colors = ["#FF1461", "#18FF92", "#5A87FF", "#FBF38C"], setCanvasSize = debounce(function () { canvasEl.width = 2 * window.innerWidth, canvasEl.height = 2 * window.innerHeight, canvasEl.style.width = window.innerWidth + "px", canvasEl.style.height = window.innerHeight + "px", canvasEl.getContext("2d").scale(2, 2) }, 500), render = anime({ duration: 1 / 0, update: function () { ctx.clearRect(0, 0, canvasEl.width, canvasEl.height) } }); document.addEventListener(tap, function (e) { "sidebar" !== e.target.id && "toggle-sidebar" !== e.target.id && "A" !== e.target.nodeName && "IMG" !== e.target.nodeName && (render.play(), updateCoords(e), animateParticules(pointerX, pointerY)) }, !1), setCanvasSize(), window.addEventListener("resize", setCanvasSize, !1) };
</script>

鼠标点击烟花爆炸效果相关推荐

JS实现鼠标点击处烟花爆炸效果
JS实现鼠标点击处烟花爆炸效果(面向对象版) 程序由网上开源"JS实现放烟花效果"代码改编,实现在鼠标点击处出现烟花爆炸效果. 改编前源码link https://github. ...
Unity3D_(Shuriken粒子系统)制作简单的烟花爆炸效果
Unity中的粒子系统可以用于制作特效,如开枪火花效果,简单爆炸效果等.(毕竟程序员不是设计师,简单的特效都没有问题,要制作一些非常美观的特效还是需要多了解跟美术有关的知识.) 粒子系统实现一个简单的 ...
unity 彩带粒子_Unity3D_(Shuriken粒子系统)制作简单的烟花爆炸效果
Unity中的粒子系统可以用于制作特效,如开枪火花效果,简单爆炸效果等.(毕竟程序员不是设计师,简单的特效都没有问题,要制作一些非常美观的特效还是需要多了解跟美术有关的知识.) 粒子系统实现一个简单的 ...
html鼠标点击切换图片,js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不 ...
仿消灭星星烟花爆炸效果
烟花效果,可以改变参数和图片改变烟花效果. 1.大烟花爆炸效果如下 2.小烟花爆炸效果如下 3.代码如下 3.1烟花粒子元素 import android.graphics.Bitmap; publi ...
鼠标特效代码 php_鼠标特效——鼠标点击出现文字效果
之前有人问我鼠标点击出现文字效果是怎么实现的,这个我只能说是从别人网站上看到的代码,为了大家使用方便,在这里我给大家分享一下.使用方法也很简单,只需要两步: 1.登录后台--外观--编辑,找到foot ...
jQuery 打气球小游戏点击气球爆炸效果
最近在学习前端,看到偶尔看到前端小游戏,就想自己写一个小游戏,奈何水平有限,只能写打气球这种简单的,所有的气球都是动态生成的,气球的颜色也是随机的 html部分 <div class=" ...
html点击鼠标页面出现爱心,js实现鼠标点击飘爱心效果
本文实例为大家分享了js实现鼠标点击飘爱心的具体代码,供大家参考,具体内容如下鼠标点击特效 html { cursor: pointer; } h3 { text-align: center; us ...
JavaScript学习（十八）--鼠标事件（鼠标点击松开移动效果）
目录鼠标的单击事件鼠标的松开或按下事件鼠标的移入/移出事件鼠标移动事件鼠标单击事件和鼠标双击事件鼠标拖拽事件鼠标和键盘事件是在页面操作中使用最频繁的操作,可以利用鼠标事件在页面中实现鼠标 ...

鼠标点击烟花爆炸效果

鼠标点击烟花爆炸效果

一、快速使用（引用我创建好的`anime.min.js`文件）

二、或引用自己的`anime.min.js`文件

`设置外观`-`开发者设置`-`自定义输出body 尾部的HTML代码`插入代码

鼠标点击烟花爆炸效果相关推荐

最新文章

热门文章

鼠标点击烟花爆炸效果

鼠标点击烟花爆炸效果

一、 快速使用（引用我创建好的anime.min.js文件）

二、 或引用自己的anime.min.js文件

设置外观-开发者设置-自定义输出body 尾部的HTML代码插入代码

鼠标点击烟花爆炸效果相关推荐

最新文章

热门文章

一、快速使用（引用我创建好的`anime.min.js`文件）

二、或引用自己的`anime.min.js`文件

`设置外观`-`开发者设置`-`自定义输出body 尾部的HTML代码`插入代码