红影 发表于 2023-10-30 23:34

灵山梵音 TO千羽（学习黑黑svg路径进度条）


<style>
#mydiv {
        margin: 80px 0 0 calc(50% - 593px);
        width: 1024px;
        height: 640px;
        background: url('https://pic.imgdb.cn/item/653f5d31c458853aef7a61db.jpg') no-repeat center/cover;
        box-shadow: 8px 8px 16px #000;
        overflow: hidden;
        position: relative;
        display: grid;
        place-items: center;
}
#btnPlay { filter: hue-rotate(146deg); }
#vid { position: absolute; width: 100%; height: 100%;object-fit: cover; pointer-events: none;   mix-blend-mode: light; z-index: 0; opacity: 0.2; }
</style>

<div id="mydiv">
<video id="vid" src="https://video-js.51miz.com/preview/video/00/00/17/96/V-179613-62771DB2.mp4" autoplay="" loop="" muted="" bd_landing_video_statistic_record_key="1"></video>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2071233284" 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: '#mydiv',
                        lrcAr: lrcAr,
                        lrc_css: 'top: 20px; left: 30px;--bg: linear-gradient(rgba(214,21,0,.35),rgba(245,241,0,.7)); color: rgb(255, 244, 173);',
                        fs_css: 'left: -200px; background: transparent;',
                        player_css: 'width: 200px; height: 180px; left: 700px; bottom: 232px; ',
                        path: 'm6.61431,75.16651c0,0 54.09332,42.92471 54.0933,42.9247c0.00002,0.00001 -55.62425,-51.80568 -55.62425,-51.80568c-3.06189,-6.90743 6.63409,-24.66937 6.63407,-24.66937c11.22696,-15.45951 20.92291,-17.26856 20.92289,-17.26857c0.00002,0.00001 42.35611,81.90233 42.35609,81.90232c0.00002,0.00001 -37.76324,-86.34279 -37.76324,-86.34279c2.72168,-6.90744 23.47446,-13.81485 23.47444,-13.81485c30.27873,-11.5124 34.70139,1.48016 34.70137,1.48016c0.00002,0 1.53096,94.73039 1.53094,94.73038c0.00002,0.00001 4.59286,-97.19731 4.59283,-97.19732c1.36087,-9.20991 28.06731,-1.48016 28.06729,-1.48016c33.34062,10.52562 27.04668,19.24211 27.04665,19.24211c0.00003,0 -36.7426,84.36926 -36.7426,82.8891c0,-1.48016 43.88702,-80.91554 43.887,-80.91555c11.90738,-4.27602 13.09808,-0.49342 22.11366,16.93965c9.01557,17.43305 2.89176,22.03798 2.38145,22.03798c-0.51031,0 -53.07268,56.73955 -53.07268,56.24616c0,-0.49339 42.5261,-38.19119 52.05203,-47.3652c9.52592,-9.17401 12.75785,19.06278 11.05682,25.97023c-4.76293,14.80167 -6.97426,14.02014 -14.79912,19.91852c-7.82486,5.89839 -34.19101,16.46977 -47.96952,24.33427c-13.7785,7.86449 -16.15993,13.84455 -25.34561,20.0669c-9.18568,6.22234 11.56708,12.00578 31.63946,3.4537c6.46402,-4.93387 -13.77846,-18.25532 -13.77846,-18.25532c0,0 -30.61886,26.14953 -30.61886,26.14953c-6.12378,3.61818 -30.44878,-19.90122 -40.48498,-22.69462c-10.0362,-2.7934 -15.30941,12.98763 -8.16499,17.26365c19.39198,6.90744 36.40246,7.19802 34.3612,0.00005c-2.04126,-7.19798 -72.12447,-38.48054 -79.60907,-60.18962c-7.4846,-21.70908 3.0619,-33.55034 3.0619,-33.55034z',
                        btn: {left: 32, top: 114},
                        track: {track: 'CadetBlue', prog: 'CornflowerBlue'},
                        img: {play: '', pause: ''}
                });
        });

        loadJs(js2, () => {
                H5lz({
                        papa: '#mydiv',
                        total: 6,
                        size: {width: 120, height: 120},
                        shape: {background:'url("https://pic.imgdb.cn/item/653f5d53c458853aef7aca25.png") no-repeat center/cover', borderRadius: '0'},
                        ani: 'toLeft',
                        maxTime: 30,
                        offset: {x: 0, y: -200},
                });
        });
})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>

红影 发表于 2023-10-30 23:35

谢谢@千羽 的好礼，做个小礼回赠，希望羽儿喜欢{:4_187:}

红影 发表于 2023-10-30 23:36

感谢@岁月·如歌 分享的图图，那些图图太美了，找了个一个来做帖子{:4_173:}

红影 发表于 2023-10-30 23:38

跟亦是金老师学的，试验各自路径。这个是个贝壳路径，自己去画的，画的不太好{:4_173:}

红影 发表于 2023-10-30 23:38

当然最要感谢的是黑黑的代码，让我们有这么多好玩的{:4_204:}

梦油 发表于 2023-10-31 10:10

影子朋友早晨好！《灵山梵音》幽静清雅，真好。影子朋友能画成这样太棒了。{:4_199:}

红影 发表于 2023-10-31 10:28

梦油 发表于 2023-10-31 10:10
影子朋友早晨好！《灵山梵音》幽静清雅，真好。影子朋友能画成这样太棒了。

我就画了个贝壳的路径，其他的都是网上素材啊{:4_173:}

亦是金 发表于 2023-10-31 11:09

红影 发表于 2023-10-30 23:38
跟亦是金老师学的，试验各自路径。这个是个贝壳路径，自己去画的，画的不太好

画的好，有绘画的天赋！路径丝滑，点赞！{:4_187:}

岁月·如歌 发表于 2023-10-31 12:05

红影 发表于 2023-10-30 23:36
感谢@岁月·如歌 分享的图图，那些图图太美了，找了个一个来做帖子

影子永远是最胖的{:4_397:}

岁月·如歌 发表于 2023-10-31 12:09

红影 发表于 2023-10-30 23:36
感谢@岁月·如歌 分享的图图，那些图图太美了，找了个一个来做帖子

何必谢俺，俺也是搬来的，看在路途很遥远，下一片就交点运费吧，象征性的。{:4_397:}

世外桃源 发表于 2023-10-31 12:54

欣赏欣赏

世外桃源 发表于 2023-10-31 12:54

美的让我要多看几眼

世外桃源 发表于 2023-10-31 12:56

这个是音画？俺不懂看看你们的制作也是一种享受的

世外桃源 发表于 2023-10-31 12:57

一定很难吧，老头学不会了 只有羡慕的份

红影 发表于 2023-10-31 14:28

亦是金 发表于 2023-10-31 11:09
画的好，有绘画的天赋！路径丝滑，点赞！

不是徒手画的啊，是下面有图图，我是说不是用svg图片直接导出来的{:4_173:}

红影 发表于 2023-10-31 14:29

岁月·如歌 发表于 2023-10-31 12:05
影子永远是最胖的

你分享的图图的确好美呢，看了以后特别喜欢。早就想着要用来做帖子了{:4_173:}

红影 发表于 2023-10-31 14:30

岁月·如歌 发表于 2023-10-31 12:09
何必谢俺，俺也是搬来的，看在路途很遥远，下一片就交点运费吧，象征性的。

这个是必须的，运费来了{:4_194:}{:4_173:}

红影 发表于 2023-10-31 14:31

世外桃源 发表于 2023-10-31 12:54
美的让我要多看几眼

谢谢桃源，这个底图我从岁月如歌的帖子里找的，那里的图图还要美呢{:4_173:}

红影 发表于 2023-10-31 14:32

世外桃源 发表于 2023-10-31 12:56
这个是音画？俺不懂看看你们的制作也是一种享受的

欢迎临帖，随便看，多看看{:4_173:}

红影 发表于 2023-10-31 14:33

世外桃源 发表于 2023-10-31 12:57
一定很难吧，老头学不会了 只有羡慕的份

桃源的到来就是对影子的最大鼓励，谢谢了{:4_187:}
页: [1] 2 3
查看完整版本: 灵山梵音 TO千羽（学习黑黑svg路径进度条）