<style>
#papa { margin: 20px 0 20px calc(50% - 931px); width: 1700px; height: 900px;top:130px;background: radial-gradient(circle,transparent,rgba( 0,0,0,var(--opa))),url('https://pic.imgdb.cn/item/65ba567c871b83018a6518b2.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; --opa: .4; }
#mplayer { position: absolute; right: 216px; top: 376px; width: 86px; height: 233px; box-sizing: border-box; cursor: pointer; }
#mplayer::before, #mplayer::after { position: absolute; content: ''; width: 100%; height: 136px; background: url('https://pic.imgdb.cn/item/65ba4c42871b83018a31a70f.png') no-repeat; }
#mplayer::after { height: 97px; top: 136px; background-position: 0 -136px; transform-origin: 50% 0; animation: swear .5s linear infinite alternate var(--state); }
#mplayer:hover { filter: drop-shadow(0 0 60px snow) brightness(1.2); }
@keyframes swear { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
#vid {
position: absolute;
width: 100%;
height: 110%;
top:-80px;
opacity: .15;
object-fit: cover;
pointer-events: none;
}
</style>
<div id="papa"><video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/64/5e594fa25b1d4.mp4" autoplay loop muted></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1867132755" autoplay loop></audio>
<div id="mplayer" title="播放/暂停"></div>
</div>
<script>
let sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);
sFile.onload = () => {
LRC({
papa: '#papa',
lrcAr: geci,
btn: '#mplayer',
lrc_css: 'left: 50%; transform: translate(-50%);--bg: linear-gradient(rgba(250,250,250,.25),rgba(255,165,0.65)); position: absolute; bottom: 20px; font: bold 1.8em sans-serif; color: #F0F8FF;',
});
};
let geci = [
[-1.6,"单曲：繁花（古风女版）",1.6],
[3.23,"歌手：锦瑟",1.2],
[4.46,"所属专辑：繁花—《三生三世十里桃花》插曲",1.1],
[5.59,"学习黑师《记忆》闪烁背景及半图摇曳效果",5.2],
[10.83,"",12.9],
[23.07,"遇见你的眉眼",2.9],
[26.05,"如清风明月",2.8],
[29.07,"在似曾相识的凡世间",4.7],
[35.03,"顾盼流连",2.5],
[38.17,"如时光搁浅",2.4],
[41.1,"是重逢 亦如初见",3.8],
[47.02,"缠绵缱绻",2.0],
[49.01,"有你的思念",3.1],
[52.09,"温暖在我掌心蔓延",4.6],
[58,"无涯荒野",2.9],
[61,"谁忘了时间",2.8],
[64.06,"一半青涩 一半纯真",4.1],
[73.06,"数着年月只为花开那一面",5.0],
[78.09,"就算来来回回错过又擦肩",5.2],
[84.08,"你的喜悲忧乐我全都预见",5.9],
[90.02,"三千繁花只为你一人留恋",5.7],
[108.04,"遇见你的眉眼",2.7],
[111.29,"如清风明月",2.4],
[114.05,"在似曾相识的凡世间",4.6],
[120.01,"顾盼流连",2.1],
[122.07,"如时光搁浅",3.0],
[125.08,"是重逢 亦如初见",4.8],
[132.01,"梦醒蹁跹",2.0],
[134.02,"有你的画面",3.1],
[137.08,"温热仍在心底蔓延",4.4],
[144.05,"混沌流年",1.8],
[146.41,"谁忘了誓言",2.4],
[149.4,"一半苦涩 一半情深",3.6],
[158.15,"数着年月只为花开那一面",4.9],
[163.07,"就算来来回回错过又擦肩",5.2],
[170.02,"你的喜悲忧乐我全都预见",5.0],
[175.05,"三千繁花只为你一人留恋",5.2],
[181.03,"数着年月只为花开那一面",5.7],
[187.29,"就算来来回回错过又擦肩",4.4],
[193,"你的喜悲忧乐我全都预见",5.5],
[199.09,"三千繁花只为你一人留恋",4.6]
];
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
setInterval (function() { if(!aud.paused) papa.style.setProperty('--opa', Math.random()); },600);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
<br><br><br><br><br><br><br><br>
发表于 2024-1-31 22:28
发表于 2024-1-31 22:30
