冰之星

马黑黑 发表于 2023-11-9 07:42

马黑黑 发表于 2023-11-9 07:43

帖子代码
<style>
#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; }
#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); }
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1343982589" 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 playerJs = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.js';
let lrcAr = [,];

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;
         `,
         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',
         btn: {left: 34, top: 80},
         track: {track: 'silver', prog: 'snow'},
         img: {play: '', pause: ''}
   });
});
})();
</script>

马黑黑 发表于 2023-11-9 07:52

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

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

#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);
}background属性代码，可以写成一行。

马黑黑 发表于 2023-11-9 08:13

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

马黑黑 发表于 2023-11-9 08:20

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

红影发表于 2023-11-9 11:21

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

红影发表于 2023-11-9 11:53

这冰花真漂亮{:4_199:}

马黑黑 发表于 2023-11-9 12:02

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

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

马黑黑 发表于 2023-11-9 12:02

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

还不差

红影发表于 2023-11-9 12:05

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图片的使用{:4_187:}

马黑黑 发表于 2023-11-9 12:19

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

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

小辣椒 发表于 2023-11-9 12:40

哇塞~~~大气发电模式{:4_199:}

小辣椒 发表于 2023-11-9 12:41

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

小辣椒 发表于 2023-11-9 12:41

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

马黑黑 发表于 2023-11-9 13:18

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

{:4_181:}

马黑黑 发表于 2023-11-9 13:18

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

应该可以的吧

马黑黑 发表于 2023-11-9 13:18

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

做歌词也快的

小辣椒 发表于 2023-11-9 13:29

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

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

小辣椒 发表于 2023-11-9 13:30

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

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

马黑黑 发表于 2023-11-9 13:32

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

慢慢来不急

页: [1] 2

花潮论坛's Archiver

冰之星