论坛 › 欢乐水吧 › 《笼》（学习黑黑《网》的螺旋路径）

红影 发表于 2023-10-13 16:34

《笼》（学习黑黑《网》的螺旋路径）

<style>
#papa { margin: 80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://pic.imgdb.cn/item/6528e8dfc458853aef07d4ea.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
#papa > svg { stroke-linecap: round; }
#btnPlay { filter: hue-rotate(180deg); }
</style>

<div id="papa">
        <audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2023/07/19/270419b6ae4c1f9831cc5bd2eeb60029.mp3" autoplay loop></audio>
</div>

<script>

(function() {
        let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
        let js1 = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.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, () => {
                HCPlayer({
                        papa: '#papa',
                        lrcAr: lrcAr,
                        lrc_css: 'bottom: 20px; --bg: linear-gradient(rgba(63,168,211,.35),rgba(138,86,230,.9));color: snow;',
                        fs_css: 'top: 10px; background: transparent;--color: rgba(63,168,211,.95);',
                        player_css: 'width: 200px; height: 240px; right: 160px; top: 60px; background: url("https://pic.imgdb.cn/item/6528eaf8c458853aef0ef345.png") no-repeat 8px 12px',
                        path: 'm 91.318138,107.43137 c 3.172108,4.32435 -4.026526,6.59097 -6.894346,5.49617 -7.771643,-2.96695 -7.691325,-13.839754 -3.649946,-19.870538 7.229043,-10.787603 22.326764,-10.070545 31.227404,-2.113883 13.06194,11.676711 11.70597,32.845561 0.40552,45.237161 C 97.345174,152.69632 71.672306,150.5514 56.846371,134.91197 38.189429,115.23125 40.96347,82.804494 59.685216,64.30816 82.359759,41.906622 118.93205,45.553412 139.57863,68.958702 163.91001,96.541034 159.6834,140.38642 133.49544,164.92912 103.26037,193.26468 55.702374,188.09629 29.268942,156.8964 -0.76640611,121.44507 4.9243018,66.125211 38.596588,35.559306 76.371811,1.2689836 134.95138,7.9666849 167.15604,46.974286 202.90942,90.280114 195.74977,157.10056 154.584,193.67798',
                        btn: {left: 34, top: 200},
                        track: {track: '#bbbddc', prog: '#7d4bf1'},
                        img: {play: '', pause: ''}
                });
        });

        loadJs(js2, () => {
                H5lz({
                        papa: '#papa',
                        total: 50,
                        size: {width: 16, height: 32},
                        shape: {background: 'url("https://pic.imgdb.cn/item/6528eaf8c458853aef0ef345.png") no-repeat center/cover', borderRadius: '0'},
                        ani: 'toBottom',
                        maxTime: 30,
                        offset: {x: 80, y: 0},
                });
        });
})();

</script>

红影 发表于 2023-10-13 16:35

呵呵，直接套用了黑黑的螺旋路径。觉得这个路径特别漂亮。谢谢@马黑黑的代码{:4_187:}

红影 发表于 2023-10-13 16:37

那个透明气泡想放在螺旋路径的下方作为衬托。
又用在粒子的背景里，一图两用，省得再去传图了。偷懒了一下，却觉得还挺不错{:4_173:}

红影 发表于 2023-10-13 16:39

这个气泡基本是长宽相等的，在粒子里去特地取了宽小于长的设置。这样不是整个泡泡了，却觉得更通透。
之前只因为忘记修改长宽尺寸，后来发现这样挺好。因错得福呢{:4_173:}

马黑黑 发表于 2023-10-13 16:39

精巧的设计

梦油 发表于 2023-10-13 16:43

魔幻画面魅力无穷。{:5_116:}

红影 发表于 2023-10-13 19:14

马黑黑 发表于 2023-10-13 16:39
精巧的设计

在这个帖子里跟黑黑学到了用滤镜调整按钮颜色，虽然在原色调上加滤镜会怎样变化还不熟练{:4_173:}

红影 发表于 2023-10-13 19:14

梦油 发表于 2023-10-13 16:43
魔幻画面魅力无穷。

谢谢梦油鼓励，我就是跟在后面学代码呢{:4_173:}

红影 发表于 2023-10-13 19:18

去网易云找张碧晨的这首歌，是VIP的，没法分享，跑到酷美却找到了，开心{:4_173:}

千羽 发表于 2023-10-13 20:36

在蔚蓝的大海中正在发生的故事吗？那个庞然大物是一只温和的大鲨鱼吧，好温馨的场景{:4_187:}

千羽 发表于 2023-10-13 20:38

这个播放器和伴侣挺亮眼的蛮漂亮{:4_187:}

千羽 发表于 2023-10-13 20:40

全屏的效果更好呢{:4_181:}

千羽 发表于 2023-10-13 20:43

影儿的创意和制作都很美呢，佩服中……{:4_185:}

马黑黑 发表于 2023-10-13 20:48

红影 发表于 2023-10-13 19:14
在这个帖子里跟黑黑学到了用滤镜调整按钮颜色，虽然在原色调上加滤镜会怎样变化还不熟练

滤镜分很多种，这里用的是CSS滤镜，它就那么几个滤镜，并不复杂

醉美水芙蓉 发表于 2023-10-13 21:23

小辣椒 发表于 2023-10-13 21:48

亲爱的，速度的，刚看见黑黑的分享，你这里已经做出来了{:4_199:}

小辣椒 发表于 2023-10-13 21:51

这个路径也是漂亮的，背景图图是海底世界吗？

小辣椒 发表于 2023-10-13 21:53

第一次听这歌的，真有这（笼）的歌{:4_189:}

小辣椒 发表于 2023-10-13 21:54

欣赏亲爱的精彩的制作{:4_199:}

红影 发表于 2023-10-13 22:38

千羽 发表于 2023-10-13 20:36
在蔚蓝的大海中正在发生的故事吗？那个庞然大物是一只温和的大鲨鱼吧，好温馨的场景

跟着歌词意思去找的图图，下午时候忽然想跟着做个帖子，临时找的图图{:4_173:}

查看完整版本: 《笼》（学习黑黑《网》的螺旋路径）