小辣椒 发表于 2023-10-30 20:23

天边 TO：黑黑 （继续学习黑黑的路径插件效果）

<style>
#papa { margin: 120px 0 0 calc(50% - 721px); width: 1280px; height: 607px; background: url('https://xlaj.cn/assets/file/zp/20231030141651.gif ') no-repeat center/cover; box-shadow: 4px 4px 8px #000; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
#sky { position: absolute; width: 1400px; height: 380px; top:350; left: 650; transform: rotate(30deg); }
#dt1{ position: absolute; width:1200px; height:500px; top: 120px; left: 30px; }
#dt2{ position: absolute; width:107px; height :87px; top: 320px; left: 350px; }
#dt3{ position: absolute; width:12px; height:20px; top: 370px; left: 170px; }
#dt4{ position: absolute; width:200px; height:180px; top: 80px; left: 50px; }

</style>
<div id="papa">
<img id="dt1" src="https://xlaj.cn/assets/file/zp/20231004105737.gif " alt="" />
<img id="dt2" src="https://xlaj.cn/assets/file/zp/20231030141735.gif" alt="" />
<img id="dt3" src="https://xlaj.cn/assets/file/zp/20231030141805.jpg " alt="" />
<img id="dt4" src="https://xlaj.cn/assets/file/zp/20231030142105.png" alt="" />

      <div id="sky"></div>
      <audio id="aud" src="https://xlaj.cn/assets/file/zp/20231030141835.mp3" autoplay loop></audio>
</div>

<script>

(function() {
       let lrcAr = [
        ,
               ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
               let js1 = 'https://xlaj.cn/assets/file/zp/20231029162717.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: 'bottom: 20px; left: 35%;color:Honeydew; --bg: linear-gradient(rgba(100,149,2375,4),rgba(100,149,237,.17));',
               
                        fs_css: 'transform: translate(0px,40px); color: #F0FFF0; background: transparent; bottom: -250px;',
                  
                        player_css: 'width: 250px; height: 250px;left: 10px;top:320px; transform: translateY(-20px);',
                     path: 'm200.62628,85.24308c0.12325,1.69025 0.12325,3.38086 0.12325,5.07111c0,51.55474 -40.04122,110.95789 -113.22493,110.95789c-22.54653,0 -43.49116,-6.39937 -61.10948,-17.50676c3.20343,0.36198 6.28324,0.48277 9.60992,0.48277c18.60358,0 35.72927,-6.15743 49.40502,-16.66163c-17.49507,-0.36235 -32.15646,-11.5909 -37.20793,-27.04542c2.4643,0.36198 4.92821,0.60355 7.51576,0.60355c3.57281,0 7.14601,-0.48314 10.47231,-1.32789c-18.2342,-3.62243 -31.91033,-19.31816 -31.91033,-38.27396l0,-0.48277c5.29759,2.89772 11.45834,4.70875 17.9877,4.94995c-10.71882,-7.00293 -17.74119,-18.9558 -17.74119,-32.47852c0,-7.24412 1.97091,-13.8847 5.42085,-19.68014c19.58961,23.66456 49.03564,39.11872 82.05411,40.80933c-0.61588,-2.89772 -0.98564,-5.91586 -0.98564,-8.93437c0,-21.49155 17.74157,-38.9983 39.7951,-38.9983c11.45796,0 21.80702,4.70875 29.07628,12.31523c8.99366,-1.69025 17.61794,-4.95032 25.25696,-9.41751c-2.95731,9.05553 -9.24054,16.66201 -17.49507,21.49117c8.0084,-0.84475 15.77029,-3.01851 22.91591,-6.03665c-5.42009,7.72689 -12.19671,14.60866 -19.95861,20.16291z',
                     btn: {left: 44, top: 130},
              track: {track: '#F0FFF0', prog: '#1072ba'},
                        img: {play: '', pause: ''}
                });
      });

      loadJs(js2, () => {
                H5lz({
                        papa: '#sky',
                        total: 15,
                        size: {width: 18, height: 34},
                        shape: {background: 'url("yezx.png") no-repeat center/cover', borderRadius: '0'},
                        ani: 'toBottom',
                        maxTime: 30,
                        offset: {x: 0, y: 0},
                });
      });
})();

</script>

小辣椒 发表于 2023-10-30 20:24

@马黑黑

黑黑学习你的路径插件效果，非常喜欢的{:4_170:}继续学习做几次

小辣椒 发表于 2023-10-30 20:25

@亦是金

谢谢前辈分享的路径制作教程，我在水区置顶帖找到了{:4_173:}

千羽 发表于 2023-10-30 20:25

海边悠闲，惬意的画面{:4_187:}

小辣椒 发表于 2023-10-30 20:27

学习做一个鸽子的路径效果，一首天边送给黑黑大侠，感谢你分享的这么多播放器效果，这一年小辣椒事情特别多，许多教程和源码都没有学习，以后再看了。

千羽 发表于 2023-10-30 20:28

温顺的小狗狗和翱翔的飞鹰给画面增添了灵动感，很想坐在椅上慢慢欣赏美景{:4_173:}

小辣椒 发表于 2023-10-30 20:28

千羽 发表于 2023-10-30 20:25
海边悠闲，惬意的画面

啊~~千羽晚上好，上来就看见你，太开心了{:4_179:}

千羽 发表于 2023-10-30 20:31

抒情的《天边》，愉悦身心{:4_181:}

千羽 发表于 2023-10-30 20:32

小辣椒 发表于 2023-10-30 20:28
啊~~千羽晚上好，上来就看见你，太开心了

我也是啊，开心中……{:4_179:}

千羽 发表于 2023-10-30 20:34

帮喊：@黑黑老师{:4_195:}，快来收礼了{:4_189:}

小辣椒 发表于 2023-10-30 20:36

千羽 发表于 2023-10-30 20:31
抒情的《天边》，愉悦身心

好听吧

亦是金 发表于 2023-10-30 20:36

小辣椒 发表于 2023-10-30 20:25
@亦是金

谢谢前辈分享的路径制作教程，我在水区置顶帖找到了
问好小辣椒！{:4_187:}我来欣赏了！制作精美！喜欢！学习了！

小辣椒 发表于 2023-10-30 20:36

千羽 发表于 2023-10-30 20:32
我也是啊，开心中……

千羽，发歌曲的代码我下了后发你，记得去收藏

小辣椒 发表于 2023-10-30 20:37

千羽 发表于 2023-10-30 20:34
帮喊：@黑黑老师，快来收礼了

黑黑还在喝酒{:4_170:}

千羽 发表于 2023-10-30 20:38

小辣椒 发表于 2023-10-30 20:36
千羽，发歌曲的代码我下了后发你，记得去收藏

太好了我晚点去{:4_185:}

小辣椒 发表于 2023-10-30 20:38

亦是金 发表于 2023-10-30 20:36
问好小辣椒！我来欣赏了！制作精美！喜欢！学习了！
谢谢前辈，感谢分享路径制作的教程，辛苦了

千羽 发表于 2023-10-30 20:42

小辣椒 发表于 2023-10-30 20:37
黑黑还在喝酒

等喝完了才会蹒跚踱步慢慢来收礼{:4_173:}

小辣椒 发表于 2023-10-30 20:45

千羽 发表于 2023-10-30 20:38
太好了我晚点去

千羽，现在我回帖速度也是慢，刚现在看见好几个帖都没有回

千羽 发表于 2023-10-30 20:47

小辣椒 发表于 2023-10-30 20:45
千羽，现在我回帖速度也是慢，刚现在看见好几个帖都没有回

没必要每个都回，你能上来发帖就很不容易了{:4_181:}

小辣椒 发表于 2023-10-30 20:48

千羽 发表于 2023-10-30 20:42
等喝完了才会蹒跚踱步慢慢来收礼

黑黑酒喝完会上来的
页: [1] 2 3 4 5
查看完整版本: 天边 TO：黑黑 （继续学习黑黑的路径插件效果）