|
|

楼主 |
发表于 2022-8-13 07:46
|
显示全部楼层
本帖烟花使用rgba颜色体系。代码分享(全):
- <style>
- #papa { left: -214px; width: 1024px; height: 640px; background: gray url('https://638183.freep.cn/638183/Pic/81/yanhua.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }
- #canv { position: absolute; }
- #disc { position: absolute; width: 40px; height: 40px; left: 10px; bottom: 10px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; cursor: pointer; animation: rot 2s linear infinite; }
- #lrcbox { position: absolute; left: 60px; bottom: 10px; font: bold 22px / 40px sans-serif; color: #859670; text-shadow: 2px 2px 4px #222; }
- @keyframes rot { to { transform: rotate(360deg); } }
- </style>
- <div id="papa">
- <span id="lrcbox">纯音乐 - 烟花易冷</span>
- <canvas id="canv"></canvas>
- <span id="disc"></span>
- </div>
- <script>
- (function() {
- let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
- let ctx = canv.getContext('2d');
- let w = canv.width = papa.offsetWidth, h = canv.height = papa.offsetHeight, particles = [], idx = 0, aud = new Audio();
-
- aud.src = 'https://music.163.com/song/media/outer/url?id=1942250548.mp3';
- aud.loop = true;
- aud.autoplay = true;
-
- disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
- disc.onclick = () => aud.paused ? aud.play() : aud.pause();
- aud.addEventListener('playing',() => disc.style.animationPlayState = 'running');
- aud.addEventListener('pause',() => disc.style.animationPlayState = 'paused');
- canv.onclick = function(event) {
- let x = event.offsetX || event.layerX, y = event.offsetY || event.layerY;
- createParticle(x, y);
- }
- function createParticle(x, y) {
- let count = 100, radius = 10;
- for (let j = 0; j < count; j ++) {
- let p = {};
- let angle = 360 / count * j, radian = Math.PI / 180 * angle;
- p.radius = radius;
- p.startX = x;
- p.startY = y;
- p.radian = radian;
- p.rgb = `${num(0,255)},${num(0,255)},${num(0,255)},`;
- p.alpha = (Math.floor(Math.random() * 101)) / 100;
- p.speed = (Math.random() * 5) + 0.4;
- p.radius = p.speed;
- particles.push(p);
- }
- }
- function drawParticle() {
- ctx.fillStyle = 'transparent';
- ctx.fillRect(0, 0, w, h);
- for (let j = 0; j < particles.length; j++) {
- let p = particles[j];
- let resultX = Math.cos(p.radian) * p.radius;
- let resultY = Math.sin(p.radian) * p.radius + 0.4;
- p.startX += resultX;
- p.startY += resultY;
- p.radius *= 1 - p.speed / 100;
- p.alpha -= 0.005;
- if (p.alpha <= 0) {
- particles.splice(j, 1);
- continue;
- }
- ctx.beginPath();
- ctx.arc(p.startX, p.startY, 2, 0, 360, false);
- ctx.closePath();
- ctx.fillStyle = 'rgba(' + p.rgb + p.alpha + ')';
- ctx.fill();
- }
- }
- function fade() {
- ctx.globalCompositeOperation = 'destination-out';
- ctx.fillStyle = 'rgba(0, 0, 0, .1)';
- ctx.fillRect(0, 0, w, h);
- ctx.globalCompositeOperation = 'lighter';
- }
- function render() {
- idx ++;
- fade();
- drawParticle();
- if(idx > 20) {
- createParticle(Math.random() * w, Math.random() * h/2);
- idx = 0;
- }
- requestAnimationFrame(render);
- }
- render();
- })();
- </script>
复制代码
|
|