山歌寥哉·序曲

马黑黑

马黑黑

配置代码：

<script>

(function() {
    let script = document.createElement('script');
    script.src = 'https://638183.freep.cn/638183/web/api/huakuai_lrc.js';
    script.charset = 'utf-8';
    document.head.appendChild(script);
    let geci = [
        [1.6,"刀郎 - 山歌寥哉序曲",6],
        [84.78,"九州山歌何寥哉",10.2],
        [97.18,"一呼九野声慷慨",10.3],
        [109.68,"犹记世人多悲苦",11.2],
        [122.12,"清早出门暮不归",10.2]
    ];
    window.onload = () => {
        HCPlayer({
            papa: '#papa', /* 宿主元素 */
            lrcAr: geci, /* 歌词 */
            lrc_css: `
                top: 20px; /* 位置 */
                color: lightblue; /* 歌词底色 */
                -webkit-box-reflect: below 540px linear-gradient(to bottom, transparent, rgba(255,255,255,.5));
                --bg: linear-gradient(rgba(10,200,100,.25),rgba(10,200,100,.7));  /* 歌词同步颜色 */
            `,
            player_css: `
                top: 100px; /* 位置 */
                color: #fff; /* 文本颜色 */
                -webkit-box-reflect: below 400px linear-gradient(to bottom, transparent, rgba(255,255,255,.5));
                --track: lightblue; /* 底轨颜色 */
                --prog: snow; /* 进度颜色 */
                --ww: 300px; /* 示波宽度 */
                --slider: orange;
            `,
        });
    }
})();

</script>

花飞飞

渐变代码整出幕布效果~~很是新奇。。。。
场面震撼，有强烈的视觉冲击力。。

花飞飞

超级漂亮！。。

马黑黑

花飞飞 发表于 2023-8-6 09:24
渐变代码整出幕布效果~~很是新奇。。。。
场面震撼，有强烈的视觉冲击力。。

这个不算啥。

如果需要推出的效果，则，把两个伪元素的 to right / left 对换一下

马黑黑

花飞飞 发表于 2023-8-6 09:26
超级漂亮！。。

倒影只有在基于 Chromium 的浏览器中见到

很奇妙的效果，四周有推进的条纹，当中有歌词和播放器的倒影。非常奇妙的帖子

红影

又是最新的打包上传的播放器，非常漂亮。给黑黑点赞

红影

那个渐变条纹也是倒影呢，构思很奇特

花飞飞

马黑黑 发表于 2023-8-6 09:41
这个不算啥。

如果需要推出的效果，则，把两个伪元素的 to right / left 对换一下

小白试试去。。。

花飞飞

马黑黑 发表于 2023-8-6 09:42
倒影只有在基于 Chromium 的浏览器中见到

百分可以看到，火狐果然看不到。。。

马黑黑

花飞飞 发表于 2023-8-6 11:23
百分可以看到，火狐果然看不到。。。

百分基于Chromium

马黑黑

花飞飞 发表于 2023-8-6 11:23
百分可以看到，火狐果然看不到。。。

火狐是自己的内核

马黑黑

红影 发表于 2023-8-6 11:11
又是最新的打包上传的播放器，非常漂亮。给黑黑点赞

这个是之前做过的、也集合过的小滑块播放器，做了些修改

马黑黑

红影 发表于 2023-8-6 11:13
那个渐变条纹也是倒影呢，构思很奇特

Chromium内核的浏览器都能看到，火狐就看不到了

马黑黑

醉美水芙蓉 发表于 2023-8-6 11:56
这个播放器超级好看！

感谢欣赏。中午好！

花飞飞

马黑黑 发表于 2023-8-6 11:49
火狐是自己的内核

好的，我刚才发现为什么要两个浏览器切着用，因为百分我没有办法设定它自动播放，火狐可以。。

花飞飞

马黑黑 发表于 2023-8-6 09:41
这个不算啥。

如果需要推出的效果，则，把两个伪元素的 to right / left 对换一下

我试了一下，中间推两边需要设起始位置。。

红影

马黑黑 发表于 2023-8-6 11:50
这个是之前做过的、也集合过的小滑块播放器，做了些修改

嗯嗯，很漂亮