《千年缘》歌手：心然 学习水动效果
<style>#mydiv {
margin: 0 0 0 calc(50% - 881px);
width: 1600px;
height: 900px;
top:130px;
background: url('https://xlaj.cn/assets/file/zp/20240502201001.jpg') no-repeat center top;
overflow: hidden;
position: relative;
display: grid;
place-items: center;
}
#mydiv::before {
position: absolute;
content: '';
width: 100%;
height: 100%;
top: 0px;
background: inherit;
filter: url(#turb);
}
#mydiv > svg { stroke-linecap: round; }
.panda {
position: absolute;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
cursor: pointer;
z-index: 2;
}
.myfilter { position: absolute; width: 0; height: 0; }
</style>
<div id="mydiv">
<div class="panda">
<img src="https://xlaj.cn/assets/file/zp/20240502201115.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://wj1.zp68.com:812/lxx/yunhua/2022/02/20/03.mp3" autoplay="" loop=""></audio><script>(function() {
let frames = 0, rad = Math.PI / 180;
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
let js1 = 'https://xlaj.cn/assets/file/zp/20231029165226.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: ' left: 20%; top:8%;color:Honeydew; --bg: linear-gradient(rgba(0,128,128,.4),rgba(0,128,128,.7));',
fs_css: 'top: -1000px; background: transparent;',
player_css: `
width: 250px;
height: 250px;
left: 280px;
bottom: 80px;
background: url('') -5px 1px,
`,
path: 'm118.50001,10.23611c-45.44417,0 -82.2639,32.34392 -82.2639,72.2639s36.81973,72.2639 82.2639,72.2639s82.2639,-32.34392 82.2639,-72.2639s-36.81973,-72.2639 -82.2639,-72.2639zm-45.11246,62.76469c1.09464,-12.26738 10.68104,-20.80501 18.57572,-20.80501s17.48108,8.53763 18.57572,20.80501c0.2322,2.50593 -3.58246,3.4675 -4.94247,1.31124l-3.15124,-4.95357c-2.55416,-3.992 -6.36882,-6.29395 -10.44884,-6.29395s-7.89468,2.30195 -10.44884,6.29395l-3.15124,4.95357c-1.42635,2.15626 -5.24101,1.16555 -5.00881,-1.31124zm83.19268,35.78229c-9.45371,9.96542 -23.31916,15.6766 -38.08022,15.6766s-28.62651,-5.71118 -38.08022,-15.6766c-4.47808,-4.7496 3.6488,-10.69389 8.16005,-5.97343c7.43029,7.8383 18.31035,12.29652 29.92018,12.29652s22.48989,-4.48735 29.92018,-12.29652c4.51125,-4.72046 12.63812,1.25296 8.16005,5.97343zm2.0566,-34.47104l-3.15124,-4.95357c-2.55416,-3.992 -6.36882,-6.29395 -10.44884,-6.29395s-7.89468,2.30195 -10.44884,6.29395l-3.15124,4.95357c-1.36001,2.12712 -5.17466,1.16555 -4.94247,-1.31124c1.09464,-12.26738 10.68104,-20.80501 18.57572,-20.80501s17.48108,8.53763 18.57572,20.80501c0.19903,2.50593 -3.6488,3.4675 -5.00881,1.31124z',
btn: {left: 55, top: 170},
track: {track: 'Honeydew', prog: 'Teal'},
img: {play: '', pause: ''}
});
});
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 = ;
feturbulence.setAttributeNS(null, 'baseFrequency',bf.join(' '));
requestAnimationFrame(fewave);
};
fewave();
})();</script>
<Br><Br><Br><Br><Br><Br><Br><Br> 娃娃脸双路径播放器 水波效果特别美{:5_150:} {:5_150:}{:5_150:}{:5_150:}
页:
[1]