本帖最后由 花简静 于 2024-8-18 15:11 编辑
<style>#mydiv {
margin: 0 0 0 calc(50% - 931px);
width: 1600px;
height: 900px;
top:130px;
background: url('https://pic.imgdb.cn/item/652d2ee7c458853aefe6b5d5.webp') no-repeat center top;
overflow: hidden;
position: relative;
display: grid;
place-items: center;
}
#mydiv::before {
position: absolute;
content: '';
width: 100%;
height: 76%;
top: 1px;
background: inherit;
filter: url(#turb);
}
#mydiv > svg { stroke-linecap: round; }
.panda {
position: absolute;
width: 100%;
height: 100%;
top: 9%;
left: 10.7%;
cursor: pointer;
z-index: 2;
}
.myfilter { position: absolute; width: 0; height: 0; }</style><div id="mydiv"><div class="panda"><img src="https://pic.imgdb.cn/item/652d2a71c458853aefd8e468.png" alt="" /></div></div><svg class="myfilter"> <filter id="turb" filterunits="objectBoundingBox" x="0" y="0" width="100%" height="100%"> <feturbulence id="feturbulence" type="fractalNoise" numoctaves="3" seed="2"></feturbulence> <fedisplacementmap xchannelselector="G" ychannelselector="B" scale="20" in="SourceGraphic"></fedisplacementmap> </filter></svg><audio id="aud" src="https://music.163.com/song/media/outer/url?id=2067118838" autoplay="" loop=""></audio><script>(function() {
let frames = 0, rad = Math.PI / 180;
let lrcAr = [
[0.71,"单曲：奈何",1.4],
[2.15,"电视剧《玉骨遥》片尾曲",1.5],
[3.63,"歌手：em",1.4],
[5.07,"所属专辑：玉骨遥 影视原声专辑",1.8],
[6.88,"作词 : 小柯",1.2],
[8.11,"作曲 : 小柯",1.4],
[9.47,"编曲 : 小柯",1.1],
[10.58,"学习黑师《久石譲 - 月光の雲海》水波滤镜效果",1.5],
[12.05,"奈何你我遇见",3.4],
[16.89,"奈何此为命劫",3.3],
[21.02,"奈何琉璃花与雪寒薇",4.1],
[26.04,"爱与恨不分青白",3.7],
[32.02,"奈何一语成谶",2.8],
[36.03,"奈何缘起缘灭",4.0],
[41.71,"奈何一饮一啄不亏不欠",3.2],
[45.6,"玉骨刺眉泪潸然",3.5],
[52.08,"你心头的那滴血",3.1],
[56.45,"已风干成锁我的环",2.5],
[61.57,"锁住我千万里的行踪",3.9],
[66.78,"不离你身边",2.3],
[71.61,"你心头的那滴血",3.6],
[76.02,"已风干成锁我的环",2.9],
[81.03,"肝肠可以寸寸断",4.2],
[86.55,"你我目光总相连",3.3],
[99.02,"奈何一语成谶",3.3],
[104.07,"奈何缘起缘灭",3.4],
[109.27,"奈何一饮一啄不亏不欠",3.1],
[113.04,"玉骨刺眉泪潸然",3.6],
[119.05,"你心头的那滴血",3.6],
[123.98,"已风干成锁我的环",2.5],
[129.06,"锁住我千万里的行踪",3.5],
[134.26,"不离你身边",2.9],
[139.09,"你心头的那滴血",3.6],
[144.05,"已风干成锁我的环",2.5],
[149.07,"肝肠可以寸寸断",3.7],
[154.13,"你我目光总相连",2.9],
[159.02,"你心头的那滴血",3.6],
[164.05,"已风干成锁我的环",2.7],
[169.01,"锁住我千万里的行踪",3.9],
[174.25,"不离你身边",2.2],
[179.13,"你心头的那滴血",3.6],
[184.04,"已风干成锁我的环",2.5],
[189.03,"肝肠可以寸寸断",3.6],
[194.13,"你我目光总相连",2.9],
[199.38,"奈何你我遇见",3.1],
[204.02,"奈何此为命劫",3.9]
];
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: '#mydiv',
lrcAr: lrcAr,
lrc_css: 'bottom: 20px; --bg: linear-gradient(rgba(250,250,250,.25),rgba(100,200,250,.65)); color: #fff;',
fs_css: 'left: -200px; background: transparent;',
player_css: 'width: 200px; height: 200px; right: 500px; bottom: 180px; background: url("https://pic.imgdb.cn/item/652d3893c458853aef08a9c3.png") no-repeat ',
path: 'M 12.5 100 Q 25 0 62.5 100 Q 100 200 137.5 100 Q 175 0 187.5 100',
btn: {left: 30, top: 20},
track: {track: 'SteelBlue', prog: ' CadetBlue'},
img: {play: '', pause: ''}
});
});
loadJs(js2, () => {
H5lz({
papa: '#mydiv',
total: 80,
size: {width: 4, height: 4},
shape: {background: '#eee', borderRadius: ''},
ani: 'toBottom',
maxTime: 30,
offset: {x: -80, y: 0},
});
});
let fewave = () => {
let bfx = 0.01, bfy = 0.1;
frames += 0.5;
bfx += 0.002 * Math.cos(frames * rad);
bfy += 0.02 * Math.sin(frames * rad);
bf = [bfx, bfy];
feturbulence.setAttributeNS(null, 'baseFrequency',bf.join(' '));
requestAnimationFrame(fewave);
};
fewave();
})();</script>
<Br><Br><Br><Br><Br><Br><Br><Br>
|
