本帖最后由 花简静 于 2024-6-18 23:14 编辑
<style>
#tz { margin: 30px 0 30px calc(50% - 781px);width: 1400px; height: 800px; background: #eee; box-shadow: 2px 2px 6px gray; overflow: hidden; position: relative; }
#tz::after { content: attr(data-lrc); position: absolute; bottom: 0; width: 100%; height: 60px; text-align: center; font: normal 24px/60px sans-serif; color: transparent; background: repeating-linear-gradient(to right, red, green, blue, green, red) 50%/200px 60px; -webkit-background-clip: text; }
#player { left: 660px; top: 180px; width: 160px; height: 160px; filter: drop-shadow(0 0 50px white); cursor: pointer; transition: .5s; position: absolute; display: grid; place-items: center; animation: rot 8s linear infinite var(--state); z-index: 99; }
#player:hover { width: 200px; }
c-c { position: absolute; width: 85%; height: 30px; border: 12px double plum; border-radius: 50%; opacity: .25; }
@keyframes rot { to { transform: rotate(1turn); } }
.vid { position: absolute; pointer-events: none; }
.vid:nth-of-type(1) { top:-100px; width: 105%; height:105%;}
.vid:nth-of-type(2) {top:-100px; width: 105%; height:105%; opacity: .15;transform: rotateY(180deg);}
.vid:nth-of-type(3) { left: 660px; top: 180px; width: 180px; height: 180px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 60px black; cursor: pointer; z-index: 10;mix-blend-mode: screen;}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="tz" data-lrc="HUACHAO PLAYER">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1429962105" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2418175/00/17/88/5ed0a6a88bcd9.mp4" autoplay loop muted disablePictureInPicture></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2414777/00/01/68/5b4854b8add7c.mp4" autoplay loop muted disablePictureInPicture></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/02/02/5b4ef929ab157.mp4" autoplay loop muted disablePictureInPicture></video>
<div id="player"></div>
</div>
<script>
var curkey = 0, lrcAr = [];total = 8;
var vids = document.querySelectorAll('.vid');
Array.from({length: total}).forEach((c,k) => {
c = document.createElement('c-c');
c.style.cssText += `
transform: rotate(${360 / total * k}deg);
border-color: #${Math.random().toString(16).substring(2,8)};
`;
player.appendChild(c);
});
var getAr = (text) => {
var ar = text.trim().split('\n');
ar.sort();
var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
let result = item.match(reg);
let tmsg = parseInt(result[1]) * 60 + parseInt(result[2]) + parseInt(result[3]) / 1000;
lrcAr.push([tmsg, result[4].trim()]);
});
};
var mState = () => {
tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
player.title = ['暂停','播放'][+aud.paused];
vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
};
aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
if(curkey > lrcAr.length - 1) return;
if(aud.currentTime >= lrcAr[curkey][0]) {
tz.dataset.lrc = lrcAr[curkey][1];
curkey ++;
}
};
player.onclick = () => aud.paused ? aud.play() : aud.pause();
var lrc = `
[00:00:900]张子铭 - 一生最爱
[00:20.180]向雪怀作词，伍思凯作曲
[00:22.180]吉他:白毛
[00:23.678]如果痴痴的等某日终于可等到一生中最爱
[00:31.426]谁介意你我这段情每每碰上了意外不清楚未来
[00:38.678]何曾愿意 我心中所爱
[00:45.927]每天要孤单看海
[00:54.426]宁愿一生都不说话都不想讲假说话欺骗你
[01:02.177]留意到你我这段情你会发觉间隔着一点点距离
[01:09.426]无言地爱 我偏不敢说
[01:17.676]说一句想跟你一起
[01:24.427]OOOH OOH
[01:28.926]如真 如假 如可分身饰演自己
[01:36.674]会将心中的温柔献出给你唯有的知己
[01:44.174]如痴 如醉 还盼你懂珍惜自己
[01:51.675]有天即使分离我都想你我 真的想你
[02:27.172]宁愿一生都不说话都不想讲假说话欺骗你
[02:35.172]留意到你我这段情你会发觉间隔着一点点距离
[02:42.423]无言地爱 我偏不敢说
[02:50.671]说一句想跟你一起
[02:57.424]OOOH OOH
[03:01.922]如真 如假 如可分身饰演自己
[03:09.422]会将心中的温柔献出给你唯有的知己
[03:17.171]如痴 如醉 还盼你懂珍惜自己
[03:24.671]有天即使分离我都想你我 真的想你
[03:36.422]如真 如假 如可分身饰演自己
[03:43.922]会将心中的温柔献出给你唯有的知己
[03:51.670]如痴 如醉 还盼你懂珍惜自己
[03:59.421]有天即使分离我都想你我 真的想你
[04:11.674]如果痴痴的等某日终于可等到一生中最爱
`;
getAr(lrc);
</script>
| 
