|
|
楼主 |
发表于 2024-7-22 22:20
|
显示全部楼层
<style>
#mydiv {
--width: 1500px;
margin: 130px 0 30px calc(50% - (var(--width) / 2 + 90px));
width: 1500px;
height: 700px;
background: url('https://642303.freep.cn/642303/tu/rednv.webp') no-repeat center/cover;
box-shadow: 0 0 10px rgba(0,0,0,.5);
position: relative;
overflow: hidden;
}
#mydiv::before { content: attr(data-lrc); position: absolute; bottom: 40px; 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); }
#mydiv::after { position: absolute; content: '';
width: 1121px;
height:720px;
right: 0;
background: url('https://642303.freep.cn/642303/tu/tu2.webp') no-repeat center/180% 100%;
opacity: .99;
mix-blend-mode: screen;
-webkit-mask: radial-gradient(circle, silver, lightgreen, cyan, transparent, transparent);
}
#mydiv:hover::after {transform: scale(-1,1) rotate(180deg);opacity: .99; }
#player {
position: absolute;
right: -50px;
bottom: 420px;
filter: hue-rotate(90deg);
-webkit-mask: url('https://638183.freep.cn/638183/web/svg/6star.svg') no-repeat center/100% 100%;
cursor: pointer;
z-index: 99;
}
#player:hover { filter: hue-rotate(30deg); }
#vid { position: absolute; top:-80px; width: 100%; height: 120%; object-fit: cover; mix-blend-mode: screen; opacity: .35; pointer-events: none; opacity: .65;transform: rotateX(180deg);}
</style>
<div id="mydiv" data-lrc="向往-孙楠">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=462857454" autoplay loop></audio>
<img id="player" alt="" title="播放/暂停" src="https://642303.freep.cn/642303/za/8d80fbe1cf114194bc4cfc07b304b576_tplv-obj_400_225.gif" />
<video id="vid" src="https://img.tukuppt.com/video_show/2418175/01/04/62/614ade273f6d1.mp4" autoplay loop muted disablePictureInPicture></video>
</div>
<script>
var curkey = 0, lrcAr = [];
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 = () => {
mydiv.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]) {
mydiv.dataset.lrc = lrcAr[curkey][1];
curkey ++;
}
};
aud.oncanplay = aud.onplaying = aud.onpause = () => {
player.style.WebkitMask = `url(${aud.paused ? 'https://638183.freep.cn/638183/web/svg/6star_1.svg' : 'https://638183.freep.cn/638183/web/svg/6star.svg'}) no-repeat center/100% 100%`;
};
player.onclick = () => aud.paused ? aud.play() : aud.pause();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
var lrc = `[00:00.00]孙楠 - 向往(电视剧《鸡毛飞上天》主题曲)
[00:04.00]作曲：马上又
[00:06.00]作词：吴浩箐
[00:08.00]歌词编辑：果果
[00:10.00]QQ:765708831
[00:12.00]歌词搜索：www.lrc99.com
[00:14.00]
[00:15.13]在每一个四季
[00:16.70]海浪都向往着陆地
[00:21.60]我向往着你
[00:27.90]播种和希望
[00:29.46]随时光轻抚你脸庞
[00:34.12]还有心中的麦浪
[00:40.42]我有平凡愿望
[00:42.37]在沉默与呼喊之间
[00:46.97]今天最响亮
[00:53.33]田野中央
[00:56.45]收获坦荡
[00:59.70]羽毛向往那翅膀
[01:09.14]我向往那坚强
[01:15.37]穿过所有忧伤
[01:21.21]你站在前方和山岗一样
[01:27.22]看着我高高飞翔
[01:32.99]我向往那坚强
[01:39.23]穿过所有忧伤
[01:45.09]你站在前方和山岗一样
[01:51.14]我靠紧你的肩膀
[01:56.66]
[02:06.12]在每一个四季
[02:07.80]海浪都向往着陆地
[02:12.58]我向往着你
[02:18.85]播种和希望
[02:20.39]随时光轻抚你脸庞
[02:25.02]还有心中的麦浪
[02:31.27]我有平凡愿望
[02:33.01]在沉默与呼唤之间
[02:37.56]今天最响亮
[02:43.84]田野中央
[02:46.88]收获坦荡
[02:50.00]羽毛向往那翅膀
[02:56.18]我向往那坚强
[03:02.48]穿过所有忧伤
[03:08.56]你站在前方和山岗一样
[03:14.63]看着我高高飞翔
[03:20.57]我向往那坚强
[03:26.91]穿过所有忧伤
[03:32.75]你站在前方和山岗一样
[03:38.90]我靠紧你的肩膀`;
getAr(lrc);
</script>
|
|
