gsap+Physics2DPlugin3实现2023夜空中点击燃放烟花动画效果代码
代码语言:html
所属分类:动画
代码描述:gsap+Physics2DPlugin3实现2023夜空中点击燃放烟花动画效果代码
代码标签: gsap Physics2DPlugin3 2023 夜空 点击 燃放 烟花 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } :root { --panel: hsl(0 0% 0% / 0.5); --size: 50vmin; --size: clamp(300px, 40vw, 100%); --blur: 100px; --blur: calc(40vw * 0.1); --aspect: 16 / 9; } h1 { margin: 0; font-family: sans-serif; right: 1rem; bottom: 1rem; z-index: 4; position: fixed; color: hsl(0 0% 98%); font-size: 3rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; opacity: 0.8; } body { min-height: 100vh; display: grid; place-items: center; background: hsl(0 0% 0%); } canvas { position: fixed; inset: 0; width: 100%; height: 100%; } .panel { display: grid; place-items: center; width: var(--size); aspect-ratio: var(--aspect); -webkit-backdrop-filter: grayscale(1) brightness(10) blur(var(--blur)); backdrop-filter: grayscale(1) brightness(10) blur(var(--blur)); -webkit-mask: url(//repo.bfw.wiki/bfwrepo/images/2023.png); mask: url(//repo.bfw.wiki/bfwrepo/images/2023.png); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; mask-mode: alpha; bottom: 1vh; position: fixed; left: 50%; transform: translate(-50%, 0); } </style> </head> <body > <canvas id=back></canvas> <div class="panel"></div> <canvas id=front></canvas> <h1>tap</h1> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.9.1.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Physics2DPlugin3.min.js"></script> <script > gsap.registerPlugin(Physics2DPlugin); const BACK_CANVAS = document.querySelector("#back"); const BACK_CONTEXT = BACK_CANVAS.getContext("2d"); const FRONT_CANVAS = document.querySelector("#front"); const FRONT_CONTEXT = FRONT_CANVAS.getContext("2d"); BACK_CANVAS.width = FRONT_CANVAS.width = window.innerWidth; BACK_CANVAS.height = FRONT_CANVAS.height = window.innerHeight; const CONFIG = { size: [4, 12], seed: 6, dest: [0.1, 0.75], window: [0.35, 0.65], alpha: [1, 0], duration: [1, 6], saturation: [30, 100], lightness: [30, 90], velocity: [10, 250], gravity: [150, 600] }; const drawFirework = (work, context) => { context.fillStyle = `hsl(40 80% 80%)`; context.fillRect(work.seed.x - work.seed.size * 0.5, work.seed.y - work.seed.size * 0.5, work.seed.size, work.seed.size); work.sparkles.forEach(s => { context.fillStyle = `hsl(${s.hue} ${s.saturation}% ${s.lightness}% / ${s.alpha})`; context.beginPath(); context.arc(s.x - s.size * 0.5, s.y - s.size * 0.5, s.size * 0.5, 0, 2 * Math.PI, false); context.fill(); }); }; const draw = () => { BACK_CONTEXT.clearRect(0, 0, BACK_CANVAS.width, BACK_CANVAS.height); FRONT_CONTEXT.clearRect(0, 0, FRONT_CANVAS.width, FRONT_CANVAS.height); frontFireworks.forEach(work => { drawFirework(work, FRONT_CONTEXT); }); backFireworks.forEach(work => { drawFirework(work, BACK_CONTEXT); }); }; let frontFirewo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0