醉美水芙蓉 发表于 2023-10-22 20:51

乌兰巴托的夜

本帖最后由 醉美水芙蓉 于 2023-10-22 20:51 编辑 <br /><br /><style>
#papa {
      margin: 0 0 0 calc(50% - 593px);
      width: 1024px;
      height: 640px;
      background: url('https://pic.imgdb.cn/item/65351760c458853aef75a2cd.jpg') no-repeat center/cover;
      box-shadow: 3px 3px 20px #000;
      overflow: hidden;
      z-index: 1;
      position: relative;
      display: grid;
      place-items: center;
}
</style>

<div id="papa"></div>
<audio id="aud" src="https://www.qqmc.com/mp3/music280210951.mp3" autoplay loop></audio>

<script>
(function() {
      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();
      };

      let rippleJs = 'https://638183.freep.cn/638183/web/svg/ripple-min.js',
                playerJs = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.js';
      let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
      loadJs(rippleJs, () => rippleEffect(papa));
      
      loadJs(playerJs, () => {
                HCPlayer({
                        papa: '#papa',
                        lrcAr: lrcAr,
                        lrc_css: 'top: 20px;',
                        fs_css: 'top: -1000px; background: transparent;',
                        player_css: `
                              width: 200px;
                              height: 200px;
                              right: 100px;
                              bottom: 40px;
                              background: url('https://638183.freep.cn/638183/t23/btn/12f.png') -5px 1px,
                        `,
                        path: 'M71.94 25.974c6.534 10.15 22.15 6.83 23.992-5.1.718-4.651 7.419-4.651 8.136 0 1.841 11.93 17.458 15.25 23.992 5.1 2.548-3.957 8.669-1.232 7.433 3.31-3.171 11.647 9.746 21.031 19.843 14.416 3.937-2.579 8.421 2.401 5.445 6.047-7.634 9.35.349 23.177 12.264 21.242 4.645-.755 6.716 5.618 2.514 7.738-10.777 5.437-9.108 21.316 2.564 24.393 4.551 1.2 3.85 7.865-.851 8.092-12.056.584-16.99 15.769-7.579 23.328 3.669 2.947.319 8.75-4.068 7.046-11.252-4.371-21.936 7.494-16.413 18.228 2.154 4.185-3.267 8.124-6.582 4.782-8.502-8.569-23.087-2.075-22.407 9.977.265 4.699-6.29 6.092-7.959 1.691-4.281-11.286-20.247-11.286-24.528 0-1.669 4.401-8.224 3.008-7.959-1.691.68-12.052-13.905-18.546-22.407-9.977-3.315 3.342-8.736-.597-6.582-4.782 5.523-10.734-5.16-22.599-16.413-18.228-4.387 1.704-7.737-4.099-4.068-7.046 9.411-7.559 4.477-22.744-7.58-23.328-4.7-.227-5.401-6.892-.85-8.092 11.672-3.077 13.341-18.956 2.564-24.393-4.202-2.12-2.131-8.493 2.514-7.738C38.87 72.924 46.853 59.098 39.22 49.747c-2.976-3.646 1.508-8.626 5.444-6.047 10.098 6.615 23.014-2.77 19.844-14.417-1.236-4.541 4.885-7.267 7.433-3.309Z',
                        btn: {left: 34, top: 80},
                        track: {track: 'pink', prog: 'steelblue'},
                        img: {play: '', pause: ''}
                });
      });
})();
</script>

红影 发表于 2023-10-22 21:10

播放器路径很漂亮，而且也加了水波纹效果。欣赏水芙蓉美女好帖{:4_199:}

醉美水芙蓉 发表于 2023-10-22 21:31

红影 发表于 2023-10-22 21:10
播放器路径很漂亮，而且也加了水波纹效果。欣赏水芙蓉美女好帖

谢谢红影美女鼓励！

马黑黑 发表于 2023-10-22 22:04

这个很唯美，路径很棒

醉美水芙蓉 发表于 2023-10-22 22:19

马黑黑 发表于 2023-10-22 22:04
这个很唯美，路径很棒

谢谢老师的代码！老师每天制作教程辛苦了！

马黑黑 发表于 2023-10-22 22:42

醉美水芙蓉 发表于 2023-10-22 22:19
谢谢老师的代码！老师每天制作教程辛苦了！

{:4_190:}

亦是金 发表于 2023-10-22 22:44

帖子唯美简洁，路径好看！欣赏学习了！{:4_187:}

红影 发表于 2023-10-22 22:51

醉美水芙蓉 发表于 2023-10-22 21:31
谢谢红影美女鼓励！

不客气啊，再赏水芙蓉美女好帖{:4_187:}

偶然~ 发表于 2023-10-23 17:33

好棒哦~醉美水芙蓉辛苦了

偶然~ 发表于 2023-10-23 17:34

太棒了~我听的都醉了~都醉了！

偶然~ 发表于 2023-10-23 17:34

制作大气~╰谢谢醉美水芙蓉带来的精彩～！

偶然~ 发表于 2023-10-23 17:35

牡丹花★·。水仙花╰☆╮一筐一筐又一筐∴ 紫丁香╰☆╮【*偶然 献花给你啦】

偶然~ 发表于 2023-10-23 17:35

玫瑰花☆╮╮芍药花☆╮☆╮合欢花花～【偶然 送给你】

醉美水芙蓉 发表于 2023-10-23 17:45

亦是金 发表于 2023-10-22 22:44
帖子唯美简洁，路径好看！欣赏学习了！

谢谢老师光临！

醉美水芙蓉 发表于 2023-10-23 17:45

偶然~ 发表于 2023-10-23 17:33
好棒哦~醉美水芙蓉辛苦了

谢谢偶然老师光临！

偶然~ 发表于 2023-10-23 17:52

醉美水芙蓉 发表于 2023-10-23 17:45
谢谢偶然老师光临！

开心就好

千羽 发表于 2023-10-23 20:11

芙蓉的作业这么快就做出来了，还有自己的创意，真棒啊{:4_187:}

醉美水芙蓉 发表于 2023-10-23 20:30

千羽 发表于 2023-10-23 20:11
芙蓉的作业这么快就做出来了，还有自己的创意，真棒啊

千羽美女晚上好！

小文 发表于 2023-10-23 21:00

好美{:4_187:}

醉美水芙蓉 发表于 2023-10-23 21:43

小文 发表于 2023-10-23 21:00
好美

谢谢小文光临！
页: [1]
查看完整版本: 乌兰巴托的夜