论坛 › 欢乐水吧 › 云菲菲 - 殇雪（学习黑黑路径播放器效果）

小辣椒 发表于 2023-10-4 12:44

云菲菲 - 殇雪（学习黑黑路径播放器效果）

<style>
#papa { margin: 150px 0 0 calc(50% - 781px); width: 1440px; height: 848px; background: url('https://xlaj.cn/assets/file/zp/20231005122235.jpg') 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: 800px; top: 0; left: 0; transform: rotate(30deg); }
#dt1{ position: absolute; width:1400px; height:500px; top: 0px; left: 30px; }
#dt2{ position: absolute; width:1400px; height:500px; top: 50px; left: 150px; }

</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/20231004105737.gif " alt="" />

      <div id="sky"></div>
      <audio id="aud" src="https://wj1.zp68.com:812/lxx/yunhua/2022/12/06/001.mp3" 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:80px; left: 60%;color:DarkGray; --bg: linear-gradient(rgba(255,250,250,.4),rgba(255,250,250,.7));',
               
                        fs_css: 'transform: translate(0px,40px); color: #222; background: transparent;bottom: 150px;',
                  
player_css: 'left: 15%;bottom:60px; width: 280px; height:379px;background: url("https://xlaj.cn/assets/file/zp/20231005122349.png ")no-repeat center/cover;',
                     path: 'm189.24919,109.25132l-2.75225,-12.7529l-5.49991,-11.9998c0.25229,0.2531 -2.24767,-3.74683 -2.24767,-4.74681c0,-0.99998 -1.49998,-7.49988 -1.75227,-7.75298c0.25229,0.2531 -4.74763,-12.24669 -4.74763,-12.24669c0,0 -9.49984,-10.49983 -9.49984,-10.99982c0,-0.49999 -8.99985,-7.49988 -9.25214,-7.75298c0.25229,0.2531 -11.74751,-2.24686 -11.9998,-2.49996c0.25229,0.2531 -16.24744,-1.74686 -16.24744,-1.74686c0,0 -14.49976,3.99993 -14.75205,3.74683c0.25229,0.2531 -12.7475,10.25294 -12.99979,9.99984c0.25229,0.2531 -9.24756,10.25294 -9.49984,9.99984c0.25229,0.2531 -4.24764,12.7529 -4.49993,12.4998c0.25229,0.2531 -5.24762,7.75298 -5.49991,7.49988c0.25229,0.2531 0.25229,10.75293 0,10.49983c0.25229,0.2531 7.75216,14.75287 7.49988,14.49976c0.25229,0.25311 -5.74761,8.75297 -5.9999,8.49986c0.25229,0.25311 2.75225,7.75298 2.49996,7.49988c0.25229,0.25311 5.25221,3.25306 4.99992,2.99995c0.25229,0.25311 -3.24766,13.25289 -3.49994,12.99979c0.25229,0.25311 -1.24769,14.25288 -1.49998,13.99977c0.25229,0.25311 1.25227,7.25299 0.99998,6.99989c0.25229,0.25311 -5.74761,8.25298 -5.9999,7.99987c0.25229,0.25311 -0.7477,7.25299 -0.99998,6.99989c0.25229,0.25311 1.25227,5.25303 0.99998,4.99992c0.25229,0.25311 -5.24762,7.25299 -5.49991,6.99989c0.25229,0.25311 1.75226,12.7529 1.49998,12.4998c0.25229,0.25311 3.75223,5.25303 3.49994,4.99992c0.25229,0.25311 -18.7474,17.75282 -18.99969,17.49971c0.25229,0.25311 -11.74752,19.2528 -11.9998,18.99969c0.25229,0.25311 -5.74762,22.25275 -5.9999,21.99964c0.25229,0.25311 -5.24762,23.75273 -5.49991,23.49961c0.25229,0.25311 1.25227,26.25269 0.99998,25.99957c0.25229,0.25311 9.75213,22.75275 9.49984,22.49963c0.25229,0.25311 19.25198,10.75294 18.99969,10.49983c0.25229,0.25311 35.25171,10.25295 34.99943,9.99984c0.25229,0.25311 36.75169,-1.24686 36.4994,-1.49998c0.25229,0.25311 31.25178,-2.74684 30.99949,-2.99995c0.25229,0.25311 27.75184,-6.24678 27.49955,-6.49989c0.25229,0.25311 21.75194,-12.74667 21.49965,-12.99979c0.25229,0.25311 8.75215,-17.2466 8.49986,-17.49971c0.25229,0.25311 4.25223,-22.24652 4.25223,-22.74651c0,-0.49999 -1.99997,-23.99961 -1.99997,-23.99961c0,0 -12.4998,-26.49957 -12.75209,-26.75268c0.25229,0.25311 -8.74756,-16.74661 -8.99985,-16.99972c0.25229,0.25311 -13.24749,-11.74669 -13.49978,-11.9998c0.25229,0.25311 3.25224,-8.74674 2.99995,-8.99985c0.25229,0.25311 -5.24762,-10.74671 -5.49991,-10.99982c0.25229,0.25311 0.75228,-11.2467 0.49999,-11.49981c0.25229,0.25311 -5.24762,-6.74678 -5.49991,-6.99989c0.25229,0.25311 1.25227,-15.24664 0.99998,-15.49975c0.25229,0.25311 0.75228,-6.24679 0.49999,-6.49989c0.25229,0.25311 11.25211,3.25306 10.99982,2.99995c0.25229,0.25311 7.25218,-0.74688 6.99989,-0.99998c0.25229,0.25311 6.25219,-3.74683 6.25219,-4.74681c0,-0.99998 0.99998,-13.99977 0.74769,-14.25288c0.25229,0.25311 -3.74764,-12.74668 -3.99993,-12.99979c0.25229,0.25311 -6.74759,-7.24677 -6.99989,-7.49988c0.25229,0.25311 -9.24755,-2.74685 -9.24755,-2.74685z',
                        btn: { left: 58, top: 275},
                        track: {track: 'Silver', prog: 'White'},
                        img: {play: '', pause: ''}
                });
      });

      loadJs(js2, () => {
                H5lz({
                        papa: '#sky',
                        total: 10,
                        size: {width: 60, height: 42},
                        shape: {background: 'url("https://638183.freep.cn/638183/web/svg/yjzi1.svg") no-repeat center/cover', borderRadius: '0'},
                        ani: 'toLeft',
                        maxTime: 30,
                        offset: {x: 0, y: 0},
                });
      });
})();

</script>

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

黑黑，这个我前天做的，感觉路径出来不漂亮就没有发，这个播放器和路径同步我捣鼓了好久的，最后发现这个路径应该做笔画少一点的，现在感觉好乱的，还有全部欣赏，这个背景图图全屏会大，路径全屏不会大的，所以我干脆隐藏了全屏欣赏{:4_173:} 以后要做不带背景图图的路径了
@马黑黑

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

我也是不知道这个路径制作对不对，我是网络在线制作的

小辣椒 发表于 2023-10-4 12:52

反正学习了再说，不对以后再重新做过

马黑黑 发表于 2023-10-4 13:04

使用雪人等的轮廓做路径，好想法。

播放器支持背景图片，在 player_css 参数中，用CSS定义一下：

player_css: 'left: 10px; top: 10px; background: url("图片地址") no-repeat center/cover;',

这样，放大缩小页面，雪人就不会走位。

梦油 发表于 2023-10-4 14:48

这洁白的世界真美。
小辣椒朋友节日好！

醉美水芙蓉 发表于 2023-10-4 16:41

红影 发表于 2023-10-4 16:42

亲爱的制作真漂亮，把雪人的轮廓做成了播放器路径，这个设想真奇妙{:4_199:}

红影 发表于 2023-10-4 16:42

播放器按钮成了雪人的衣服扣子，有趣{:4_173:}

红影 发表于 2023-10-4 16:43

白色的粒子用在这里也很漂亮。亲爱的帖子太漂亮了{:4_199:}

上海朝阳 发表于 2023-10-4 20:34

好漂亮哦

冬天的雨 发表于 2023-10-4 20:46

刚准备发帖看见你的这个作业了{:4_197:}{:4_185:}

我今天发的是以前的图和歌曲但不是作业{:4_172:}

亦是金 发表于 2023-10-5 11:33

好制作！精美！欣赏学习了！{:4_187:}

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

马黑黑 发表于 2023-10-4 13:04
使用雪人等的轮廓做路径，好想法。

播放器支持背景图片，在 player_css 参数中，用CSS定义一下：


谢谢黑黑的指导，我修好好了

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

亦是金 发表于 2023-10-5 11:33
好制作！精美！欣赏学习了！

谢谢前辈欣赏，就是你那在线路径编辑的，你也是可以做的

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

冬天的雨 发表于 2023-10-4 20:46
刚准备发帖看见你的这个作业了

我今天发的是以前的图和歌曲但不是作业

发新的了啊，我去看看

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

上海朝阳 发表于 2023-10-4 20:34
好漂亮哦

谢谢朝阳大哥欣赏{:4_176:}

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

红影 发表于 2023-10-4 16:43
白色的粒子用在这里也很漂亮。亲爱的帖子太漂亮了

亲爱的，你做肯定会更加漂亮{:4_173:}

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

红影 发表于 2023-10-4 16:42
亲爱的制作真漂亮，把雪人的轮廓做成了播放器路径，这个设想真奇妙

这个我全屏欣赏，现在修改好了，黑黑有指导的

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

醉美水芙蓉 发表于 2023-10-4 16:41
好可爱的雪人！欣赏辣椒漂亮作品！

谢谢水芙蓉欣赏，没有你的制作漂亮的，你那伞很漂亮

查看完整版本: 云菲菲 - 殇雪（学习黑黑路径播放器效果）