<style>
#papa {
margin: 0 0 0 calc(50% - 930px);
width: 1700px;
height: 920px;
top:130px;
background: url('https://pic.imgdb.cn/item/6517f8b1c458853aef5411ca.webp') no-repeat center/cover;
box-shadow: 4px 4px 8px black;
overflow: hidden;
display: grid;
place-items: center;
z-index: 1;
position: relative;
--state: running; }
#sky {
position: absolute;
width: 1700px;
height: 800px;
bottom: 0;
right: 0;
transform: rotate(30deg);
}
</style>
<div id="papa">
<div id="sky"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1457248961" autoplay="" loop=""></audio>
</div>
<script>(function() {
let lrcAr = [
[1.45,"单曲:你笑起来真好看",1.1],
[2.5,"歌手:安安",1.0],
[3.55,"所属专辑:你笑起来真好看",1.1],
[4.62,"作词 : 周兵",1.0],
[5.57,"作曲 : 李凯稠",0.4],
[6.02,"想去远方的山川,想去海边看海鸥",5.7],
[12.13,"不管风雨有多少,有你就足够",4.5],
[17.75,"喜欢看你的嘴角,喜欢看你的眉梢",5.4],
[23.52,"白云挂在那蓝天,像你的微笑",4.6],
[28.94,"你笑起来真好看,像春天的花一样",4.7],
[34.55,"把所有的烦恼所有的忧愁,统统都吹散",4.9],
[40.26,"你笑起来真好看,像夏天的阳光",5.0],
[46.33,"整个世界全部的时光,美得像画卷",4.6],
[63.05,"想去远方的山川,想去海边看海鸥",5.7],
[69.23,"不管风雨有多少,有你就足够",4.5],
[74.92,"喜欢看你的嘴角,喜欢看你的眉梢",5.4],
[80.65,"白云挂在那蓝天,像你的微笑",4.6],
[86.03,"你笑起来真好看,像春天的花一样",4.9],
[91.69,"把所有的烦恼所有的忧愁,统统都吹散",5.0],
[97.44,"你笑起来真好看,像夏天的阳光",5.1],
[103.48,"整个世界全部的时光,美得像画卷",4.6],
[108.97,"你笑起来真好看,像春天的花一样",4.8],
[114.56,"把所有的烦恼所有的忧愁,统统都吹散",5.0],
[120.27,"你笑起来真好看,像夏天的阳光",5.1],
[126.08,"整个世界全部的时光,美得像画卷",5.0],
[131.78,"你笑起来真好看,像春天的花一样",4.8],
[137.44,"把所有的烦恼所有的忧愁,统统都吹散",4.9],
[143.1,"你笑起来真好看,像夏天的阳光",5.0],
[149.23,"整个世界全部的时光,美得像画卷",4.6],
[154.93,"整个世界全部的时光,美得像画卷",4.7]
];
let js1 = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.js',
js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_2d.js';
let loadJs = (url,callback) => {
let body = document.querySelector('body'), jsNode = document.createElement('script');
jsNode.charset = 'utf-8';
jsNode.setAttribute('src', url);
body.appendChild(jsNode);
jsNode.onload = () => callback();
};
loadJs(js1, () => {
HCPlayer({
papa: '#papa',
lrcAr: lrcAr,
lrc_css: 'bottom: 20px;--bg: linear-gradient(hsla(10,55%,40%,.15),hsla(120,26%,45%,.7));color: #aaa;',
fs_css: 'transform: translate(-100px,40px); color: #FF0000 background: transparent;',
player_css: 'transform: translate(-400px,0;); width: 1930px; height: 420px;',
path: 'm310.29249,52.84883l0,28.29044c-59.18432,3.98935 -105.79996,46.09556 -105.79999,97.44484c0,-9.25414 12.88002,-16.76469 28.75,-16.76469c15.86998,0 28.75,7.51055 28.75,16.76469c0,-9.25414 12.88002,-16.76469 28.75,-16.76469c7.5579,0 14.41662,1.75651 19.54999,4.54044l0,137.95953c0,6.16947 -4.12158,11.17649 -9.19999,11.17649c-5.07838,0 -9.2,-5.00702 -9.2,-11.17649l0,-5.58823l-18.4,0l0,5.58823c0,18.50822 12.36478,33.52942 27.6,33.52942c15.23518,0 27.60001,-15.02119 27.60001,-33.52942l0,-137.95953c5.13336,-2.78393 11.9921,-4.54044 19.54999,-4.54044c15.86998,0 28.75,7.51055 28.75,16.76469c0,-9.25414 12.88002,-16.76469 28.75,-16.76469c15.86998,0 28.75,7.51055 28.75,16.76469c0,-51.34931 -46.61564,-93.45549 -105.79999,-97.44484l0,-28.29044l-18.40002,0z',
btn: {left: 254, top: 100},
track: {track: 'lightgray', prog: 'olive'},
img: {play: '', pause: ''}
});
});
loadJs(js2, () => {
H5lz({
papa: '#sky',
total: 10,
size: {width:60, height: 32},
shape: {background: 'url("https://638183.freep.cn/638183/web/svg/yjzi1.svg") no-repeat center/cover', borderRadius: '0'},
ani: 'toLeft',
maxTime: 30,
offset: {x: 0, y: 0},
});
});
})();
</script>
<br><br><br><br><br><br><br><br><br>