醉美水芙蓉 发表于 2023-10-22 22:01:37

乌兰巴托的夜

本帖最后由 醉美水芙蓉 于 2023-11-2 20:26 编辑 <br /><br /><style>
#papa { margin: 80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; 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: 30%; left: 30%; }
#vid { position: absolute; width: 1138px; height: 640px; left: -50px; object-fit: cover; pointer-events: none;z-index: -1; opacity: 1; }
</style>

<div id="papa"><div id="sky"></div>
<video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/09e0924cf2fe4d6c7fe65d27dafe2924_preview.mp4" autoplay="" loop="" muted="" bd_landing_video_statistic_record_key="1"></video>
      <audio id="aud" src="https://www.qqmc.com/mp3/music280210951.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_02.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: 30px; --bg: linear-gradient(rgba(63,168,181,.35),rgba(30,144,255,.7)); color: snow;',
                        fs_css: 'bottom: -100px; left: 100px; transform: translate(0,-35px); background: transparent; --color: rgba(63,168,211,.95);',
                      player_css: 'width: 200px; height: 220px; bottom:-1.6%; right: 39.6%; transform: perspective(800px) rotatex(51deg)',
                        path: 'M10 100 A90 60 0 1 1 190 100 A90 60 0 1 1 10 100',
                        btn: {left: 28, top: 190},
                        track: {track: 'pink', prog: 'rgba(0,191,255,.85)'},
                        img: {play: 'https://z1.ax1x.com/2023/10/08/pPvYUL8.png', pause: 'https://z1.ax1x.com/2023/10/08/pPvYNsf.png'}
                });
      });

      loadJs(js2, () => {
                H5lz({
                        papa: '#sky',
                        total: 30,
                        size: {width: 5, height: 5},
                        shape: {background: 'rgba(255,105,180,.35)', borderRadius: '50%'},
                        maxTime: 24,
                        offset: {x: 0, y: 0},
                        ani: 'c2Out',
                          css: 'opacity: .8;',
                });
      });
})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>

顶不顶个球 发表于 2023-12-30 07:29:16

这个作品漂亮！！！！

确认过眼神 发表于 2024-1-26 06:37:29

这个作品漂亮！！！！

落寞 发表于 2024-1-29 16:01:51

这个作品漂亮！！！！
页: [1]
查看完整版本: 乌兰巴托的夜