刀郎 - 颠倒歌
<style>#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/webp2/04.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; }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2063486979" 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; --bg: linear-gradient(rgba(200,10,20,.35),rgba(200,10,20,.7)); color: #aaa;',
fs_css: 'transform: translate(0,-35px); background: transparent;',
player_css: 'width: 200px; height: 200px; transform: translateY(-20px);',
path: 'M10 10 H190 L100 190z',
btn: {left: 34, top: 20},
track: {track: 'olive', prog: 'snow'},
img: {play: '', pause: ''}
});
});
loadJs(js2, () => {
H5lz({
papa: '#papa',
total: 15,
size: {width: 32, height: 32},
shape: {background: 'url("https://638183.freep.cn/638183/web/svg/flower_1.svg") no-repeat center/cover', borderRadius: '0'},
ani: 'toTop',
maxTime: 30,
offset: {x: -100, y: 0},
});
});
})();
</script>
帖子代码
<style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/webp2/04.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; }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2063486979" 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; --bg: linear-gradient(rgba(200,10,20,.35),rgba(200,10,20,.7)); color: #aaa;',
fs_css: 'transform: translate(0,-35px); background: transparent;',
player_css: 'width: 200px; height: 200px; transform: translateY(-20px);',
path: 'M10 10 H190 L100 190z',
btn: {left: 34, top: 20},
track: {track: 'olive', prog: 'snow'},
img: {play: '', pause: ''}
});
});
loadJs(js2, () => {
H5lz({
papa: '#papa',
total: 15,
size: {width: 32, height: 32},
shape: {background: 'url("https://638183.freep.cn/638183/web/svg/flower_1.svg") no-repeat center/cover', borderRadius: '0'},
ani: 'toTop',
maxTime: 30,
offset: {x: -100, y: 0},
});
});
})();
</script>
自由路径进度条播放器插件演示
路径：29行
在 宽200高200 的svg画布里，绘制一个闭合性质的倒三角形做播放进度指示器、控制器。 这个有意思，用倒三角来表达颠倒的意思，很贴切{:4_187:} 用svg做的粒子也好厉害，原来它还能做出这么复杂的图形呢{:4_199:} 这歌词真有意思。边听歌边学习黑黑代码，真好{:4_187:} 红影 发表于 2023-10-1 09:16
这歌词真有意思。边听歌边学习黑黑代码，真好
颠倒歌不是新集中最好的，它更像是新集的注释 红影 发表于 2023-10-1 09:15
用svg做的粒子也好厉害，原来它还能做出这么复杂的图形呢
一般都是用辅助工具生成的。完全由人设计的作品当然也有，还很多，不过由于计算太精密，很费劲 红影 发表于 2023-10-1 09:14
这个有意思，用倒三角来表达颠倒的意思，很贴切
简单的东东了 刀郎的歌我喜欢的{:4_199:} 欣赏马老师好分享{:4_199:} 冬天的雨 发表于 2023-10-1 10:28
欣赏马老师好分享
节日好 马黑黑 发表于 2023-10-1 10:32
节日好
马老师国庆节快乐{:4_187:} 冬天的雨 发表于 2023-10-1 10:36
马老师国庆节快乐
同乐 祝黑黑先生节日快乐！ 梦油 发表于 2023-10-1 10:37
祝黑黑先生节日快乐！
同乐同乐 马黑黑 发表于 2023-10-1 10:17
颠倒歌不是新集中最好的，它更像是新集的注释
歌词并不是直白的，很多需要自己去想。 马黑黑 发表于 2023-10-1 10:18
一般都是用辅助工具生成的。完全由人设计的作品当然也有，还很多，不过由于计算太精密，很费劲
没注意到辅助工具，哪个辅助工具最好用？ 马黑黑 发表于 2023-10-1 10:19
简单的东东了
这个画起来挺简单，寓意挺好。 欣赏欣赏