醉美水芙蓉 发表于 2023-10-19 21:28:11

故乡的月光(DJ 阿卓版)-海来阿木

<style>
#mydiv {
      margin: 0 0 0 calc(50% - 653px);
      width: 1139px;
      height: 640px;
      background: url('https://pic.imgdb.cn/item/652e91f2c458853aeff17c83.jpg') no-repeat center bottom;
      box-shadow: 4px 4px 8px rgba(0,0,0,.75);
      overflow: hidden;
      position: relative;
      display: grid;
      place-items: center;
}
#mydiv::before {
      position: absolute;
      content: '';
      width: 100%;
      height: 76%;
      bottom: 1px;
      background: inherit;
      filter: url(#turb);
}
#mydiv > svg { stroke-linecap: round; }
.myfilter { position: absolute; width: 0; height: 0; }
</style>

<div id="mydiv"></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://www.qqmc.com/mp3/music308181275.mp3" autoplay loop></audio>

<script>

(function() {
      let frames = 0, rad = Math.PI / 180;

      let lrcAr= [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
      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: 'top: 20px;',
                        fs_css: 'left: -200px; background: transparent;',
                        player_css: 'width:416px; height:315px; left: 20px; bottom: 20px; background: url("") no-repeat 35px 35px',
                        path: 'm76.31162,160.386c0.00582,-1.85744 1.98991,-13.24583 4.41068,-25.30766c7.54835,-37.611 7.65939,-37.77698 17.24319,-25.78952l5.67017,7.09229l16.58236,-7.01465c21.93327,-9.27812 48.10476,-12.71041 72.16246,-9.46373c10.21224,1.37824 21.04816,3.61835 24.07986,4.97801c6.01911,2.69938 5.63328,5.01757 -3.96006,23.79303c-5.25789,10.2905 -5.76259,10.58378 -14.84501,8.6273c-15.45859,-3.32983 -40.62964,-2.28101 -52.78233,2.19936l-11.39432,4.20092l7.99798,6.99562c4.39891,3.84769 6.89084,7.56911 5.53768,8.2699c-1.35321,0.70081 -17.81698,2.0667 -36.58613,3.03521c-28.16009,1.4532 -34.12417,1.17077 -34.11649,-1.61606l-0.00001,-0.00001zm145.00239,103.70124l-12.19872,-13.53941l11.10701,-9.0003c11.43164,-9.26324 19.6763,-22.26874 23.30855,-36.76817l2.07281,-8.27422l-11.9553,1.60193c-6.57542,0.88118 -11.99576,0.76668 -12.0452,-0.25433c-0.23087,-4.76682 31.03181,-51.75692 34.07057,-51.21065c4.77802,0.8589 53.25374,36.0424 53.25374,38.65119c0,1.16438 -5.09462,2.79977 -11.3213,3.63413l-11.32132,1.51699l-1.11736,16.17811c-1.43313,20.74906 -14.48048,44.69631 -32.64603,59.91886c-7.27567,6.09702 -14.52906,11.08542 -16.11861,11.08542c-1.58959,0 -8.37955,-6.09284 -15.08884,-13.53955l0,-0.00001zm-110.11791,37.94996c0,-1.49707 1.91649,-5.82753 4.25885,-9.62333c4.24979,-6.88675 4.22519,-6.92019 -11.61833,-15.73548c-24.78836,-13.79211 -43.21358,-38.27226 -49.00911,-65.11475l-1.90002,-8.80013l13.54719,-1.55597c27.92596,-3.20757 28.18097,-3.11061 33.77384,12.83906c3.77407,10.76284 8.41583,17.2128 18.42178,25.59767c7.35701,6.16515 14.40432,10.67689 15.66072,10.02621c1.25635,-0.65067 3.07482,-4.49538 4.04106,-8.54385c0.96624,-4.04847 2.98104,-7.3609 4.47734,-7.3609c3.43531,0 35.78556,42.74412 36.29914,47.96174c0.34299,3.48479 -17.14469,9.51844 -62.72026,21.64007c-2.90612,0.77291 -5.23218,0.1816 -5.23218,-1.33035l-0.00001,0.00001z',
                        btn: {left: 60, top: 40},
                        track: {track: 'lawngreen', prog: 'green'},
                        img: {play: '', pause: ''}
                });
      });

      loadJs(js2, () => {
                H5lz({
                        papa: '#mydiv',
                        total: 60,
                        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 = ;
                feturbulence.setAttributeNS(null, 'baseFrequency',bf.join(' '));
                requestAnimationFrame(fewave);
      };

      fewave();

})();

</script>

顶不顶个球 发表于 2023-12-28 19:44:00

这个作品漂亮！！！！

确认过眼神 发表于 2024-1-24 02:12:42

这个作品漂亮！！！！
页: [1]
查看完整版本: 故乡的月光(DJ 阿卓版)-海来阿木