本帖最后由 花简静 于 2025-1-13 18:49 编辑
<style>
@import 'https://638183.freep.cn/638183/web/mod/btn_lrc.css';
#tz { --state: running; margin: 130px 0 30px calc(50% - 931px);width:1700px; height: 900px; background: url('http://qslt.net/data/attachment/forum/202501/13/%E4%BC%A0%E5%9B%BE%E8%AF%95%E5%B8%96/184650i6ooeklos7lko65r.jpg') no-repeat center/cover; overflow: hidden;}
#fsbtn { top: 20px; }
#lrc {left: 50%;transform: translateX(-50%);bottom: 30px; --bg: linear-gradient(Wheat, SteelBlue); color: silver;font: bold 2.0em cursive;opacity: .86; }
#mplayer { right: 23%; bottom:10%;width: 60px; height: 60px; display: grid; place-items: center;opacity: .46; }
.feather { position: absolute; width: 30px; height: 30px; background: url('https://642303.freep.cn/642303/tu/th0120.png') no-repeat center/cover; }
.vid { position: absolute; width: 100%; height: 120%;top:-90px; object-fit: cover; mix-blend-mode: screen;opacity: .56;}
</style>
<div id="tz" class="pa">
<audio src="https://music.163.com/song/media/outer/url?id=1363490517"></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/7165162/00/17/50/5ec64ee5538e4.mp4" autoplay loop muted></video>
<div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="mplayer" class="mplayer"></div>
<div id="fsbtn" class="fsbtn"></div>
</div>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/btn_lrc.js';
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
var lrcAr = [
[0.27,"单曲：渐无书",1.8],
[2.08,"歌手：笛呆子囚牛",0.9],
[3.03,"所属专辑：《渐无书》",1.1],
[4.15,"作词 : 无比",1.0],
[5.11,"作曲 : 笛呆子囚牛",1.1],
[6.2,"演唱：囚牛",0.9],
[7.11,"学习黑师20250112《致你》复合按钮歌词版",5.4],
[20.05,"阅尽亘古的苍凉",2.9],
[24.05,"停栖于你目光",2.4],
[27.62,"山河远阔 年月仓皇",3.0],
[31.4,"可执手同往",2.3],
[36.16,"隐秘的欢喜感伤",2.4],
[39.17,"肆意生长",2.1],
[42.54,"若世人难知我心事滚烫",3.4],
[46.65,"只愿它被你珍藏",2.8],
[52.16,"你是我唯一的年少轻狂",3.4],
[56.05,"也是我 余生漫长",2.7],
[60.29,"执着地 用字句丈量",2.9],
[64.19,"天各一方",2.3],
[67.07,"你是我义无反顾的倔强",3.9],
[71.69,"聚散离合也无妨",2.6],
[75.64,"前世今生 相思一场",3.0],
[79.41,"书不尽纸短情长",4.5],
[85.03,"",15.0],
[100.08,"提笔让岁月流淌",3.6],
[104.47,"温柔了世事无常",2.5],
[108.01,"山河远阔 前路仓皇",3.3],
[112.18,"可执手同往",2.1],
[115.89,"隐秘的欢喜悲伤",3.1],
[119.71,"为你流放",2.1],
[123.06,"若世人皆知我心事滚烫",3.5],
[127.36,"只因它被你珍藏",2.4],
[130.92,"你是我不动声色的痴狂",3.3],
[135,"宣之于口又深藏",2.4],
[138.04,"执着地 用字句丈量",3.8],
[142.76,"天各一方",2.2],
[146.1,"你看那硝烟战火的远方",3.4],
[150.41,"也曾有花开陌上",2.3],
[154.08,"前世今生 相思一场",3.2],
[158.02,"书不尽纸短情长",4.5],
[163.52,"",17.5],
[181.03,"你是我唯一的年少轻狂",3.1],
[184.84,"也是我 余生漫长",2.5],
[188.92,"执子手 用字句丈量",2.8],
[192.46,"天各一方",2.5],
[196.18,"你是我义无反顾的倔强",3.4],
[200.35,"聚散离合也无妨",2.5],
[204.27,"若有来生 相思一场",2.9],
[209.6,"书不尽纸短情长",7.0],
[219.29,"“你的信太过官方，都不说想我。”",2.2],
[221.51,"“总理是大忙人，哪有时间来想我。”",2.0],
[223.53,"“闲人怎么知道忙人多想闲人。”",2.6],
[226.16,"“我这一生都是坚定不移的唯物主义者，唯有你，我希望有来生。”",6]
];
var total = 6, a = 360 / total;
for(var i = 0; i < total; i++) {
var f = document.createElement('span');
f.className = 'feather';
f.style.cssText += `transform: rotate(${i * a}deg) translateY(-30px);`;
mplayer.appendChild(f);
}
hcplay(tz, lrcAr);
fscreen.fs(tz, fsbtn);
</script>
|
