本帖最后由 花简静 于 2024-4-25 20:37 编辑
<style>
#papa { margin: 130px 0 20px calc(50% - 931px); width: 1700px; height: 900px; background: url('https://642303.freep.cn/642303/tu/423crxj0.webp') no-repeat center/cover; display: grid; place-items: center; overflow: hidden; user-select: none; position: relative; }
#player { position: absolute; bottom: 170px; right:460px; width: 120px; height: 180px; cursor: pointer; z-index: 999; }
.vid { position: absolute; bottom: 170px; right:460px;width: 200px; height: 200px; object-fit: cover; mix-blend-mode: screen; }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2139714236" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2432605/00/01/74/5b49906dc4428.mp4" loop muted></video>
<div id="player"></div>
</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();
};
//需要加载的JS资源src
var js1 = 'https://638183.freep.cn/638183/web/api/lrc.js',
js2 = 'https://638183.freep.cn/638183/web/js/dot-lz.js';
//歌词js先加载并用回调方式配置参数
loadJs(js1, () => {
LRC({
papa: '#papa',
lrcAr: lrcAr,
btn: '#player',
lrc_css: 'bottom: 26px; --bg: linear-gradient(rgba(250,250,250,.25),rgba(100,200,250,.65)); opacity: .6;font-size: 26px;color: #fff;',
});
});
loadJs(js2, () => {}); //粒子js后加载
//配置粒子
var lz = {papa: '#papa', total: 42, r: 6, max_r: 24, step: 0.5, color: '', opacity: .3, move: true};
//歌词数组
let lrcAr = [
[-1.21,"单曲： 春日信笺",0.7],
[1.89,"歌手：司南",1.1],
[2.98,"所属专辑：春日信笺",1.1],
[4.09,"作词 : 周梦忆",0.8],
[4.84,"作曲 : 芋头妈妈",0.8],
[5.63,"制作人：司南",1.0],
[6.63,"编曲：Fsy小诺",0.8],
[7.46,"吉他：大牛",0.8],
[8.25,"配唱：刘颜嘉",0.7],
[8.96,"学习黑师20240423《Blissful Mind》粒子随鼠标变化效果",4.6],
[16.01,"杨柳徐徐 梳淡妆",3.1],
[19.87,"招惹杏花香",2.3],
[22.56,"清风过 山外山",3.8],
[27.17,"回到旧街巷",2.0],
[29.85,"儿时 回忆日渐 斑驳了",3.8],
[34.3,"那一面白墙",2.2],
[37.07,"岁月 痕迹 深深浅浅",3.8],
[41.06,"已泛黄",2.8],
[46.15,"看人间 四月天",3.0],
[49.82,"天晴朗 万物长",2.9],
[53.36,"春日写下 信笺 三两张",4.0],
[57.94,"好时节如常",2.1],
[61.57,"哼首歌 轻轻唱",3.0],
[65.28,"看日光 在虚晃",2.9],
[68.9,"若无闲事 便不负时光",3.9],
[73.35,"",16.7],
[90.07,"几盏路灯 在窗外",3.6],
[94.34,"写下诗两行",2.2],
[98.19,"抬起头 隔高楼",2.7],
[101.65,"遥望着故乡",2.1],
[104.06,"生活 跌撞又 几经匆忙",4.2],
[108.89,"几经迷惘",2.1],
[111.65,"多想 化作清风",2.4],
[114.4,"回到旧街巷",2.1],
[118.93,"看人间 四月天",2.8],
[122.55,"天晴朗 万物长",2.9],
[126.13,"春日写下 信笺 三两张",4.0],
[130.7,"好时节如常",2.1],
[134.32,"哼首歌 轻轻唱",3.0],
[137.99,"看日光 在虚晃",3.0],
[141.57,"若无闲事 便不负时光",4.0],
[147.17,"",14.9],
[162.02,"这人间 每一天",3.5],
[166.18,"天晴朗 万物长",3.0],
[169.8,"四季写下 信笺 三两张",3.9],
[174.33,"好时节如常",2.2],
[178.04,"哼首歌 随你唱",2.9],
[181.67,"看日光 在虚晃",2.9],
[185.25,"若无闲事 便不负时光",4.0],
[192.53,"你在身边 就是好时光",7.6]
];
papa.onclick = () => lz.move =!aud.paused; //控制小球
</script>
<br><br><br><br><br><br>
|
