醉美水芙蓉 发表于 2023-10-8 15:05:37

爱得越深痛越真-凯小晴（DJ 阿卓版）

<style>
#papa { margin: 0 0 0 calc(50% - 723px); width: 1267px; height: 686px; background: url('https://www.yiyuen.com/e/file/view/638960') 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: 400px; height: 400px; top: 0; left: 0; transform: rotate(30deg); }
</style>

<div id="papa">
        <div id="sky"></div>
        <audio id="aud" src="https://www.qqmc.com/mp3/music299174130.mp3" autoplay loop></audio>
</div>

<script>

(function() {
        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: '#papa',
                        lrcAr: lrcAr,
                        lrc_css: 'top: 20px;',
                        fs_css: 'bottom:40px; left:100px;transform: translate(-100px,40px); color: #eee; background: transparent;',
                        player_css: 'transform: translate(-100px,0); width: 240px; height:240px;bottom:20px;left:100px;',
                        path: 'm125.06716,117.12984c0.70933,0.61019 2.21047,-0.5455 2.93976,-0.68829c-0.82083,-1.387 2.27095,-8.14421 1.20387,-10.59814c-0.32833,-5.548 -8.63917,-18.07147 -9.68583,-19.5247c0.39925,-0.97457 4.87365,-0.06769 4.74008,0.07212c-1.86717,1.95503 6.30078,13.17506 7.24408,19.66596c1.73813,-0.12504 4.02123,-0.9715 5.03446,0.42677c0.94619,-1.3439 8.24694,-11.61214 8.64606,-20.48493c0.0572,-1.27152 4.01965,-0.4668 3.27427,0.30821c-1.1948,5.52427 -9.62043,21.03461 -10.27867,21.59931c0.76607,4.83666 0.45592,5.16818 5.34907,8.92904c2.20213,-6.72119 6.89421,-12.4265 11.1917,-18.10493c4.85257,-6.37576 8.10924,-12.48369 13.45464,-19.12089c7.03677,-8.43117 16.02351,-16.12429 24.2543,-20.71667c5.7258,-3.19471 15.31931,-5.93346 16.78998,-6.1127c2.72451,-0.34381 5.18832,-0.28278 8.41774,0.3409c4.7651,0.9202 9.41784,1.43412 14.42072,4.48654c4.70416,3.91757 3.07799,8.82747 2.20088,13.42651c-7.2452,10.38526 -14.66586,22.82303 -17.00293,35.5475c-0.78577,4.71162 -2.19858,12.83065 -5.53301,17.93063c-5.36063,7.84479 -11.92125,7.55467 -18.08538,8.6181c3.75593,1.39784 7.82963,5.96205 11.48431,10.54855c5.70111,7.21403 8.47907,14.61207 7.00683,22.66615c-0.31343,1.68932 -5.74931,14.50265 -8.40809,18.52316c-10.09152,15.30933 -23.83029,25.69186 -34.90346,24.00681c-3.98761,-0.60678 -14.98677,-11.4894 -16.96432,-14.70059c-4.90917,-7.97154 -8.9415,-17.58674 -9.10724,-25.98147c-0.61024,-0.79251 -1.35654,-0.85106 -1.02749,-1.91133c-0.61149,2.42789 -2.55325,10.33456 -5.42794,15.33306c-4.15598,7.2264 -7.96031,-3.57599 -9.50019,-12.33628c-0.52789,-3.00301 -0.14046,-3.5229 -0.75615,-5.31857c-2.91133,1.43582 -1.37841,5.59904 -2.52094,8.96216c-0.96865,2.92866 -5.30665,11.87392 -6.50461,13.9132c-3.82935,6.51865 -12.42787,16.38291 -18.66377,18.74986c-5.78766,2.19684 -10.69296,1.88863 -15.34446,-1.21237c-5.99963,-3.99968 -14.45487,-13.28883 -19.65659,-20.84188c-6.58505,-9.34574 -12.34054,-23.38731 -6.86269,-33.27803c3.49635,-6.17126 10.07766,-15.36805 16.50886,-17.62797c-4.5398,-0.72269 -14.58404,-4.61176 -18.31942,-15.41389c-1.19894,-3.42482 -1.6437,-8.7498 -1.94866,-12.55974c-0.49618,-6.29007 -2.70415,-13.51681 -4.53704,-19.71035c-1.47343,-5.66238 -4.07764,-12.91148 -6.80306,-19.10647c-2.85624,-6.50098 -5.19791,-17.25062 -0.22721,-22.54401c1.73636,-1.84936 7.11281,-4.00634 8.23644,-4.16015c3.92772,-0.54516 9.27889,1.96194 13.25127,3.46605c2.6025,0.9936 14.0216,6.29656 17.17958,9.21643c20.81889,19.24918 35.62264,43.22662 45.24025,65.31732z',
                        btn: {left: 74, top:130},
                        track: {track: 'tan', prog: 'olive'},
                        img: {play: '', pause: ''}
                });
        });

        loadJs(js2, () => {
                H5lz({
                        papa: '#sky',
                        total: 10,
                        size: {width: 36, 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>

夏艳妍 发表于 2023-12-10 16:38:42

这个作品漂亮！！！！

落寞 发表于 2024-1-16 09:20:42

这个作品漂亮！！！！
页: [1]
查看完整版本: 爱得越深痛越真-凯小晴（DJ 阿卓版）