论坛 › 音乐沙龙 › 《人间烟火》（学习黑黑原生歌词圆环播放器）

红影 发表于 2024-8-14 23:37

《人间烟火》（学习黑黑原生歌词圆环播放器）

<style>
#tz {
        margin: 80px 0 30px calc(50% - 593px);
        width: 1024px;
        height: 675px;
        background: #FFA500;
        box-shadow: 0 0 8px gray;
        overflow: hidden;
        z-index: 1;
        display: grid;
        place-items: center;
        position: relative;
}
#tz::before {
        position:absolute;
        content: '';
        inset: 0;
        background: url('https://pic.imgdb.cn/item/66bcbcebd9c307b7e90343ad.jpg') no-repeat center/cover;
        -webkit-mask: radial-gradient(circle at center, transparent 0.2px, red 1px) repeat center/var(--size) var(--size);
        transition: .72s;
        --size: 10px;
}
#tz:hover::before { --size: 24px; transform: scale(105%) rotate(1deg); }
#tz > video {
        position: absolute;
        width: 100%;
        height: calc(100% + 200px);
        object-fit: cover;
        mix-blend-mode: screen;
        pointer-events: none;
}
</style>

<div id="tz" class="tz">
        <audio id="aud" src="https://www.kumeiwp.com/wj/194875/2024/01/23/89c6e47dd12412cf59853e0228c8ec49.mp3" autoplay loop></audio>
        <video src="https://img.tukuppt.com/video_show/2916847/00/17/67/5ecc844c234cf_10s_big.mp4" autoplay loop muted></video>
</div>

<script>
var geci = `《人间烟火》 演唱：程响\n学习黑黑原生歌词圆环播放器\n一人后来过江南 烟雨锁惆怅\n听得乌篷轻摇桨 竟不知所想\n画船箫鼓声声唱 几曲断人肠\n谁家墙头有梅 自芬芳\n人间一场烟火 你曾盛开过\n刻几人在心窝 从此孤独活\n江南花已凋落 怎堪再斟酌\n可怜良辰无多 竟似无人说\n没找到程响的版本\n喜欢的歌曲 和大家一起聆听\n你撑纸伞回头望 千年乌衣巷\n问君青丝有几丈 能把风月量\n谁言杯酒醉他乡 红尘皆可忘\n凭栏数尽孤帆 泪两行\n人间一场烟火 你曾盛开过\n刻几人在心窝 从此孤独活\n江南花已凋落 怎堪再斟酌\n可怜良辰无多 竟似无人说\n\n人间一场烟火 你曾盛开过\n刻几人在心窝 从此孤独活\n江南花已凋落 怎堪再斟酌\n可怜良辰无多 竟似无人说\n可怜良辰无多 竟似无人说\n可怜良辰无多 再难与人说\n红影2024-8-14\n`;

var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/yslrc/svgcircle_yslrc.js';
document.body.appendChild(sf);

sf.onload = () => {
        HCPlayer({
                papa: '#tz',
                geci: geci,
                skip: 0.5,
                lrc_css: 'left: 280px; top: 30px; --bg: linear-gradient(to right, HotPink, Yellow,pink, Orange); color: #FAFAD2',
                player_css: 'left: 320px; bottom: 60px; --prog: #D2B48C; --track: #F5DEB3; color: #ccc;',
                fs_css: 'bottom: 80px; --bg: transparent; --color: snow;'
        });
};
</script>

红影 发表于 2024-8-14 23:40

前面的代码跟着学个，这两天有事，管状的那个后面想办法再跟着学个。
谢谢@马黑黑 的代码{:4_187:}

起个网名好难 发表于 2024-8-15 06:18

https://dingyue.ws.126.net/2019/1117/f41c4906g00q12n55001ic200hs00hsg00hs00hs.gif

梦油 发表于 2024-8-15 09:29

红花一枝独秀——美！

小文 发表于 2024-8-15 12:13

漂亮

梦江南 发表于 2024-8-15 13:56

一枝独秀！给力！{:4_187:}

茉莉 发表于 2024-8-15 18:53

干净的背景，盛放的花朵，芬芳着每一天

茉莉 发表于 2024-8-15 18:54

这歌听着像是翻唱

小辣椒 发表于 2024-8-15 21:38

亲爱的这个播放器颜色和歌词颜色调的非常好，和画面相辅相成，太美了！

红影 发表于 2024-8-15 22:46

起个网名好难 发表于 2024-8-15 06:18


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

红影 发表于 2024-8-15 22:46

梦油 发表于 2024-8-15 09:29
红花一枝独秀——美！

正好找到这图，就拿来做了{:4_173:}

红影 发表于 2024-8-15 22:46

小文 发表于 2024-8-15 12:13
漂亮

谢谢小文鼓励{:4_187:}

红影 发表于 2024-8-15 22:47

梦江南 发表于 2024-8-15 13:56
一枝独秀！给力！

谢谢江南，没你做得快{:4_187:}

红影 发表于 2024-8-15 22:52

茉莉 发表于 2024-8-15 18:53
干净的背景，盛放的花朵，芬芳着每一天

谢谢茉莉，找的图片就这样，直接用的。主要学习一下代码{:4_173:}

红影 发表于 2024-8-15 22:53

茉莉 发表于 2024-8-15 18:54
这歌听着像是翻唱

网易云程响的不让听啊，就随手找了个。
现在换了个地址，打开慢点，但是是程响的歌了{:4_204:}

红影 发表于 2024-8-15 22:58

小辣椒 发表于 2024-8-15 21:38
亲爱的这个播放器颜色和歌词颜色调的非常好，和画面相辅相成，太美了！

谢谢亲爱的，我把那个点点的也整合到一起了，没时间做，就把那些都弄一起了{:4_173:}

梦油 发表于 2024-8-16 16:46

红影 发表于 2024-8-15 22:46
正好找到这图，就拿来做了

你的审美观很有独到之处。{:5_116:}

小辣椒 发表于 2024-8-16 21:24

红影 发表于 2024-8-15 22:58
谢谢亲爱的，我把那个点点的也整合到一起了，没时间做，就把那些都弄一起了

这个就是水平了，太厉害的，必须赞！{:4_208:}

红影 发表于 2024-8-17 10:10

梦油 发表于 2024-8-16 16:46
你的审美观很有独到之处。

只是巧了，去搜图第一个就看到这个{:4_173:}

红影 发表于 2024-8-17 10:10

小辣椒 发表于 2024-8-16 21:24
这个就是水平了，太厉害的，必须赞！

那个很简单啊，把黑黑另一个贴子里的代码搬过来就是了{:4_173:}

查看完整版本: 《人间烟火》（学习黑黑原生歌词圆环播放器）