冰之星

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/webp2/bkxk.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; }
   
3. #papa::before { position: absolute; content: ''; width: 200px; height: 200px; right: 100px; bottom: 40px; background: url('data:image/svg+xml;charset=utf-8,<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><path d="M110.00 100.00 147.50 182.27 95.00 108.66 5.00 100.00 95.00 91.34 147.50 17.73z" fill="red" /></svg>'); animation: rot 8s infinite linear var(--state); }
   
4. @keyframes rot { to { transform: rotate(1turn); } }
   
5. </style>
   
6. 
   
7. <div id="papa"></div>
   
8. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1343982589" autoplay loop></audio>
   
9. 
   
10. <script>
    
11. (function() {
    
12.     let loadJs = (url,callback) => {
    
13.         let body = document.querySelector('body'), jsNode = document.createElement('script');
    
14.         jsNode.charset = 'utf-8';
    
15.         jsNode.setAttribute('src', url);
    
16.         body.appendChild(jsNode);
    
17.         jsNode.onload = () => callback();
    
18.     };
    
19. 
    
20.     let playerJs = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.js';
    
21.     let lrcAr = [[2,"冰の星",2],[6,"",1]];
    
22.    
    
23.     loadJs(playerJs, () => {
    
24.         HCPlayer({
    
25.             papa: '#papa',
    
26.             lrcAr: lrcAr,
    
27.             lrc_css: 'top: 20px;',
    
28.             fs_css: 'top: -1000px; background: transparent;',
    
29.             player_css: `
    
30.                 width: 200px;
    
31.                 height: 200px;
    
32.                 right: 100px;
    
33.                 bottom: 40px;
    
34.             `,
    
35.             path: 'M170.00 100.00 189.27 132.49 153.62 145.00 147.50 182.27 112.16 168.94 83.50 193.56 65.00 160.62 27.23 161.06 34.22 123.94 5.00 100.00 34.22 76.06 27.23 38.94 65.00 39.38 83.50 6.44 112.16 31.06 147.50 17.73 153.62 55.00 189.27 67.51z',
    
36.             btn: {left: 34, top: 80},
    
37.             track: {track: 'silver', prog: 'snow'},
    
38.             img: {play: '', pause: ''}
    
39.         });
    
40.     });
    
41. })();
    
42. </script>

复制代码

马黑黑

进度条所用路径、播放器背后的图案，均使用随手编写的JS脚本生成，感兴趣的童鞋可以看看：
生成svg星形图案path路径的代码 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! (huachaowang.com)

本帖，播放器背景图与播放器并非一体，背景图是帖子主元素的 ::before 伪元素，svg 作为它的 background 属性值：

1. #papa::before {
   
2.         position: absolute;
   
3.         content: '';
   
4.         width: 200px;
   
5.         height: 200px;
   
6.         right: 100px;
   
7.         bottom: 40px;
   
8.         background: url('data:image/svg+xml;
   
9.             charset=utf-8,
   
10.             <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    
11.                 <path d="M110.00 100.00 147.50 182.27 95.00 108.66 5.00 100.00 95.00 91.34 147.50 17.73z" fill="red" />
    
12.             </svg>');
    
13.         animation: rot 8s infinite linear var(--state);
    
14. }

复制代码

background属性代码，可以写成一行。

马黑黑

也可以直接将星形图案的svg代码作为背景图给播放器使用，在 play_css 代码中加入 background 属性，注意要写成一行。

马黑黑

但是做播放器的背景图，它是不会旋转的，这是为啥俺用伪元素

红影

“进度条所用路径、播放器背后的图案，均使用随手编写的JS脚本生成”
只是给出的内圆的不同，外形相差这么多的呢

红影

这冰花真漂亮

马黑黑

红影 发表于 2023-11-9 11:21
“进度条所用路径、播放器背后的图案，均使用随手编写的JS脚本生成”
只是给出的内圆的不同，外形相差这么 ...

这是可想而知的：让相同数量的连接点分别均匀分布在里圆、外圆的圆周上，其中的一个圆的所有点都移动一定距离，然后，让两个圆周上的点一一连接。酱紫，两个圆的半径就很重要。

马黑黑

红影 发表于 2023-11-9 11:53
这冰花真漂亮

还不差

红影

background: url('data:image/svg+xml;charset=utf-8,<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><path d="……" fill="red" /></svg>');
学习一下svg图片的使用

马黑黑

红影 发表于 2023-11-9 12:05
background: url('data:image/svg+xml;charset=utf-8,');
学习一下svg图片的使用

这是直接使用svg代码的方法，保存为.svg的就不用这么麻烦

小辣椒

哇塞~~~大气发电模式

小辣椒

黑黑这个很漂亮，小辣椒去套用一个，看看中午来不来得及

小辣椒

不用做歌词我速度会快一点的

马黑黑

小辣椒 发表于 2023-11-9 12:40
哇塞~~~大气发电模式

马黑黑

小辣椒 发表于 2023-11-9 12:41
黑黑这个很漂亮，小辣椒去套用一个，看看中午来不来得及

应该可以的吧

马黑黑

小辣椒 发表于 2023-11-9 12:41
不用做歌词我速度会快一点的

做歌词也快的

小辣椒

马黑黑 发表于 2023-11-9 13:18
做歌词也快的

没有做歌词直接前面用过的加上去了，现在就自己圆不会做，网上找了个

小辣椒

马黑黑 发表于 2023-11-9 13:18
应该可以的吧

已经做好了，只是外面想做圆的不会

马黑黑

小辣椒 发表于 2023-11-9 13:30
已经做好了，只是外面想做圆的不会

慢慢来不急