梦驼铃（致敬2023国庆）

马黑黑 发表于 2023-9-26 13:14

马黑黑 发表于 2023-9-26 13:15

帖子代码
<style>
#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; }
#sky { position: absolute; width: 100%; height: 20%; top: 0; left: 0; }
</style>

<div id="papa">
<div id="sky"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=359379" 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: 'bottom: 20px;',
fs_css: 'color: #eee; background: transparent;',
player_css: 'width: 240px; height: 240px; top: 10px;',
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',
btn: {left: 54, top: 100},
track: {track: 'pink', prog: 'red'},
img: {
play: 'https://638183.freep.cn/638183/web/svg/play_red.svg',
pause: 'https://638183.freep.cn/638183/web/svg/pause_red.svg'
}
});
});

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

</script>

小辣椒 发表于 2023-9-26 13:15

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

小辣椒 发表于 2023-9-26 13:16

这个国庆节玩最漂亮了{:4_178:}

小辣椒 发表于 2023-9-26 13:17

太美了，黑黑威武{:4_187:}

马黑黑 发表于 2023-9-26 13:19

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

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

马黑黑 发表于 2023-9-26 13:25

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

{:4_191:}

马黑黑 发表于 2023-9-26 13:26

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

{:4_172:}

红影发表于 2023-9-26 14:37

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

红影发表于 2023-9-26 14:40

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

梦油发表于 2023-9-26 15:05

预祝黑黑先生双节快乐！

亚伦影音工作室 发表于 2023-9-26 15:46

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

醉美水芙蓉 发表于 2023-9-26 17:12

马黑黑 发表于 2023-9-26 17:48

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

大雁

马黑黑 发表于 2023-9-26 17:49

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

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

马黑黑 发表于 2023-9-26 17:49

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

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

马黑黑 发表于 2023-9-26 17:50

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

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

马黑黑 发表于 2023-9-26 17:50

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

谢谢，大家快乐

马黑黑 发表于 2023-9-26 17:52

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

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

页: [1] 2 3 4 5 6 7 8

花潮论坛's Archiver

梦驼铃（致敬2023国庆）