本帖最后由 花简静 于 2024-8-18 15:33 编辑
<style>
#tz { margin: 130px 0 30px calc(50% - 931px); width: 1700px; height: 900px; background: url('https://642303.freep.cn/642303/tu/20246016ming.webp') no-repeat center/cover; border-radius: 20px 0; box-shadow: 3px 3px 12px black; z-index: 1; position: relative;overflow: hidden; }
#tz::before { content: attr(data-lrc); position: absolute; bottom: 10px; width: 100%; height: 60px; text-align: center; font: normal 30px/50px sans-serif; color: transparent; background: repeating-linear-gradient(to right, gold, lightgreen, snow, lightgreen, orange) 50%/200px 60px; -webkit-background-clip: text; filter: drop-shadow(-1px -3px 2px cyan); }
#player { left: calc(50% - 310px); bottom: 380px; width: 60px; height: 60px; filter: drop-shadow(0 0 2px cyan); cursor: pointer; transition: .5s; position: absolute; display: grid; place-items: center; animation: rot 8s linear infinite var(--state); opacity: .35;}
#vid { position: absolute; top:-80px; width: 100%; height: 120%; object-fit: cover; mix-blend-mode: screen; opacity: .35; pointer-events: none; opacity: .15;}
#player:hover { width: 120px; height: 120px; filter: hue-rotate(180deg) drop-shadow(0 0 40px cyan); }
c-c { position: absolute; width: 80%; height: 80%; border: thick inset plum; border-radius: 100% 20%; opacity: .75; }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="tz" data-lrc="就这样默默想你">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1982891256" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2418175/01/04/62/614ade273f6d1.mp4" autoplay loop muted disablePictureInPicture></video>
<div id="player"></div>
</div>
<script>
var curkey = 0, lrcAr = [], total = 8;
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];
};
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.00]《就这样默默的想你》
[00:03.00]演唱：风语（刘星红）
[00:06.00]作词：希希（赵希平） 阳光温热
[00:08.50]作曲：希希（赵希平） 踏雪韵梅
[00:11.00]歌词编辑：孟德良
[00:13.50]学习黑师20240619《烛影》原生歌词同步加视频效果
[00:16.00]
[00:18.18]一次一个不经意
[00:22.18]我们在人海 擦肩而遇
[00:26.19]爱似浪花 泛起涟漪
[00:30.19]一颗心 瞬间被你占据
[00:33.52]
[00:34.22]每日每夜 偷偷想你
[00:38.20]思念 就如同潮来潮去
[00:42.20]相思成疾 爱的痴迷
[00:46.22]不在乎 怎样的结局
[00:49.51]
[00:50.21]就这样 默默的想你
[00:54.23]不管现实 多少难题
[00:58.24]就算不能 和你一起
[01:02.24]想你 也是一种甜蜜
[01:05.53]
[01:06.23]就这样 默默的想你
[01:10.24]不管现实 能否如意
[01:14.24]爱到深处 无法呼吸
[01:18.27]哪怕是幻想 我也愿意
[01:22.50](Music)
[01:55.19]每日每夜 偷偷想你
[01:59.18]思念 就如同潮来潮去
[02:03.18]相思成疾 爱的痴迷
[02:07.22]不在乎 怎样的结局
[02:10.48]
[02:11.18]就这样 默默的想你
[02:15.22]不管现实 多少难题
[02:19.23]就算不能 和你一起
[02:23.23]想你 也是一种甜蜜
[02:26.52]
[02:27.22]就这样 默默的想你
[02:31.28]不管现实 能否如意
[02:35.25]爱到深处 无法呼吸
[02:39.25]哪怕是幻想 我也愿意
[02:42.53]
[02:43.23]就这样 默默的想你
[02:47.68]不管现实 多少难题
[02:51.67]就算不能 和你一起
[02:55.72]想你 也是一种甜蜜
[02:58.09]
[02:58.79]就这样 默默的想你
[03:03.68]不管现实 能否如意
[03:07.73]爱到深处 无法呼吸
[03:11.73]哪怕是幻想 我也愿意
[03:15.73]哪怕是幻想 我也愿意
[03:19.63]哪怕是幻想 我也愿意`;
getAr(lrc);
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>
| 
