红影 发表于 2023-10-8 16:54

《青媚狐》（学习黑黑svg路径播放器）

<style>
#papa { margin: 80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://pic.imgdb.cn/item/6521827ac458853aef8838c7.jpg') 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: 30%; left: 30%; }
</style>

<div id="papa"><div id="sky"></div>

      <audio id="aud" src="https://file.uhsea.com/2310/46824f83557f3fafe76151e78a58f431JH.mp3" autoplay loop></audio>
</div>

<script>

(function() {
      let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
      let js1 = 'https://file.uhsea.com/2310/3cc542b9b571b2094805a4ad574b96a3HJ.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(63,168,181,.7)); color: snow;right:60px;',
                        fs_css: 'bottom: 3%; left: 100px; transform: translate(0,-35px); background: transparent; --color: rgba(63,168,211,.95);',
                        player_css: 'width: 185px; height: 240px; top: 46%; left: 3%; background: url("https://pic.imgdb.cn/item/6522133cc458853aefaaa5b1.png") no-repeat center/cover;',
                        path: 'm67.5,46.6c0,0 19,3 26.2353,-4.52941c9.7647,-29.47059 46.7647,-24.47059 46,-25c0.7647,0.52941 23.7647,-16.47059 23,-17c4.7647,12.52941 3.7647,25.52941 3,25c0.7647,0.52941 21.7647,16.52941 21,16c-5.2353,19.52941 -22.2353,29.52941 -22.2353,29.52941c0,0 3,16 4,11c-1,4 -21,-3 -21,-3c0,0 13,31 13,31c16,35 -5,56 -5,56c-4,0 5,25 4.2353,24.47059c0.7647,0.52941 16.7647,5.52941 16.7647,5.52941c5,7 -20,4 -20.7647,3.47059c0.7647,0.52941 -14.2353,-22.47059 -15,-23c0.7647,0.52941 -12.2353,3.52941 -13,3c0.7647,0.52941 -6.2353,6.52941 -6.2353,6.52941c0,0 18,5 18,5c3,-1 4,9 4,9c0,0 -63,0 -63.7647,-0.52941c0.7647,0.52941 -0.2353,-6.47059 -1,-7c-26.2353,0.52941 -27.2353,-26.47059 -28,-27c-37.2353,6.52941 -29.2353,-47.47059 -30,-48c13.7647,-23.47059 -17.2353,-39.47059 -18,-40c22.7647,-29.47059 61.7647,-7.47059 61,-8c14.7647,22.52941 -0.2353,42.52941 -1,40c-15.2353,26.52941 -2.2353,33.52941 -3,33c35.7647,-7.47059 49.7647,-21.47059 49.7647,-21.47059c16,-7 11,-34 11,-34c0,4 -37,6 -37.7647,5.47059c8.7647,-15.47059 1.7647,-26.47059 1,-27c0.7647,0.52941 -17.2353,-3.47059 -16.2353,-18.47059z',
                        btn: {left: 44, top: 210},
                        track: {track: 'rgba(119,163,184,.35)', prog: 'rgba(63,168,211,.55)'},
                        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,255,0,.35)', borderRadius: '50%'},
                        maxTime: 24,
                        offset: {x: 0, y: 0},
                        ani: 'c2Out',
                          css: 'opacity: .8;',
                });
      });
})();

</script>

红影 发表于 2023-10-8 16:55

终于又想起来弄回帖奖励了{:4_173:}

红影 发表于 2023-10-8 16:57

谢谢@亦是金 老师提供的路径，这个里面的不是一笔画，索性弄了个外轮廓{:4_173:}

红影 发表于 2023-10-8 16:58

感谢黑黑的代码，这个路径播放器有各种可能的路径，很有趣。谢谢@马黑黑 {:4_187:}

梦油 发表于 2023-10-8 17:29

红影 发表于 2023-10-8 16:55
终于又想起来弄回帖奖励了

那就先给俺点奖励吧！{:5_106:}

小文 发表于 2023-10-8 17:30

越玩越高级了，给恩师点个大赞！{:4_191:}{:4_187:}

亚伦影音工作室 发表于 2023-10-8 17:38

很精彩但按钮有问题！

焱鑫磊 发表于 2023-10-8 17:39

欣赏！{:4_187:}

醉美水芙蓉 发表于 2023-10-8 18:23

醉美水芙蓉 发表于 2023-10-8 18:28

马黑黑 发表于 2023-10-8 18:40

好漂亮的狐狸精{:4_170:}

醉美水芙蓉 发表于 2023-10-8 18:43

醉美水芙蓉 发表于 2023-10-8 18:44

马黑黑 发表于 2023-10-8 18:44

醉美水芙蓉 发表于 2023-10-8 18:43
不知道按钮有什么问题？@马黑黑 老师瞧瞧呢？

未发现有什么问题，一切正常吧

醉美水芙蓉 发表于 2023-10-8 18:44

醉美水芙蓉 发表于 2023-10-8 18:46

红影 发表于 2023-10-8 18:48

梦油 发表于 2023-10-8 17:29
那就先给俺点奖励吧！

好啊，多回复，奖励更多{:4_173:}

红影 发表于 2023-10-8 18:49

小文 发表于 2023-10-8 17:30
越玩越高级了，给恩师点个大赞！

谢谢小文，我只是跟在后面学代码呢{:4_173:}

红影 发表于 2023-10-8 18:51

亚伦影音工作室 发表于 2023-10-8 17:38
很精彩但按钮有问题！

没什么问题啊，是那个上传的地方让图片不显示了吧，刷新一下就好了{:4_187:}
或者我重新换个地方重新传一下吧。

醉美水芙蓉 发表于 2023-10-8 18:54

页: [1] 2 3 4 5 6
查看完整版本: 《青媚狐》（学习黑黑svg路径播放器）