论坛 › 音乐沙龙 › 无眠的灯火（学习黑黑烟花封装和水波纹效果）

红影 发表于 2024-5-6 22:09

无眠的灯火（学习黑黑烟花封装和水波纹效果）

<style>
        #papa { margin: 20px 0 20px calc(50% - 681px); width: 1200px; height: 700px; background: lightblue; background: url('https://pic.imgdb.cn/item/663839a80ea9cb1403977484.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; }
        #canv { position: absolute; mix-blend-mode: screen; top: -20px; }
        #player { position: absolute; bottom: 50px; left: calc(50% - 80px); width: 160px; opacity: 0.35; cursor: pointer; animation: rot 5s linear infinite var(--state); }
        .vid { position: absolute; top: -11%; left: 7%; width: 100%; height: 80%; object-fit: cover; pointer-events: none; mix-blend-mode: screen; }
        @keyframes rot { to { transform: rotate(1turn); } }
#papa::before {
        position: absolute;
        content: '';
        width: 100%;
        height: 36%;
        bottom: 1px;
        background: inherit;
        filter: url(#turb);
}
#papa > svg { stroke-linecap: round; }
.myfilter { position: absolute; width: 0; height: 0; }
</style>

<div id="papa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1977220982" autoplay></audio>
        <video class="vid" src="https://img.tukuppt.com/video_show/15653652/01/30/45/62bac706237f8_10s_big.mp4" loop muted></video>
        <canvas id="canv" width="1200" height="310"></canvas>
        <img id="player" src="https://pic.imgdb.cn/item/6638e13d0ea9cb14032b2854.png" alt="" />
</div>
<svg class="myfilter">
    <filter id="turb" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
      <feTurbulence id="feturbulence" type="fractalNoise" numOctaves="3" seed="2"></feTurbulence>
      <feDisplacementMap xChannelSelector="G" yChannelSelector="B" scale="20" in="SourceGraphic"></feDisplacementMap>
    </filter>
</svg>
<script>

        let frames = 0, rad = Math.PI / 180;

let js1 = 'https://638183.freep.cn/638183/web/js/fireframes.js',
js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_2d.js';
let loadJs = (url,callback) => {
                let body = document.querySelector('body'), jsNode = document.createElement('script');
                jsNode.charset = 'utf-8';
                jsNode.setAttribute('src', url);
                body.appendChild(jsNode);
                jsNode.onload = () => callback();
      };

loadJs(js1, () => { pa = papa, lz = 80, flash = false;
});
        loadJs(js2, () => {
                H5lz({
                        papa: '#papa',
                        total: 60,
                        size: {width: 4, height: 4},
                        shape: {background: '#eee', borderRadius: ''},
                        ani: 'toBottom',
                        maxTime: 30,
                        offset: {x: -80, y: 0},
                });
        });

        let fewave = () => {
                let bfx = 0.01, bfy = 0.1;
                frames += 0.5;
                bfx += 0.002 * Math.cos(frames * rad);
                bfy += 0.02 * Math.sin(frames * rad);
                bf = ;
                feturbulence.setAttributeNS(null, 'baseFrequency',bf.join(' '));
                requestAnimationFrame(fewave);
        };

        fewave();

player.onclick = () => aud.paused ? aud.play() : aud.pause();


</script>

红影 发表于 2024-5-6 22:10

看到月儿和小辣椒都在做水波纹效果，也想跟着学个。黑黑的新的烟花封装也想学，就把它们弄到一起了{:4_173:}

红影 发表于 2024-5-6 22:12

水波纹怎样弄成倒影呢？本来想把下面部分弄成水波纹，结果是上面的弄到水里去了@马黑黑 {:4_173:}

马黑黑 发表于 2024-5-6 22:24

红影 发表于 2024-5-6 22:12
水波纹怎样弄成倒影呢？本来想把下面部分弄成水波纹，结果是上面的弄到水里去了@马黑黑

乌巢本来就没有水波纹的，要去水立方才有

红影 发表于 2024-5-6 23:14

马黑黑 发表于 2024-5-6 22:24
乌巢本来就没有水波纹的，要去水立方才有

哈哈，还有这种解释法啊{:4_170:}

起个网名好难 发表于 2024-5-7 07:30

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

庶民 发表于 2024-5-7 08:45

制作的精美。

梦油 发表于 2024-5-7 09:10

美轮美奂的画面璀璨夺目，太美了。

樵歌 发表于 2024-5-7 12:23

漫天礼花和背景水波纹组合非常美！但那个转运的播放器有点抢眼。

马黑黑 发表于 2024-5-7 17:38

红影 发表于 2024-5-6 23:14
哈哈，还有这种解释法啊

有的有的

小辣椒 发表于 2024-5-7 22:15

亲爱的，你这二种效果做一起，太有才了{:4_199:}

小辣椒 发表于 2024-5-7 22:17

但感觉这个播放器没有选好，或者是背景图片没有选好，我这段时间没有空，下个星期我套用你的玩一次{:4_205:}

小辣椒 发表于 2024-5-7 22:18

以后你的就是我的，纯套用你的了{:4_170:}

红影 发表于 2024-5-8 00:19

起个网名好难 发表于 2024-5-7 07:30


谢谢难难鼓励{:4_187:}

红影 发表于 2024-5-8 00:20

庶民 发表于 2024-5-7 08:45
制作的精美。

感谢庶民鼓励{:4_187:}

红影 发表于 2024-5-8 00:21

梦油 发表于 2024-5-7 09:10
美轮美奂的画面璀璨夺目，太美了。

哈哈，我是做着玩的呢，谢谢{:4_173:}

红影 发表于 2024-5-8 00:21

樵歌 发表于 2024-5-7 12:23
漫天礼花和背景水波纹组合非常美！但那个转运的播放器有点抢眼。

提醒有个播放器在啊{:4_187:}

红影 发表于 2024-5-8 00:21

马黑黑 发表于 2024-5-7 17:38
有的有的

本来就是玩，有没有说法都行的{:4_189:}

红影 发表于 2024-5-8 00:22

小辣椒 发表于 2024-5-7 22:15
亲爱的，你这二种效果做一起，太有才了

嗯，把canvas和svg效果捆绑在一起了，一锅乱炖{:4_173:}

红影 发表于 2024-5-8 00:24

小辣椒 发表于 2024-5-7 22:17
但感觉这个播放器没有选好，或者是背景图片没有选好，我这段时间没有空，下个星期我套用你的玩一次{:4_205: ...

亲爱的随便用，我也没想着好看，主要试试能不鞥这样弄。然后发现这个和我上一个套用的使用两个js是不同的，上一个方式这里用不了的。

查看完整版本: 无眠的灯火（学习黑黑烟花封装和水波纹效果）