<style>
#papa { margin: 20px 0 20px calc(50% - 800px); width: 1435px; height: 760px; top:130px;background: url('https://pic.imgdb.cn/item/65bf60d0871b83018a5fa6b4.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; }
.mypic { position: absolute; cursor: pointer; animation: rot var(--du) infinite linear var(--state); }
.mypic:nth-of-type(1) { left: 80px; top: 180px; width: 50px; mix-blend-mode: hard-light;filter: opacity(.8); --du: 6s; }
.mypic:nth-of-type(2) { right: 300px; top: 180px; filter: opacity(.8) blur(.5px); --du: 10s; }
.mypic:nth-of-type(3) { width: 120px; right: 300px; top: 180px; filter: opacity(.9) brightness(1.2); --du: 4s; }
@keyframes rot { to { transform: rotate(360deg); } }
#vid {
position: absolute;
width: 100%;
height: 110%;
opacity: .65;
top:-80px;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
}
</style>
<div id="papa">
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1caa11c20fb.mp4" autoplay loop muted></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1431107987" autoplay loop></audio>
<img class="mypic" src="https://638183.freep.cn/638183/small/hxxb.png" alt="" />
<img class="mypic" src="https://638183.freep.cn/638183/small/hxxb.png" alt="" />
<img class="mypic" src="https://638183.freep.cn/638183/small/hxxb.png" alt="" />
</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: '.mypic',
lrc_css: 'left: 50%; transform: translate(-50%);--bg: linear-gradient(rgba(250,250,250,.25),rgba(95,158,160.65)); position: absolute;opacity: .85; bottom: 20px; font: bold 1.8em sans-serif; color: #F0F8FF;',
});
};
let geci = [
[-0.02,"单曲：春暖花开",3.0],
[3.03,"歌手：群星",2.1],
[5.16,"所属专辑：公益歌曲",2.9],
[8.05,"作词 : 清歌",2.6],
[10.62,"作曲 : 宋可夫",1.8],
[12.45,"编配：王崴",2.3],
[14.74,"录音/王厚琦 缩混/李春云",3.8],
[18.52,"学习黑师《灵感》小花转动效果",18.6],
[37.08,"雨后的原野草木葱茏，",5.1],
[43.04,"天边静静挂着彩虹，",3.9],
[49.08,"大象在穿越熟悉的丛林，",5.3],
[56.09,"松鼠钻出了它的树洞。",3.2],
[62.08,"陌上的花儿开了几丛，",5.2],
[68,"燕子回家捎来春风，",3.9],
[74,"炊烟在黄昏里慢慢升起，",5.5],
[80.03,"母亲露出久违的笑容。",4.4],
[96.27,"熬过黑夜，",3.3],
[101.83,"熬过悲伤的寒冬，",4.4],
[108.04,"我们捡起破碎的梦，",4.5],
[114.05,"重新点亮所有熄灭的心灯。",7.2],
[124.03,"春暖花开，",3.5],
[129.09,"地球孤独地转动，",5.1],
[136.17,"祈愿世间再没有痛，",4.2],
[142.06,"万物苍生共享爱的星空。",7.7],
[181.01,"熬过黑夜，",2.7],
[186.12,"熬过漫长的寒冬，",4.2],
[192,"我们捡起破碎的梦，",4.4],
[198.02,"重新点亮所有熄灭的心灯。",7.4],
[207.12,"",0.9],
[208.01,"春暖花开，",3.7],
[214.03,"地球不停地转动，",4.4],
[220.06,"祈愿世间再没有痛，",4.4],
[226.04,"万物苍生共享爱的星空。",7.8]
];
var btns = document.querySelectorAll('.mypic');
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
btns.forEach(btn => btn.onclick = () => aud.paused ? aud.play() : aud.pause());
</script>
<br><br><br><br><br><br><br><br>
发表于 2024-2-5 10:30
