马黑黑 发表于 2024-8-20 07:45

故梦寒

<style>
#mama {
        margin: 130px 0 30px calc(50% - 721px);
        width: 1280px;
        height: 720px;
        background: url('https://638183.freep.cn/638183/t24/webp2/gumghj.webp') no-repeat center/cover;
        box-shadow: 0 0 8px gray;
        overflow: hidden;
        z-index: 1;
        position: relative;
}
#mama > video {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        mix-blend-mode: screen;
        -webkit-mask: linear-gradient(to right top, red 10%, transparent 90%, transparent);
        pointer-events: none;
}
</style>

<div id="mama" class="mama">
        <audio src="https://music.163.com/song/media/outer/url?id=2037912492" autoplay loop></audio>
        <video src="https://img.tukuppt.com/video_show/15653652/00/80/83/60d0445e4511e.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将相思斟满\n浮梦划过悲欢全都是与你\n有关\n双人伞 一人盼\n三更过 五更寒\n我抚琴凄凄拨弹\n你至今匆匆未还\n灯一盏 酒半酣\n三更雨 打湿青衫\n却无人再为我撑伞\n双人伞 一人盼\n三更过 五更寒\n我抚琴凄凄拨弹\n你至今匆匆未还\n灯一盏 酒半酣\n三更雨 打湿青衫\n却无人再为我撑伞\n2024-8-19`;

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

sf.onload = () => {
        HCPlayer({
                papa: '#mama',
                geci: geci,
                skip: 0,
                average: 0,
                circle: { num: 20, len: 10, color: 'lightblue'},
                player_css: 'right: 80px; top: 80px; --bg: transparent; --br: 50%; --opacity: .25; ',
                lrc_css: 'left: 50%; transform: translateX(-50%); top: 20px; --bg: linear-gradient( #eee, #eeeeee80); color: #666;',
                fs_css: 'left: 46%; bottom: 20px; --bg: transparent; --color: #eee;',
        });
};
</script>

马黑黑 发表于 2024-8-20 07:46

<h2>帖子代码：</h2>
<div class="hE"><pre>
&lt;style&gt;
#mama {
        margin: 130px 0 30px calc(50% - 721px);
        width: 1280px;
        height: 720px;
        background: url('https://638183.freep.cn/638183/t24/webp2/gumghj.webp') no-repeat center/cover;
        box-shadow: 0 0 8px gray;
        overflow: hidden;
        z-index: 1;
        position: relative;
}
#mama &gt; video {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        mix-blend-mode: screen;
        -webkit-mask: linear-gradient(to right top, red 10%, transparent 90%, transparent);
        pointer-events: none;
}
&lt;/style&gt;

&lt;div id="mama" class="mama"&gt;
        &lt;audio src="https://music.163.com/song/media/outer/url?id=2037912492" autoplay loop&gt;&lt;/audio&gt;
        &lt;video src="https://img.tukuppt.com/video_show/15653652/00/80/83/60d0445e4511e.mp4" autoplay loop muted&gt;&lt;/video&gt;
&lt;/div&gt;

&lt;script&gt;
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将相思斟满\n浮梦划过悲欢全都是与你\n有关\n双人伞 一人盼\n三更过 五更寒\n我抚琴凄凄拨弹\n你至今匆匆未还\n灯一盏 酒半酣\n三更雨 打湿青衫\n却无人再为我撑伞\n双人伞 一人盼\n三更过 五更寒\n我抚琴凄凄拨弹\n你至今匆匆未还\n灯一盏 酒半酣\n三更雨 打湿青衫\n却无人再为我撑伞\n2024-8-19`;

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

sf.onload = () =&gt; {
        HCPlayer({
                papa: '#mama',
                geci: geci,
                skip: 0,
                average: 0,
                circle: { num: 20, len: 10, color: 'lightblue'},
                player_css: 'right: 80px; top: 80px; --bg: transparent; --br: 50%; --opacity: .25; ',
                lrc_css: 'left: 50%; transform: translateX(-50%); top: 20px; --bg: linear-gradient( #eee, #eeeeee80); color: #666;',
                fs_css: 'left: 46%; bottom: 20px; --bg: transparent; --color: #eee;',
        });
};
&lt;/script&gt;
</pre></div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>

马黑黑 发表于 2024-8-20 07:47

本帖测试原生lrc歌词同步值套环播放器

插件说明：原生lrc歌词同步之套环播放器 (52qingyin.cn)

梦江南 发表于 2024-8-20 08:44

谢谢老师辛苦！欣赏学习了！{:4_187:}

梦江南 发表于 2024-8-20 11:41

老师的速度这么快，老学生要跟不上了哈。

彩云归 发表于 2024-8-20 12:16

欣赏佳作，谢谢分享！

红影 发表于 2024-8-20 22:09

这个真正是最新效果的封装呢，套环层层叠叠地变幻着，很玄妙{:4_199:}

红影 发表于 2024-8-20 22:10

制作也好漂亮，雨中的女子，和歌词很相符呢{:4_187:}

马黑黑 发表于 2024-8-20 22:36

红影 发表于 2024-8-20 22:09
这个真正是最新效果的封装呢，套环层层叠叠地变幻着，很玄妙

略作改变

小辣椒 发表于 2024-8-20 22:57

黑黑太勤奋了，拖地，捡瓶子，一样不拉下，必须赞！

小辣椒 发表于 2024-8-20 22:59

不动脑子，直接套用玩也是省力的，小辣椒现在脑子浆糊一片的，就只会套用了

红影 发表于 2024-8-20 23:26

马黑黑 发表于 2024-8-20 22:36
略作改变

嗯嗯，很漂亮的效果{:4_187:}

冬天的雨 发表于 2024-8-21 12:15

这个播放器漂亮，感谢马老师分享{:4_199:}

马黑黑 发表于 2024-8-21 12:37

冬天的雨 发表于 2024-8-21 12:15
这个播放器漂亮，感谢马老师分享

下午好

冬天的雨 发表于 2024-8-21 12:49

马黑黑 发表于 2024-8-21 12:37
下午好

马老师辛苦，中午都在，不午休啊
页: [1]
查看完整版本: 故梦寒