梦驼铃（致敬2023国庆）

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/webp2/mgtolk.webp') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
   
3. #sky { position: absolute; width: 100%; height: 20%; top: 0; left: 0; }
   
4. </style>
   
5. 
   
6. <div id="papa">
   
7.         <div id="sky"></div>
   
8.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=359379" autoplay loop></audio>
   
9. </div>
   
10. 
    
11. <script>
    
12.        
    
13. (function() {
    
14.         let lrcAr = [ [3,"黑鸭子 - 梦驼铃",6], [24.4,"攀登高峰望故乡",4.9], [30.14,"黄沙万里长",5.0], [36.13,"何处传来驼铃声",5.2], [42.12,"声声敲心坎",4.4], [48.61,"盼望踏上思念路",4.6], [54.35,"飞纵千里山",4.5], [60.43,"天上归雁披残霞",5.1], [66.24,"乡关在何方",4.0], [72.67,"风沙挥不去印在",4.8], [78.2,"历史的血痕",4.4], [84.71,"风沙挥不去苍白",4.6], [90.49,"海棠血泪",4.2], [120.56,"攀登高峰望故乡",4.8], [126.24,"黄沙万里长",4.8], [132.28,"何处传来驼铃声",5.0], [138.24,"声声敲心坎",4.3], [144.94,"盼望踏上思念路",4.4], [150.34,"飞纵千里山",5.0], [156.7,"天上归雁披残霞",4.9], [162.34,"乡关在何方",4.0], [168.73,"黄沙吹老了岁月",4.7], [174.28,"吹不老我的思念",4.3], [180.35,"曾经多少个今夜",5.4], [186.31,"梦回秦关",4.4], [192.7,"风沙挥不去印在",4.5], [198.36,"历史的血痕",4.0], [204.48,"风沙挥不去苍白",5.1], [210.31,"海棠血泪",4.6], [216.55,"风沙挥不去苍白",4.8], [222.33,"海棠血泪",4.5], [228.46,"海棠血泪",7.5] ];
    
15.         let js1 = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.js',
    
16.                 js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_2d.js';
    
17.         let loadJs = (url,callback) => {
    
18.                 let body = document.querySelector('body'), jsNode = document.createElement('script');
    
19.                 jsNode.charset = 'utf-8';
    
20.                 jsNode.setAttribute('src', url);
    
21.                 body.appendChild(jsNode);
    
22.                 jsNode.onload = () => callback();
    
23.         };
    
24.         loadJs(js1, () => {
    
25.                 HCPlayer({
    
26.                         papa: '#papa',
    
27.                         lrcAr: lrcAr,
    
28.                         lrc_css: 'bottom: 20px;',
    
29.                         fs_css: 'color: #eee; background: transparent;',
    
30.                         player_css: 'width: 240px; height: 240px; top: 10px;',
    
31.                         path: 'm8.99999,94.26882l84.79706,0l26.20295,-83.26881l26.20296,83.26881l84.79705,0l-68.60214,51.46237l26.2043,83.26881l-68.60217,-51.46377l-68.60215,51.46377l26.20431,-83.26881l-68.60216,-51.46237z',
    
32.                         btn: {left: 54, top: 100},
    
33.                         track: {track: 'pink', prog: 'red'},
    
34.                         img: {
    
35.                                 play: 'https://638183.freep.cn/638183/web/svg/play_red.svg',
    
36.                                 pause: 'https://638183.freep.cn/638183/web/svg/pause_red.svg'
    
37.                         }
    
38.                 });
    
39.         });
    
40. 
    
41.         loadJs(js2, () => {
    
42.                 H5lz({
    
43.                         papa: '#sky',
    
44.                         total: 20,
    
45.                         size: {width: 36, height: 32},
    
46.                         shape: {background: 'url("https://638183.freep.cn/638183/web/svg/birdmoon.svg") no-repeat center/cover', borderRadius: '0'},
    
47.                         ani: 'toLeft',
    
48.                         maxTime: 30,
    
49.                         offset: {x: 0, y: 0},
    
50.                 });
    
51.         });
    
52. })();
    
53. 
    
54. </script>

复制代码

小辣椒

啊~~~黑黑 我昨天就是找这个五角星的路径网络没有找到

小辣椒

这个国庆节玩最漂亮了

小辣椒

太美了，黑黑威武

马黑黑

本帖，继续测试自由路径进度条播放器插件。一楼使用的路径，是一个闭合路径，形状为正五角星，路径在第31行。

播放器按钮和粒子背景图片，使用 .svg 文档替代图片。svg文档较之于png等图片，在规定的 viewBox 尺寸范围内任意缩放，均不会失真。而且，svg图片极小，比压缩过的jpg、png、webp等更为小巧。

马黑黑

小辣椒 发表于 2023-9-26 13:16
这个国庆节玩最漂亮了

马黑黑

小辣椒 发表于 2023-9-26 13:17
太美了，黑黑威武

红影

这个五角星进度条路径真美，用这个来做进度条，这思路太赞了

红影

“播放器按钮和粒子背景图片，使用 .svg 文档替代图片。”
这些文档都需要上传的？

梦油

预祝黑黑先生双节快乐！

亚伦影音工作室

我的乖乖耶，这也能做出来！

马黑黑

醉美水芙蓉 发表于 2023-9-26 17:12
是鸟儿还是月亮？

大雁

马黑黑

醉美水芙蓉 发表于 2023-9-26 17:12
天上飞的是什么？

是带着月亮飞行的大雁。中秋国庆一起过，少不了月亮的

马黑黑

亚伦影音工作室 发表于 2023-9-26 15:46
我的乖乖耶，这也能做出来！

不知道之前你接触过svg木有

马黑黑

小辣椒 发表于 2023-9-26 13:15
啊~~~黑黑 我昨天就是找这个五角星的路径网络没有找到

可以在线制作，svg 在线路径工具有不少的吧

马黑黑

梦油 发表于 2023-9-26 15:05
预祝黑黑先生双节快乐！

谢谢，大家快乐

马黑黑

红影 发表于 2023-9-26 14:40
“播放器按钮和粒子背景图片，使用 .svg 文档替代图片。”
这些文档都需要上传的？

上传好一些，它们就是图片。如果不想上传，就写在帖子页面里，代码会臃肿一些，使用方法也不同