网
本帖最后由 马黑黑 于 2023-10-13 11:58 编辑 <br /><br /><style>#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/webp2/qnet.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; }
#papa > svg { stroke-linecap: round; }
#btnPlay { filter: hue-rotate(300deg); }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=526547640" 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: 'top: 20px;',
fs_css: 'bottom: 10px; background: transparent;',
player_css: 'width: 200px; height: 240px; left: 2px; top: 2px; background: url("https://638183.freep.cn/638183/t23/btn/hshx.png") no-repeat 35px 35px',
path: 'm 91.318138,107.43137 c 3.172108,4.32435 -4.026526,6.59097 -6.894346,5.49617 -7.771643,-2.96695 -7.691325,-13.839754 -3.649946,-19.870538 7.229043,-10.787603 22.326764,-10.070545 31.227404,-2.113883 13.06194,11.676711 11.70597,32.845561 0.40552,45.237161 C 97.345174,152.69632 71.672306,150.5514 56.846371,134.91197 38.189429,115.23125 40.96347,82.804494 59.685216,64.30816 82.359759,41.906622 118.93205,45.553412 139.57863,68.958702 163.91001,96.541034 159.6834,140.38642 133.49544,164.92912 103.26037,193.26468 55.702374,188.09629 29.268942,156.8964 -0.76640611,121.44507 4.9243018,66.125211 38.596588,35.559306 76.371811,1.2689836 134.95138,7.9666849 167.15604,46.974286 202.90942,90.280114 195.74977,157.10056 154.584,193.67798',
btn: {left: 34, top: 200},
track: {track: '#bbbddc', prog: '#41221a'},
img: {play: '', pause: ''}
});
});
loadJs(js2, () => {
H5lz({
papa: '#papa',
total: 50,
size: {width: 4, height: 18},
shape: {background: '#eee', borderRadius: '50% 100%'},
ani: 'toBottom',
maxTime: 30,
offset: {x: 80, y: 0},
});
});
})();
</script>
本帖最后由 马黑黑 于 2023-10-13 11:58 编辑
帖子代码<style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/webp2/qnet.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; }
#papa > svg { stroke-linecap: round; }
#btnPlay { filter: hue-rotate(300deg); }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=526547640" 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: 'top: 20px;',
fs_css: 'bottom: 10px; background: transparent;',
player_css: 'width: 200px; height: 240px; left: 2px; top: 2px; background: url("https://638183.freep.cn/638183/t23/btn/hshx.png") no-repeat 35px 35px',
path: 'm 91.318138,107.43137 c 3.172108,4.32435 -4.026526,6.59097 -6.894346,5.49617 -7.771643,-2.96695 -7.691325,-13.839754 -3.649946,-19.870538 7.229043,-10.787603 22.326764,-10.070545 31.227404,-2.113883 13.06194,11.676711 11.70597,32.845561 0.40552,45.237161 C 97.345174,152.69632 71.672306,150.5514 56.846371,134.91197 38.189429,115.23125 40.96347,82.804494 59.685216,64.30816 82.359759,41.906622 118.93205,45.553412 139.57863,68.958702 163.91001,96.541034 159.6834,140.38642 133.49544,164.92912 103.26037,193.26468 55.702374,188.09629 29.268942,156.8964 -0.76640611,121.44507 4.9243018,66.125211 38.596588,35.559306 76.371811,1.2689836 134.95138,7.9666849 167.15604,46.974286 202.90942,90.280114 195.74977,157.10056 154.584,193.67798',
btn: {left: 34, top: 200},
track: {track: '#bbbddc', prog: '#41221a'},
img: {play: '', pause: ''}
});
});
loadJs(js2, () => {
H5lz({
papa: '#papa',
total: 50,
size: {width: 4, height: 18},
shape: {background: '#eee', borderRadius: '50% 100%'},
ani: 'toBottom',
maxTime: 30,
offset: {x: 80, y: 0},
});
});
})();
</script>
这个螺旋路径漂亮，跟主题特别吻合。黑黑好帖{:4_199:} 蜘蛛网前面还有个漂亮的蜻蜓呢，真好看{:4_199:} 红影 发表于 2023-10-13 12:08
这个螺旋路径漂亮，跟主题特别吻合。黑黑好帖
感谢支持 红影 发表于 2023-10-13 12:09
蜘蛛网前面还有个漂亮的蜻蜓呢，真好看
图片创意非常不错 马黑黑 发表于 2023-10-13 13:04
感谢支持
这个螺旋路径很顺畅，黑黑把路径弄得很漂亮。我也想法子做个帖子，借用一下这个路径{:4_173:} 马黑黑 发表于 2023-10-13 13:04
图片创意非常不错
这下落的是雨水么，看着像米粒{:4_173:} 红影 发表于 2023-10-13 14:04
这下落的是雨水么，看着像米粒
也可以理解为虫子{:4_170:} 红影 发表于 2023-10-13 14:03
这个螺旋路径很顺畅，黑黑把路径弄得很漂亮。我也想法子做个帖子，借用一下这个路径
螺旋路径好像很常见 马黑黑 发表于 2023-10-13 16:31
也可以理解为虫子
这么多虫子掉下来，蛛网可以大丰收了{:4_173:} 马黑黑 发表于 2023-10-13 16:32
螺旋路径好像很常见
好像用公式实现的比较多吧，用坐标点实现的少。 这张美丽的大网是黑黑老师织的吗，好漂亮，只是很替那只蜻蜓担心啊。这个螺旋播放器很新颖别致{:4_187:} 千羽 发表于 2023-10-13 20:49
这张美丽的大网是黑黑老师织的吗，好漂亮，只是很替那只蜻蜓担心啊。这个螺旋播放器很新颖别致
你以为我是黑蜘蛛呀{:4_170:} 马黑黑 发表于 2023-10-13 20:50
你以为我是黑蜘蛛呀
更正一下：那就是黑蜘蛛织的了{:4_173:} 千羽 发表于 2023-10-13 20:53
更正一下：那就是黑蜘蛛织的了
嗯，也许 马黑黑 发表于 2023-10-13 20:56
嗯，也许
嗯，一回事{:4_203:} 红影 发表于 2023-10-13 18:32
好像用公式实现的比较多吧，用坐标点实现的少。
公式算出来的就是一个一个的坐标点 千羽 发表于 2023-10-13 20:57
嗯，一回事
不是两回就好 红影 发表于 2023-10-13 18:29
这么多虫子掉下来，蛛网可以大丰收了
坐享其成