马黑黑 发表于 2022-8-13 07:45

烟花易冷

<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;
                        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>

马黑黑 发表于 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;
                        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>


加林森 发表于 2022-8-13 08:06

漂亮的烟花，色彩争妍。好制作。{:4_199:}

梦油 发表于 2022-8-13 09:45

这五彩缤纷的烟花太美了。我想制作起来一定不容易吧。

加林森 发表于 2022-8-13 11:34

再来欣赏！

马黑黑 发表于 2022-8-13 11:36

加林森 发表于 2022-8-13 08:06
漂亮的烟花，色彩争妍。好制作。

这个和之前那个相比，主要在烟花颜色渲染上实现机制不同，还有就是烟花出现的频率高一些、自动播放的烟花在上半部分（手动的全帖均可）

马黑黑 发表于 2022-8-13 11:37

梦油 发表于 2022-8-13 09:45
这五彩缤纷的烟花太美了。我想制作起来一定不容易吧。

熟门熟路的就容易

红影 发表于 2022-8-13 12:41

七彩烟花，太美了。嗯嗯，自动的都在上半部，还有鼠标跟随的呢。黑黑真棒{:4_187:}

梦油 发表于 2022-8-13 12:43

马黑黑 发表于 2022-8-13 11:37
熟门熟路的就容易

倒也是，难者不会，会者不难。

红影 发表于 2022-8-13 12:43

颜色是自动搭配的吧，竟然自动出现各种颜色，还搭配得那么好{:4_199:}

马黑黑 发表于 2022-8-13 12:43

红影 发表于 2022-8-13 12:43
颜色是自动搭配的吧，竟然自动出现各种颜色，还搭配得那么好

随机搭配

马黑黑 发表于 2022-8-13 12:46

梦油 发表于 2022-8-13 12:43
倒也是，难者不会，会者不难。

都是这么个道理

马黑黑 发表于 2022-8-13 12:46

红影 发表于 2022-8-13 12:41
七彩烟花，太美了。嗯嗯，自动的都在上半部，还有鼠标跟随的呢。黑黑真棒

画布还是占整个帖子

红影 发表于 2022-8-13 14:55

马黑黑 发表于 2022-8-13 12:43
随机搭配

五彩缤纷的，特别漂亮{:4_187:}

红影 发表于 2022-8-13 14:56

马黑黑 发表于 2022-8-13 12:46
画布还是占整个帖子

哦，我以为画布占一半呢，原来只是烟花在上半部啊。

加林森 发表于 2022-8-13 16:07

马黑黑 发表于 2022-8-13 11:36
这个和之前那个相比，主要在烟花颜色渲染上实现机制不同，还有就是烟花出现的频率高一些、自动播放的烟花 ...

是的。自动与手动出来的效果是一样的。很美的效果了。

马黑黑 发表于 2022-8-13 20:35

加林森 发表于 2022-8-13 16:07
是的。自动与手动出来的效果是一样的。很美的效果了。

还行

马黑黑 发表于 2022-8-13 20:36

红影 发表于 2022-8-13 14:56
哦，我以为画布占一半呢，原来只是烟花在上半部啊。

当然了，画布也可以只占帖子的一半

加林森 发表于 2022-8-13 20:36

马黑黑 发表于 2022-8-13 20:35
还行

嗯嗯。

马黑黑 发表于 2022-8-13 20:36

红影 发表于 2022-8-13 14:55
五彩缤纷的，特别漂亮

还好了
页: [1] 2 3 4
查看完整版本: 烟花易冷