https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/juliangarnier_pen.mp4<\/a><\/video><\/div>\n\u7159\u706b\u7279\u6548\uff0c\u975e\u5e38\u83ef\u9e97\uff0c\u653e\u5728\u6bd4\u8f03\u8f15\u9b06\u3001\u751f\u6d3b\u985e\u7684\u7db2\u9801\u5f88\u9069\u5408<\/p>\n
<!DOCTYPE html>\r\n<html lang='en' class=''>\r\n<head>\r\n <meta charset='UTF-8'>\r\n <title>CodePen Demo<\/title>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<canvas class=\"fireworks\" style=\"left: 0; pointer-events: none; position: fixed; top: 0;\"><\/canvas>\r\n\r\n<script src=\"https:\/\/cpwebassets.codepen.io\/assets\/common\/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js\"><\/script>\r\n<script src=\"https:\/\/codepen.io\/juliangarnier\/pen\/yMLaRG.js\"><\/script>\r\n<script>\r\n window.human = false;\r\n\r\n var canvasEl = document.querySelector('.fireworks');\r\n var ctx = canvasEl.getContext('2d');\r\n var numberOfParticules = 30;\r\n var pointerX = 0;\r\n var pointerY = 0;\r\n var tap = 'ontouchstart' in window || navigator.msMaxTouchPoints ? 'touchstart' : 'mousedown';\r\n var colors = ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C'];\r\n\r\n function setCanvasSize() {\r\n canvasEl.width = window.innerWidth * 2;\r\n canvasEl.height = window.innerHeight * 2;\r\n canvasEl.style.width = window.innerWidth + 'px';\r\n canvasEl.style.height = window.innerHeight + 'px';\r\n canvasEl.getContext('2d').scale(2, 2);\r\n }\r\n\r\n function updateCoords(e) {\r\n pointerX = e.clientX || e.touches[0].clientX;\r\n pointerY = e.clientY || e.touches[0].clientY;\r\n }\r\n\r\n function setParticuleDirection(p) {\r\n var angle = anime.random(0, 360) * Math.PI \/ 180;\r\n var value = anime.random(50, 180);\r\n var radius = [-1, 1][anime.random(0, 1)] * value;\r\n return {\r\n x: p.x + radius * Math.cos(angle),\r\n y: p.y + radius * Math.sin(angle) };\r\n }\r\n\r\n function createParticule(x, y) {\r\n var p = {};\r\n p.x = x;\r\n p.y = y;\r\n p.color = colors[anime.random(0, colors.length - 1)];\r\n p.radius = anime.random(16, 32);\r\n p.endPos = setParticuleDirection(p);\r\n p.draw = function () {\r\n ctx.beginPath();\r\n ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);\r\n ctx.fillStyle = p.color;\r\n ctx.fill();\r\n };\r\n return p;\r\n }\r\n\r\n function createCircle(x, y) {\r\n var p = {};\r\n p.x = x;\r\n p.y = y;\r\n p.color = '#FFF';\r\n p.radius = 0.1;\r\n p.alpha = .5;\r\n p.lineWidth = 6;\r\n p.draw = function () {\r\n ctx.globalAlpha = p.alpha;\r\n ctx.beginPath();\r\n ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);\r\n ctx.lineWidth = p.lineWidth;\r\n ctx.strokeStyle = p.color;\r\n ctx.stroke();\r\n ctx.globalAlpha = 1;\r\n };\r\n return p;\r\n }\r\n\r\n function renderParticule(anim) {\r\n for (var i = 0; i < anim.animatables.length; i++) {if (window.CP.shouldStopExecution(0)) break;\r\n anim.animatables[i].target.draw();\r\n }window.CP.exitedLoop(0);\r\n }\r\n\r\n function animateParticules(x, y) {\r\n var circle = createCircle(x, y);\r\n var particules = [];\r\n for (var i = 0; i < numberOfParticules; i++) {if (window.CP.shouldStopExecution(1)) break;\r\n particules.push(createParticule(x, y));\r\n }window.CP.exitedLoop(1);\r\n anime.timeline().add({\r\n targets: particules,\r\n x: function (p) {return p.endPos.x;},\r\n y: function (p) {return p.endPos.y;},\r\n radius: 0.1,\r\n duration: anime.random(1200, 1800),\r\n easing: 'easeOutExpo',\r\n update: renderParticule }).\r\n\r\n add({\r\n targets: circle,\r\n radius: anime.random(80, 160),\r\n lineWidth: 0,\r\n alpha: {\r\n value: 0,\r\n easing: 'linear',\r\n duration: anime.random(600, 800) },\r\n\r\n duration: anime.random(1200, 1800),\r\n easing: 'easeOutExpo',\r\n update: renderParticule,\r\n offset: 0 });\r\n\r\n }\r\n\r\n var render = anime({\r\n duration: Infinity,\r\n update: function () {\r\n ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);\r\n } });\r\n\r\n document.addEventListener(tap, function (e) {\r\n window.human = true;\r\n render.play();\r\n updateCoords(e);\r\n animateParticules(pointerX, pointerY);\r\n }, false);\r\n\r\n var centerX = window.innerWidth \/ 2;\r\n var centerY = window.innerHeight \/ 2;\r\n\r\n function autoClick() {\r\n if (window.human) return;\r\n animateParticules(\r\n anime.random(centerX - 50, centerX + 50),\r\n anime.random(centerY - 50, centerY + 50));\r\n\r\n anime({ duration: 200 }).finished.then(autoClick);\r\n }\r\n\r\n \/\/ autoClick();\r\n setCanvasSize();\r\n window.addEventListener('resize', setCanvasSize, false);\r\n<\/script>\r\n<\/body>\r\n<\/html><\/pre>\n--<\/p>\n
\u7d50\u8ad6<\/h2>\n
\u653e\u5728\u5de5\u4f5c\u7684\u7db2\u9801\uff0c\u4e00\u6574\u5929\u90fd\u6709\u9ede\u64ca\u7279\u6548\u9084\u662f\u7121\u6cd5\u4f7f\u7528\uff0c\u6700\u5f8c\u5168\u90fd\u79fb\u9664\u4e86 \ud83e\udd23\ud83e\udd23\ud83e\udd23<\/p>\n
--<\/p>\n
<\/div>\n