代码
<style>
#papa { margin: 0 0 0 calc(50% - 641px); width: 1280px; height: 720px; background: url('https://638183.freep.cn/638183/t24/webp/ijsh.webp') no-repeat center/cover; display: grid; place-items: center; overflow: hidden; user-select: none; position: relative; }
#play { position: absolute; left: 230px; top: 120px; animation: rot 6s linear infinite var(--state); z-index: 9; cursor: pointer; }
#papa video { position: absolute; top: -200px; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; pointer-events: none; }
@Keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://file.uhsea.com/2404/b8719ccade383eb311011e81bd4aca1bE4.mp3" autoplay loop></audio>
<video src="https://img.tukuppt.com/video_show/2475824/00/01/58/5b56a385e42de.mp4" loop muted></video>
<img id="play" src="https://638183.freep.cn/638183/small/dcjm.webp" width="150" height="150" alt="" />
</div>
<script>
//函数 ：加载JS资源
var loadJs = (file, callback) => {
var sc = document.createElement('script');
sc.src = file;
sc.charset = 'utf-8';
document.body.appendChild(sc);
sc.onload = () => callback();
};
var js1 = 'https://638183.freep.cn/638183/web/api/lrc.js';
var js2 = 'https://638183.freep.cn/638183/web/js/ball-lz.js';
//歌词js先加载并用回调方式配置参数
loadJs(js1, () => {
LRC({
papa: '#papa',
lrcAr: lrcAr,
btn: '#play',
lrc_css: 'top: 20px;',
});
});
//粒子js后加载,
loadJs(js2, () => {});
//配置粒子
var lz = {papa: '#papa', total: 40, maxsize: 20, speed: 1, move: true};
var lrcAr = [
[2.1,"林子祥 - 成吉思汗",7.6],
[17.02,"风沙之中追追赶赶",1.1],
[18.08,"彼此热烈在歌唱",2.2],
[21.05,"Ha hoo ha 不需担忧",3.0],
[24.06,"摔交饮酒彼此地上尽欢畅",3.2],
[28.01,"Ha hoo ha",2.0],
[30.04,"奔奔跑跑沙丘上马壮牛强",2.9],
[33.07,"威威风风马背上胸襟开朗",3.0],
[37,"我高声欢呼 我是热与光",4.2],
[42.01,"Hoo ha",1.1],
[43.06,"成成成吉思汗",3.1],
[47,"生不怕 死不怕 天不怕 天生英勇",3.0],
[50.03,"成成成吉思汗",2.6],
[53.06,"心向上 心向上 心向上 坚心向上",3.5],
[57,"我决意他乡往",1.0],
[58.05,"WO hoo",2.0],
[60.02,"大地任我闯荡",1.0],
[61.07,"wo ha",2.0],
[63.05,"不可阻挡我愿独霸一方",5.2],
[70.03,"成成成吉思汗",2.4],
[73.03,"生不怕 死不怕 天不怕 天生英勇",3.0],
[76.06,"成成成吉思汗",2.9],
[79.08,"心向上 心向上 心向上 坚心向上",3.9],
[83.02,"我决意他乡往",1.0],
[84.07,"WO hoo",2.0],
[86.04,"大地任我闯荡",1.0],
[87.08,"wo ha",2.0],
[89.08,"不可阻挡 只想我是王",4.2],
[96.02,"风沙之追追赶赶",1.0],
[97.07,"彼此热烈在歌唱",2.4],
[100.05,"Ha hoo ha 不需担忧",3.0],
[103.05,"摔交饮酒彼此地上尽欢畅",3.0],
[106.1,"Ha hoo ha",2.9],
[109.03,"奔奔跑跑沙丘上马壮牛强",2.8],
[112.06,"威威风风马背上胸襟开朗",2.9],
[115.09,"我高声欢呼 我是热与光",5.2],
[121,"Hoo ha",1.1],
[122.06,"成成成吉思汗",2.7],
[125.1,"生不怕 死不怕 天不怕 天生英勇",3.6],
[129.03,"成成成吉思汗",2.5],
[132.06,"心向上 心向上 心向上 坚心向上",2.5],
[135.09,"我决意他乡往",2.0],
[137.05,"WO hoo",2.0],
[139.01,"大地任我闯荡",1.1],
[140.06,"wo ha",2.0],
[142.04,"不可阻挡我愿独霸一方",5.2],
[149.01,"成成成吉思汗",2.3],
[152.02,"生不怕 死不怕 天不怕 天生英勇",3.0],
[155.06,"成成成吉思汗",3.0],
[158.08,"心向上 心向上 心向上 坚心向上",3.6],
[162.02,"我决意他乡往",1.1],
[163.08,"WO hoo",2.0],
[165.04,"大地任我闯荡",1.2],
[167,"wo ha",1.1],
[168.08,"不可阻挡 力量服四方",4.0],
[172.1,"hoo ha hoo",2.4]
];
papa.onclick = () => lz.move = !aud.paused; //控制粒子
</script>
前一篇: 在canvas画布中绘制三次贝塞尔曲线
下一篇: 用canvas画布绘制一棵静态树
