本帖最后由 花简静 于 2024-8-18 15:26 编辑
<style>
#papa { margin: 130px 0 20px calc(50% - 931px); width: 1700px; height: 900px; background: url('https://642303.freep.cn/642303/tu/20240508ty05.webp') no-repeat center/cover; box-shadow: inset 0 0 200px cyan, 3px 3px 6px #333; overflow: hidden; user-select: none; z-index: 1; position: relative; }
.vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 80px); object-fit: cover; mix-blend-mode: screen; opacity: 0.75; pointer-events: none; }
#canv { display: block; position: absolute; left: calc(50% - 120px); top: 20px; cursor: pointer; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1956911869" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2418175/00/01/31/5b3f2b5466757.mp4" autoplay loop muted></video>
<canvas id='canv' width="180" height="180"></canvas>
</div>
<script>
//函数 ：加载JS资源
var loadJs = (file, callback) => {
let 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',
js2 = 'https://638183.freep.cn/638183/web/js/canv3dball.js';
//歌词js先加载并用回调方式配置参数
loadJs(js1, () => {
LRC({
papa: '#papa',
lrcAr: lrcAr,
btn: '#player',
lrc_css: 'bottom: 26px;left: 50%; transform: translate(-50%); --bg: linear-gradient(rgba(250,250,250,.25),rgba(100,200,250,.65)); opacity: .6;font-size: 26px;color: #fff;',
});
});
loadJs(js2, () => {}); //粒子js后加载
//歌词数组
let lrcAr = [
[0.79,"单曲：光亮",1.1],
[1.91,"歌手：你的周周",1.5],
[3.41,"所属专辑：光亮",1.3],
[4.73,"学习黑师20240430《让生命去等候》球形粒子效果",3.3],
[8.04,"",9.5],
[17.53,"海上 一阵风吹起",4.7],
[24.82,"白云涌向陆地",1.8],
[29.12,"季风带走沙粒",1.8],
[34.03,"四季 冷暖的交替",5.3],
[41.85,"多鲜活的生命",1.6],
[46.12,"又枯萎的痕迹",1.9],
[51.05,"是奔跑中突然袭来的风雨",5.7],
[59.09,"是黑暗中一根火柴燃烧的光明",6.0],
[68.06,"也许你猜不透未知的宿命",5.7],
[76.04,"像流星飞翔着它却不知目的",6.1],
[85.02,"可是啊 我却 却愿意相信",7.9],
[94.23,"最渺小最微弱最柔软最无畏的你",5.1],
[102.05,"用尽了全力 努力地回应",8.1],
[111.3,"再无边再无尽再无解总有一线生机",5.3],
[119.37,"光亮你自己",1.5],
[138.25,"（戏曲念白：）",0.3],
[138.57,"莫听穿林打叶声",4.7],
[143.23,"一蓑烟雨任平生",4.8],
[148.06,"畅音阁里终一叙",5.2],
[153.3,"六百年一粟 沧海一梦",6.6],
[162.93,"",-0.0],
[162.92,"可是啊 我却 却愿意去相信",7.2],
[171.24,"最渺小最微弱最柔软最无畏的你",5.2],
[180.05,"用尽了全力 努力地去回应",7.2],
[188.06,"再无边再无尽再无解总有一线生机",5.6],
[196,"光亮你自己",1.9],
[199.83,"（戏曲唱腔：）",6.5],
[206.34,"莫听穿林打叶声",6.9],
[214.94,"一蓑烟雨任平生",6.9],
[223.46,"畅音阁里终一叙",6.8],
[231.58,"六百年一粟 沧海一梦",5.4],
[243.03,"无论目的 最无畏的你",11.0],
[260.04,"不问宿命 最无畏的你",10.8]
];
papa.onclick = () => lz.move =!aud.paused; //控制小球
</script>
|
