本帖最后由 花简静 于 2024-3-8 21:23 编辑
<style>
#papa {
margin: 20px 0 30px calc(50% - 931px);
width:1700px;
height: 900px;
top:130px;
background: url('https://pic.imgdb.cn/item/65ace836871b83018a287c44.webp') no-repeat center/cover;
box-shadow: 4px 4px 16px #000;
overflow: hidden;
z-index: 1;
position: relative;
display: grid;
place-items: center;
}
#mplayer {
display: grid;
place-items: center;
position: absolute;
width: 500px;
height: 500px;、
top:20px;
z-index: 10;
cursor: pointer;
}
.doll {
position: absolute;
border-radius: 23px;
opacity: .75;
background: url('https://pic.imgdb.cn/item/65ac9cab871b83018a0b3d9f.png') no-repeat center/cover ;
animation: rot var(--duration) var(--delay) infinite linear var(--state);
top:30px;
}
#vid {
position: absolute;
width: 100%;
height: 110%;
top: -80px;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
opacity: .60;
}
@keyframes rot {
to { transform: rotate(var(--deg)); }
}
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2118161413" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/06/15/615d34aa3bead.mp4" loop muted></video>
<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%); bottom: 10px;--bg: linear-gradient(rgba(250,250,250,.25),rgba( 178,34,34,.65)); color: #fff;',
});
};
let geci = [
[1.6,"单曲：一生一念",1.1],
[2.71,"仙剑六影视剧《祈今朝》遗爱轮回曲",1.2],
[3.94,"歌手：单依纯",1.4],
[5.35,"所属专辑：一生一念",1.4],
[6.79,"作词 : 沈忞维/陈恬",1.2],
[7.98,"作曲 : 陈恬",1.4],
[9.35,"编曲 : 符昕",1.1],
[10.45,"制作人 : 黄一",1.2],
[11.69,"出品：网易·云上",1.2],
[12.85,"学习黑师《浮光》多层旋转效果",3.2],
[16.01,"",19.7],
[35.71,"一根枝桠 两生的花",4.7],
[41.65,"秋来春去终落下",3.6],
[46.9,"日升月落 能否 给你柔软回答",9.3],
[60.12,"梧桐树下 雨滴敲打",4.5],
[66.25,"折枝来换回忆无暇",4.4],
[72.02,"如丝线 织烟雨入画",4.1],
[77.06,"也结成 如虹牵挂",3.9],
[82.34,"许你一生一世亦嗔亦痴的年华",5.7],
[88.03,"换你前尘往事湮没于喧哗",6.0],
[94.06,"陪你颠沛流离亦步亦趋轻咽下",7.0],
[101.01,"别害怕 别害怕",4.8],
[107.14,"写我一丝一缕一字一句的挣扎",5.9],
[113.03,"为你不由理智心乱也犯傻",4.7],
[119.05,"赌上一生一念一心一愿一刹那",5.8],
[126.02,"不作答 不作罢",4.0],
[149.01,"无边烟霞 织幅落花",6.6],
[155.58,"替我送你一诺无价",5.7],
[161.32,"将心事 随血色融化",5.5],
[166.79,"可听见 痴语喑哑",4.2],
[171.01,"许你一生一世亦嗔亦痴的年华",6.0],
[177.05,"换你前尘往事湮没于喧哗",7.0],
[184.05,"陪你颠沛流离亦步亦趋轻咽下",6.0],
[190.07,"别害怕 别害怕",4.8],
[196.08,"写我一丝一缕一字一句的挣扎",5.9],
[202.46,"为你不由理智心乱也犯傻",4.4],
[209.04,"赌上一生一念一心一愿一刹那",5.8],
[215.19,"不作答 不作罢",6]
];
var setSize = (ww) => Math.sqrt(2 * Math.pow(ww,2));
var size = setSize(mplayer.offsetWidth / 2);
[...new Array(9).keys()].forEach(key => {
var item = document.createElement('div');
item.className = 'doll';
var deg = key % 2 == 0 ? -360 : 360;
item.style.cssText += `
width: ${size}px;
height: ${size}px;
background-color: transparent;
--duration: ${Math.random() * 10 + 10}s;
--delay: ${Math.random() *-2}s;
--deg: ${deg}deg;
`;
mplayer.appendChild(item);
size = setSize(size / 1.8);
});
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
function mState() {
aud.paused
? (papa.style.setProperty('--state', 'paused'), vid.pause(), mplayer.title = '播放')
: (papa.style.setProperty('--state','running'), vid.play(), mplayer.title = '暂停');
}
</script>
<br><br><br><br><br><br><br><br><br>
|
发表于 2024-1-24 19:22
