红影 发表于 2023-10-5 10:04

《画蝶》（学习黑黑svg路径进度条）

<style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 660px; background: url('https://pic.imgdb.cn/item/651d82dac458853aefdd6070.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; }

</style>

<div id="papa">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1414171281" 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; --bg: linear-gradient(rgba(255,15,159,.35),rgba(255,15,159,.7)); color: snow;',
                        fs_css: 'bottom:20px; left:100px;transform: translate(0,-35px); background: transparent;',
                        player_css: 'width: 500px; height: 360px; top: 100px; right:80px;',
                        path: 'm200,122c-1,0 -22,-21 -32.5,-40c-10.5,-19 -12.5,-34 -13,-34c-1.5,-24 9.5,-1 9,-1c0.5,0 12.5,36 13.5,39c1,3 25,36 30.5,35c5.5,-1 33.5,-22 39,-38c5.5,-16 9.5,-17 12,-34c2.5,-17 8.5,-16 7,-1c-1.5,15 -17.5,45 -18,45c0.5,0 -28.5,31 -29,31c0.5,0 0.5,59 0,59c0.5,0 31.5,-48 48,-71c16.5,-23 66.5,-40 66,-40c0.5,0 19.5,-5 25,14c5.5,19 -2.5,25 -3,25c0.5,0 -12.5,12 -12,38c0.5,26 8.5,17 -4,35c-12.5,18 -56.5,17 -57,17c0.5,0 17.5,-1 41,14c23.5,15 36.5,33 25,62c-11.5,29 -46.5,47 -47,47c0.5,0 -55.5,-18 -67,-47c-11.5,-29 -11.5,-82 -14.5,-80c-3,2 4,90 -6.5,100c-10.5,10 -5.5,-102 -9,-99c-3.5,3 0.5,53 -13,78c-13.5,25 -65.5,46 -66,46c0.5,0 -39.5,-8 -50,-34c-10.5,-26 0.5,-59 22,-75c21.5,-16 50.5,-17 48.5,-17c-2,0 -55,8 -63.5,-8c-8.5,-16 -2.5,-29 -2,-45c0.5,-16 -19.5,-44 -19,-45c0.5,-1 -0.5,-14 7.5,-23c8,-9 27,-3 26.5,-3c0.5,0 52.5,34 69,55c16.5,21 38.5,58 38,58c0.5,0 -0.5,-63 -1.5,-63z',
                        btn: {left: 148, top: 320},
                        track: {track: 'plum', prog: 'Magenta'},
                        img: {play: 'https://pic.imgdb.cn/item/651e0f75c458853aef076fa5.png', pause: 'https://pic.imgdb.cn/item/651e0f55c458853aef0757e9.png'}
                });
      });

      loadJs(js2, () => {
                H5lz({
                        papa: '#papa',
                        total: 25,
                        size: {width: 20, height: 29},
                        shape: {background: 'url("https://pic.imgdb.cn/item/651d87ffc458853aefe780a2.png") no-repeat center/cover', borderRadius: '0'},
                        ani: 'toBottom',
                        maxTime: 30,
                        offset: {x: -200, y: 0},
                });
      });
})();

</script>

红影 发表于 2023-10-5 10:04

自己去画了个蝴蝶，不好看，但至少画出来了。谢谢黑黑的代码{:4_187:}

红影 发表于 2023-10-5 10:05

跟黑黑学个回帖奖励，进帖的朋友大家开心{:4_173:}

红影 发表于 2023-10-5 10:06

自己去做才发现原来那个按钮调色也需要自己去弄呢{:4_173:}

醉美水芙蓉 发表于 2023-10-5 11:55

小辣椒 发表于 2023-10-5 12:48

亲爱的，这个蝴蝶一笔呵成{:4_199:}

小辣椒 发表于 2023-10-5 12:48

挖、···有钱{:4_189:}

小辣椒 发表于 2023-10-5 12:49

而且还有10次@冬天的雨 冬雨快来赚钱钱

小辣椒 发表于 2023-10-5 12:50

亲爱的和黑黑一样大气呢，一下子10次回帖有钱{:4_170:}

小辣椒 发表于 2023-10-5 12:50

一面欣赏美帖一面赚钱，太爽了{:4_170:}

小辣椒 发表于 2023-10-5 12:51

歌曲也是好听，特棒~

小辣椒 发表于 2023-10-5 12:53

这个路径我以前一直搞不懂，总算这次休长假自己动了一下脑子去捣鼓了一下，感觉学东西也是要时间和耐心的

小辣椒 发表于 2023-10-5 12:53

亲爱的是什么都会，我不行，许多不会的

小辣椒 发表于 2023-10-5 12:54

差不多了吧，自言自语10个回帖到了吧

小辣椒 发表于 2023-10-5 12:54

见钱眼开的我，怎么办啊{:4_170:}

小辣椒 发表于 2023-10-5 12:54

钱钱越多越好

小辣椒 发表于 2023-10-5 12:55

没有了，准备去眯一下了，亲爱的晚上见

红影 发表于 2023-10-5 13:19

醉美水芙蓉 发表于 2023-10-5 11:55
红影美女厉害！蝴蝶好漂亮！

谢谢水芙蓉美女鼓励{:4_187:}

红影 发表于 2023-10-5 13:29

小辣椒 发表于 2023-10-5 12:48
亲爱的，这个蝴蝶一笔呵成

就在那个在线的东西上一个点点的{:4_173:}

红影 发表于 2023-10-5 13:31

小辣椒 发表于 2023-10-5 12:53
亲爱的是什么都会，我不行，许多不会的

我也不会啊，就学会了个回帖有奖{:4_189:}
页: [1] 2 3 4
查看完整版本: 《画蝶》（学习黑黑svg路径进度条）