本帖最后由 花简静 于 2024-2-27 20:49 编辑
<style>#papa {
--state: paused;
margin: 130px 0 0 calc(50% - 931px);
width: 1700px;
height: 900px;
background: #7E949B url('https://pic.imgdb.cn/item/657ece48c458853aef307f93.webp') no-repeat;
box-shadow: 3px 3px 20px #000;
place-items: center;
z-index: 1;
position: relative;
overflow: hidden;
}
#mypic {
position: absolute;
right: 10px;
top: 50px;
}
#vid1 {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
opacity: .95;
object-fit: cover;
pointer-events: none;
}
#vid2 {
position: absolute;
width: 100%;
height: 110%;
top:-80px;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index: 2;
opacity: .18;
}
#mplayer {
position: absolute;
top: 100px;
left: 140px;
width: 360px;
height: 360px;
border:10px solid LightBLue;
border-radius: 80%;
outline: 0.5px solid ForestGreen;
outline-offset: 2px;
animation: sd .15s infinite alternate var(--state);
cursor: pointer;
transition: 1s;
}
#mplayer:hover { transform: scale(1.1); }
#lrc { --motion: cover1; --tt: 5s; position: absolute;left:35%;bottom: 30px; font: bold 1.8em sans-serif; color: hsl(20, 10%, 90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95)); z-index: 99;opacity: .75;}
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: linear-gradient(180deg, hsla(105, 40%, 50%, .45), hsla(120, 30%, 50%, .6), hsla(60, 20%, 50%, .75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state);z-index: 99; }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes sd {
from { box-shadow: 0 0 30px hsla(0,100%,50%,.45), 0 0 40px hsla(240,100%,50%,.25) inset; }
to { box-shadow: 0 0 60px hsla(120,80%,40%,.35), 0 0 80px hsla(120,100%,50%,.25) inset;}
}</style><div id="papa"><video id="vid2" src="https://img.tukuppt.com/video_show/2269348/00/14/64/5e593f4b8ab37.mp4" autoplay="" loop="" muted=""></video><div id="lrc" data-lrc="黑师lrc在线"></div><img id="mypic" src="https://pic.imgdb.cn/item/62479cbe27f86abb2adbb9bd.gif" alt="" /><div id="mplayer"><video id="vid1" src="https://img.tukuppt.com/video_show/2475824/00/02/20/5b5208d631f88.mp4" autoplay="" loop="" muted=""></video><audio id="aud" src="https://music.163.com/song/media/outer/url?id=2105389630.mp3" autoplay="" loop=""></audio></div></div><script>let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr[j][0]) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);showLrc(time);};
let mState = () => aud.paused ? (vid.pause(), lrc.style.setProperty('--state', 'paused')) : (vid.play(), lrc.style.setProperty('--state', 'running'));
let mKey = 0, mFlag = true;
let lrcAr = [
[0.12,"单曲：伴随着你",1.4],
[1.56,"《天空之城》中文版）",1.7],
[3.23,"歌手：何畅（虚拟歌手）",1.5],
[4.75,"所属专辑：天空之城《伴随着你》中文版",2.0],
[6.74,"",9.3],
[16,"太阳升起的地方",3.2],
[20.32,"闪耀灿烂的光芒",2.8],
[24.02,"也许因为在那里",3.1],
[28.54,"曾经是你的故乡",2.8],
[32.01,"星星点点的灯花",3.3],
[36.06,"撩动着我的牵挂",3.4],
[40.07,"也许因为想起你的身影",4.5],
[45.01,"夜幕之中飘落下",2.5],
[48.07,"等待并不是办法",3.6],
[52.03,"那么现在就出发",3.7],
[57.18,"整理好小背包就可以",3.7],
[61.04,"成为冒险家",2.7],
[67.01,"再接过爸爸留给我",3.4],
[71.06,"那炽热的向往",3.0],
[75.01,"也记住妈妈望着我",3.6],
[79,"那深情的目光",3.1],
[83.04,"地球不停在转动",3.3],
[87.06,"藏起渺小的你我",3.3],
[91.06,"你那明亮的双眸",3.2],
[95.04,"像星光洒满夜空",3.5],
[99.01,"地球不停在转动",3.6],
[103.07,"永远相伴你我",3.7],
[107.04,"不管分离还要多久",4.5],
[112.01,"总有重逢的时候",2.7],
[132.06,"再接过爸爸留给我",3.6],
[136.05,"那炽热的向往",3.2],
[140.09,"也记住妈妈望着我",3.7],
[144.09,"那深情的目光",3.3],
[148.64,"地球不停在转动",2.9],
[152.04,"藏起渺小的你我",3.5],
[156.08,"你那明亮的双眸",3.4],
[160.06,"像星光洒满夜空",3.7],
[164.03,"地球不停在转动",3.7],
[168.09,"永远相伴你我",3.8],
[173.06,"不管分离还要多久",3.6],
[177.47,"总有重逢的时候",2.5]
];
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr[j][0]) {
if (mKey === j) showLrc(lrcAr[j][2]);
else continue;
}
}
});
let showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrc.dataset.lrc = lrcAr[mKey][1];
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
papa.onclick = () => aud.paused ? (vid1.pause(),vid2.pause()) : (vid1.play(),vid2.play());</script>
<br><br><br><br><br>
|
