时间挂满山林
本帖最后由 马黑黑 于 2024-8-13 21:41 编辑 <br /><br /><style>#tz {
margin: 120px 0 30px calc(50% - 721px);
width: 1280px;
height: 720px;
background: url('https://638183.freep.cn/638183/t24/4/ujlb.jpg') no-repeat center/cover;
box-shadow: 0 0 8px gray;
overflow: hidden;
z-index: 1;
display: grid;
place-items: center;
position: relative;
}
#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://music.163.com/song/media/outer/url?id=2113820733" autoplay loop></audio>
<video src="https://img.tukuppt.com/video_show/2629112/00/02/07/5b50a5c0803ab.mp4" autoplay loop muted></video>
<img src="https://638183.freep.cn/638183/t23/1/timestop.png" width="100px" alt="" style="position: absolute; bottom: 50px; opacity: .75;" />
</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作词：蒲羽\n作曲：蒲羽\n编曲：蒲羽\n缩混：王天培\n制作：蒲羽\n吉他：王子石\n鼓手：江江\n古筝：蒲羽\n歌手：雾也至Woo Yeah\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,
lrc_css: 'left: 340px; bottom: 50px; --bg: linear-gradient(#ffffee30, #008c00a0); color: #8ad68afa',
player_css: 'left: 200px; bottom: 20px; --prog: #00aa00a2; --track: #dddddd90; color: #ccc;',
fs_css: '--bg: #00800080; --color: snow;'
});
};
</script>
本帖最后由 马黑黑 于 2024-8-13 21:40 编辑 <br /><br /><h2>帖子代码</h2>
<div class="hE"><pre>
<style>
#tz {
margin: 130px 0 30px calc(50% - 721px);
width: 1280px;
height: 720px;
background: url('https://638183.freep.cn/638183/t24/4/ujlb.jpg') no-repeat center/cover;
box-shadow: 0 0 8px gray;
overflow: hidden;
z-index: 1;
display: grid;
place-items: center;
position: relative;
}
#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://music.163.com/song/media/outer/url?id=2113820733" autoplay loop></audio>
<video src="https://img.tukuppt.com/video_show/2629112/00/02/07/5b50a5c0803ab.mp4" autoplay loop muted></video>
<img src="https://638183.freep.cn/638183/t23/1/timestop.png" width="100px" alt="" style="position: absolute; bottom: 50px; opacity: .75;" />
</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作词：蒲羽\n作曲：蒲羽\n编曲：蒲羽\n缩混：王天培\n制作：蒲羽\n吉他：王子石\n鼓手：江江\n古筝：蒲羽\n歌手：雾也至Woo Yeah\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,
lrc_css: 'left: 340px; bottom: 50px; --bg: linear-gradient(#ffffee30, #008c00a0); color: #8ad68afa',
player_css: 'left: 200px; bottom: 20px; --prog: #00aa00a2; --track: #dddddd90; color: #ccc;',
fs_css: '--bg: #00800080; --color: snow;'
});
};
</script>
</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>
本帖测试：原生lrc歌词模拟同步之圆形可控播放器插件
插件配置写在 HCPlayer({ ... }); 省略号处。配置说明：
一、papa: 必须，帖子容器CSS选择器，ID选择器写成 '#名称'，class选择器写成 '.名称'；
二、geci: 必须，原生lrc歌词，请参考帖子歌词的样子，确保歌词结构的完整性；
三、skip: 可选，时间偏移量纠正，0 表示不纠正；
四、lrc_css: 可选，按CSS语法设置歌词位置、颜色等，color 是歌词底色，--bg 是歌词同步色彩；
五、player_css: 可选，播放器位置、配色设置，使用CSS语法书写配置，--prog 是进度颜色，--track 是底轨颜色，color 是文本颜色；
六、fs_css: 可选，全屏按钮CSS配置，--bg 是按钮背景色，--color 是按钮文本颜色。 好漂亮的画面！ 谢谢老师辛苦！学习了！{:4_187:} 这个效果太奇妙了，真好看{:5_116:} 竹溪 发表于 2024-8-13 16:48
这个效果太奇妙了，真好看
{:4_190:} 梦江南 发表于 2024-8-13 13:45
谢谢老师辛苦！学习了！
{:4_180:} 这个播放器以前有玩过，只是现在歌词不是花潮的编辑器编辑了 马黑黑 发表于 2024-8-13 12:41
本帖测试：原生lrc歌词模拟同步之圆形可控播放器插件
插件配置写在 HCPlayer({ ... }); 省略号处。配置 ...
这些说明得仔细看看 三、skip: 可选，时间偏移量纠正，0 表示不纠正；
这个好，有些查找来的歌词如果有错位，还能做调整呢，太好了{:4_199:} 这个帖子又是封装好的，黑黑把各种细节都封装了，使用的人只要调用即可，极大地方便了做帖子{:4_199:} 圆形带进度条播放器，还可以调颜色，还有全屏选择，这个帖子太棒了{:4_199:} 六、fs_css: 可选，全屏按钮CSS配置，--bg 是按钮背景色，--color 是按钮文本颜色。
后面的几个可选，应该是可调的意思吧，如果不选，就按封装默认的样式了{:4_173:} 好吧，又犯了先看代码后赏帖子的毛病了，呵呵。
这个帖子也很漂亮，尤其视频的选择，太美了。歌曲名字也好奇妙，居然能把时间挂到山林啊，歌词也很奇妙，这帖子制作太漂亮了{:4_199:} 这几天忙，上来太晚了，这么好的帖子刚看到{:4_204:} 马老师辛苦，精彩连连{:4_178:}
页:
[1]