小辣椒 发表于 2023-11-4 14:48

梦的翅膀受了伤 TO：冬天的雨


<style>
#papa {margin: 150px 0 0 calc(50% - 720px);width: 1278px; height: 740px; background: url('https://wj1.zp68.com:812/lxx/yunhua/2022/02/20/cb.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:12px; height:20px; top: 150px; left: 800px; }
#dt3{ position: absolute; width:12px; height:20px; top: 180px; left: 750px; }
#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/20231030141805.jpg " alt="" />

<img id="dt3" src="https://xlaj.cn/assets/file/zp/20231030141805.jpg " alt="" />


      <div id="sky"></div>
      <audio id="aud" src="https://wj1.zp68.com:812/lxx/yunhua/2022/07/mdcbsls.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: 30px; left: 35%;color:Honeydew; --bg: linear-gradient(rgba(135,206,250,4),rgba(135,206,250.7));',
               
                        fs_css: 'transform: translate(0px,40px); color: #F0FFF0; background: transparent; bottom: -250px;',
                  
                        player_css: 'width: 250px; height: 256px;left: 140px;top:380px; transform: translateY(-20px);',
                     path: 'm201.94383,85.89584l1.35536,9.23326l0,9.23326l-8.09991,14.54239l-12.84369,25.85314l-18.10379,22.25876l-25.52603,12.46491l-5.71189,8.07911l-2.48483,3.95711l-3.09798,1.31904s5.58281,-20.9727 6.26049,-20.9727c0.67768,0 6.55093,0.23083 6.55093,0.23083l21.52447,-12.72871l-29.85028,8.60672l-18.03925,12.13515l-7.35769,9.23326l-2.12986,0.46166l6.71228,-24.27029l2.22667,-1.81368l6.68001,4.2539l28.49492,-14.90513l18.32969,-16.98261l4.77605,-22.55554l-40.4673,7.68339l4.90513,-6.00162l-55.95718,-17.57618l26.4296,-3.46247l-53.56916,-40.52743l37.07889,5.96865l-32.69009,-35.61402l81.61229,41.74754l-10.16523,-12.53086l40.1446,24.5341l-46.24374,-32.64618l6.0346,12.66276l-16.00621,-5.96865l-14.68311,-27.79872l62.79854,40.23065l-13.84408,-18.40058l34.85222,31.78881l3.87247,-2.93486l-6.77682,-5.40805l1.35536,-12.46491l12.19828,-3.4295l9.42301,8.14506l3.71112,1.38499l-2.25894,2.04451l2.743,3.95711l-4.22745,2.44022l-3.32387,6.66114l3.38841,7.88125z',
                     btn: {left: 70, top: 220},
              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-11-4 14:49

@冬天的雨

冬雨还礼了，你也是套用玩一个{:4_205:}

小辣椒 发表于 2023-11-4 14:51

感觉这个路径效果很好玩，谢谢黑黑的路径插件源码分享@马黑黑

小辣椒 发表于 2023-11-4 14:53

也是谢谢前辈的路径制作教程，小辣椒就喜欢瞎捣鼓，按自己的方法制作又慢又不够漂亮的，今天完全按教程制作了@亦是金

冬天的雨 发表于 2023-11-4 15:22

小辣椒 发表于 2023-11-4 14:49
@冬天的雨

冬雨还礼了，你也是套用玩一个

来了来了，小辣椒电报收到就上来了

冬天的雨 发表于 2023-11-4 15:23

套用冬雨应该没有问题的，只是时间问题，不能催啊{:4_170:}

冬天的雨 发表于 2023-11-4 15:25

这个仙女飘飘的对应播放器也是个仙气很足的帅哥{:4_170:}

冬天的雨 发表于 2023-11-4 15:26

好吧，我明天争取做一个，只是图不做，用视频背景，这样简单一点

小辣椒 发表于 2023-11-4 15:27

冬天的雨 发表于 2023-11-4 15:22
来了来了，小辣椒电报收到就上来了

冬雨好，我就准备下了要出去了，有点事

小辣椒 发表于 2023-11-4 15:27

冬天的雨 发表于 2023-11-4 15:23
套用冬雨应该没有问题的，只是时间问题，不能催啊

没事，随便你什么时候做

冬天的雨 发表于 2023-11-4 15:28

小辣椒 发表于 2023-11-4 15:27
冬雨好，我就准备下了要出去了，有点事

好的，空了再上来

冬天的雨 发表于 2023-11-4 15:29

小辣椒 发表于 2023-11-4 15:27
没事，随便你什么时候做

好的，{:4_197:}{:4_185:}

亦是金 发表于 2023-11-4 15:43

小辣椒 发表于 2023-11-4 14:53
也是谢谢前辈的路径制作教程，小辣椒就喜欢瞎捣鼓，按自己的方法制作又慢又不够漂亮的，今天完全按教程制作 ...

制作漂亮！欣赏了！点赞！{:4_187:}

红影 发表于 2023-11-4 17:42

哇，这个路径太赞了，而且跟背景图里的美女相向而对，路径和图图居然可以这样对应。亲爱的厉害{:4_199:}

红影 发表于 2023-11-4 17:46

在那里看到这个图形了，被亲爱的把背景配得太好了，这个的构思真的很出彩{:4_199:}

红影 发表于 2023-11-4 17:47

歌曲也选得很相配。这个太好了，冬小雨收礼开心{:4_187:}

上海朝阳 发表于 2023-11-4 18:53

漂亮啊

马黑黑 发表于 2023-11-4 19:13

小辣椒 发表于 2023-11-4 14:51
感觉这个路径效果很好玩，谢谢黑黑的路径插件源码分享@马黑黑

它是单一路径，复合路径也可以用，只是调节进度方面，我没有做处理

千羽 发表于 2023-11-4 19:18

音乐好听，画面仙境{:4_187:}

千羽 发表于 2023-11-4 19:21

播放器伴侣移动的线条很亮眼，两个飘飞的神仙恋人好浪漫啊{:4_187:}
页: [1] 2
查看完整版本: 梦的翅膀受了伤 TO：冬天的雨