zdog模拟高压电电火花动画效果代码
代码语言:html
所属分类:动画
代码描述:zdog模拟高压电电火花动画效果代码,按住按钮不放即可看到。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; padding: 0; margin: 0; } body { color: hsl(180 100% 54%); background: hsl(240 13% 9%); min-block-size: 100svb; display: grid; place-items: center; font-family: system-ui; } div { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; } button { font-size: 0.9rem; font-family: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; display: block; padding: 0.5rem 0.75rem; border-radius: 1e5px; border: none; color: hsl(180 100% 54%); background: hsl(240 13% 16%); } button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } button:disabled { opacity: 0.7; } button:not(:disabled) { transform-origin: 50% 80%; transition-property: scale, box-shadow; transition-duration: 0.07s; transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1); box-shadow: 0 0 1rem -0.6rem hsl(232 90% 68% / 0.5); } button:active { box-shadow: 0 0 0 0 hsl(258 92% 62% / 0.5); scale: 0.975; } </style> </head> <body translate="no"> <div> <canvas style="display: block; inline-size: 100%; max-inline-size: 300px" width="300" height="300"></canvas> <button disabled>Strike lightning</button> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zdog.dist.js"></script> <script > const { Anchor, Shape } = Zdog; (() => { const canvas = document.querySelector("canvas"); const context = canvas.getContext("2d"); const { width, height } = canvas; const colors = [ { h: 232, s: 90, l: 68 }, { h: 220, s: 89, l: 64 }, { h: 180, s: 100, l: 54 }]; const strokes = { core: 10, lightning: [3, 0.05], particle: 1.6 }; const { h, s, l } = colors[0]; const { h: h1, s: s1, l: l1 } = colors[1]; const { h: h2, s: s2, l: l2 } = colors[2]; const color = `hsl(${h}, ${s}%, ${l}%)`; const color1 = `hsl(${h1}, ${s1}%, ${l1}%)`; const diameter = Math.min(width, height); const PI = Math.PI; const TAU = PI * 2; const points = Math.sqrt(100); const offset = diameter / 2.5; const particles = Array(points). fill(). map((_, i, { length }) => { const theta = PI * -1 + TAU / length * i; return [ ...Array(points). fill(). map((_, j, { length }) => { const a = PI * -1 + TAU / length * j; const x = offset * Math.sin(theta) * Math.cos(a); const y = offset * Math.sin(theta) * Math.sin(a); const z = offset * Math.cos(theta); return { x, y, z }; })]; }). flat(); const start = 0; const end = offset; const lines = 3; const offsets = [5, 12]; const scales = [0.7, 1]; const [stroke1, stroke2] = strokes.lightning; const [offset1, offset2] = offsets; const [scale1, scale2] = scales; const lightnings = 27; const threshold = 5; const getRandomOffset = (max = 10) => Math.floor(Math.random() * (max * 2)) - max; const roundPercentage = n => Math.floor(n * 100) / 100; const getRandomMetrics = () => { const scale = scale1 + roundPercentage(Math.random() * (scale2 - scale1)); const x = roundPercentage(Math.random() * TAU); const y = roundPercentage(Math.random() * TAU); const z = roundPercentage(Math.random() * TAU); const counter = Math.floor(Math.random() * threshold) * -1; return { x, y, z, scale, counter }; }; const segments = [ { x: start, y: 0, z: 0 }, ...Array(lines). fill(). map((_, i, { length }) => { const x = start + Math.floor((end - start) / (length + 1) * (i + 1)); const max = offset1 + (offset2 - offset1) / length * (length - i - 1); const y = getRandomOffset(max); const z = getRandomOffset(max); return { x, y, z }; }), { x: end, y: 0, z: 0 }]. reduce((acc, curr, i, array) => { if (i === 0) return acc; const { length } = array; const { x: x1, y: y1, z: z1 } = array[i - 1]; const { x, y, z } = curr; const h = h1 + Math.floor((h2 - h1) / length) * i; const s = s1 + Math.floor((s2 - s1) / length) * i; const l = l1 + Math..........完整代码请登录后点击上方下载按钮下载查看
网友评论0