<style>
#papa { margin: 0 0 0 calc(50% - 931px); width: 1700px; height: 900px; top:130px;position: relative; background: silver url('https://pic.imgdb.cn/item/65bc6997871b83018a417430.webp') no-repeat center/cover; box-shadow: 4px 4px 8px rgba(0,0,0,.6); overflow: hidden; display: grid; place-items: center; --state: paused; }
#mplayer { position: absolute; bottom: 60px; text-align: center; color: #3b3b3b; }
#mplayer p { margin: 0; padding: 0; cursor: pointer; }
#mprog { width: 240px; accent-color: lightyellow; outline: none; cursor: pointer; }
#btnplay { width: 60px; animation: rotating 6s infinite linear var(--state); }
#lrc { --motion: cover2; --tt: 1s; --bg: repeating-linear-gradient(135deg, SaddleBrown 1px, Peru 6px); position: absolute; bottom: 15px; font: bold 1.8em sans-serif; color: hsl(10, 10%, 90%); white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 100%, 0%, .85)); pointer-events: none; z-index: 900; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 0%; height: 100%; color: transparent; border-bottom: 6px dotted orange; overflow: hidden; white-space: pre; background: var(--bg); filter: inherit; background-clip: text; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }
#vid { position: absolute; width: 500px; height: 300px; right:10px;object-fit: cover; aspect-ratio: 1; border-radius: 50%; filter: drop-shadow(3px 4px 20px #000); mix-blend-mode: soft-light; cursor: pointer; }
#vid1 {
position: absolute;
width: 100%;
height: 110%;
opacity: .35;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
}
@keyframes cover1 { from { width: 0%; } to { width: 100%; } }
@keyframes cover2 { from { width: 0%; } to { width: 100%; } }
@keyframes rotating { to { transform: rotate(360deg); } }
</style>
<div id="papa"><video id="vid1" src="https://img.tukuppt.com/video_show/2269348/00/14/54/5e53cb4ba4fd8.mp4" autoplay loop muted></video>
<audio src="https://music.163.com/song/media/outer/url?id=485201794" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/02/05/5b4ff5966c21c.mp4" loop muted></video>
<div id="mplayer">
<p><img id="btnplay" src="https://638183.freep.cn/638183/t23/btn/meihua_133482968750383750.png" title="播放/暂停" alt="" /></p>
<p>
<output id="mcur">0:00</output>
<input id="mprog" type="range" min="0" step="any" max="100" value="0" title="调节进度" />
<output id="mdu">0:00</output>
</p>
</div>
<div id="lrc" data-lrc="HuaChao LRC Player">HuaChao LRC Player</div>
</div>
<script>
var geci= [
[-0.2,"单曲：呼吸",0.9],
[0.67,"歌手：俞韵",0.4],
[1.07,"像灰雁对云的留恋",3.0],
[4.08,"像鱼游在海水里面",4.0],
[8.07,"你是我生命全部的意义",5.5],
[17.02,"无论何时何地在你眼里",4.7],
[22,"我都可以 再次找回力气",6.6],
[31.02,"因为我爱你 才能呼吸",6.2],
[38.89,"作词 : 俞赫璇Lovia",1.1],
[40,"作曲 : 俞赫璇Lovia",1.1],
[41.12,"编曲：俞赫璇Lovia",1.1],
[42.19,"混音：王博",1.1],
[43.29,"录音：崔恒",1.0],
[44.28,"学习黑师《辞花》range进度条及歌词同步效果",4.3],
[53.37,"你侵入我所有空间",3.7],
[57.82,"从脑海到我心里面",3.3],
[62,"每个缝隙都被你牢牢占据",4.0],
[70.02,"心跳调在你的频率",3.0],
[73.04,"关心你的关心",4.0],
[77.05,"我才能继续",4.5],
[83.09,"不需要你 有任何的回应",6.5],
[92.08,"我都不曾 有分毫的怀疑",5.5],
[99.02,"爱你是我最正确的决定",5.5],
[105.05,"有你才得以喘息",2.4],
[108,"每当我看着你",2.5],
[111.04,"世界变得温柔安定",4.0],
[115.08,"不管到你 有多远的距离",6.6],
[124.08,"我都不会 有半秒的分心",5.5],
[132.03,"爱你是我最胜任的事情",4.0],
[136.02,"就像每一口空气",4.2],
[140.18,"依赖的很彻底",2.9],
[143.04,"戒不掉思念你",3.3],
[148.08,"因为我爱你",2.2],
[151.08,"才能呼吸",2.4],
[158.07,"你钻进我所有念头",3.7],
[161.81,"每分每秒黑夜白昼",4.0],
[165.78,"每个情绪都紧紧被你牵动",4.3],
[173.06,"爱对焦在你的笑容",3.9],
[177,"感受你的感受",4.0],
[181.02,"我不会放松",5.1],
[188,"不需要你 有一点点在意",5.7],
[195,"我都不曾 有片刻的顾虑",6.7],
[203.08,"爱你是我最正确的决定",5.0],
[208.08,"有你才得以喘息",3.9],
[212.02,"每当我看着你",3.0],
[215.04,"纷扰喧嚣都会平静",5.0],
[220.04,"不管到你 要多久的光阴",6.5],
[228.03,"我都不会 有分毫的差异",6.0],
[235.91,"爱你是我最胜任的事情",4.6],
[240.91,"就像每一口空气",3.2],
[244.09,"依赖的很彻底",2.6],
[247.04,"戒不掉思念你",2.8],
[252,"如果我被抽离 我会窒息",5.7],
[260,"因为我爱你 是我的呼吸",8.7]
];
var sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/js/lrcku_range.js';
sf.charset = 'utf-8';
document.querySelector('body').appendChild(sf);
vid.onclick = (e) => aud.paused ? aud.play() : aud.pause();
</script>
<br><br><br><br><br><br><br><br><br>
发表于 2024-2-2 13:22
发表于 2024-2-2 14:10
