等你归来 TO：阳光&冰心 祝双节快乐！（学习黑黑 落山风路径播放器效果）
<style>
#papa { margin: 150px 0 0 calc(50% - 826px); width: 1490px; height: 647px; background: url('https://wj.zp68.com/lxx/yunhua/2023/09/26/01.gif') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
#dt2{ position: absolute; width: 180px; height: 240px; top: 0px; left: 1280px; }
#dt3{ position: absolute; width: 180px; height: 240px; top: 50px; left: 1300px; }
#dt4{ position: absolute; width: 299px; height: 645px; top: 2px; left: 0px; }
</style>
<div id="papa">
<img id="dt2" src="https://wj.zp68.com/lxx/yunhua/2023/09/26/yezx.gif" alt="" />
<img id="dt3" src="https://wj.zp68.com/lxx/yunhua/2023/09/26/yezx.gif" alt="" />
<img id="dt4" src="https://wj.zp68.com/lxx/yunhua/2023/09/26/03.png" alt="" />
<audio id="aud" src="https://wx.ttt.dj/data/nfs//mp3/dngl.mp3" 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: 30px;;left: 30%;',
fs_css: 'color: #eee; background: transparent;top: 64%;',
player_css: 'width: 200px; height: 120px;left: 80px; bottom: 10px;',
path: 'M100 5 Q-20 160 190 5 ',
btn: {left: 34, top: 80},
track: {track: '#fff', prog: '#185923'},
img: {
play: 'https://wj.zp68.com/lxx/yunhua/2023/09/26/tz.png',
pause: 'https://wj.zp68.com/lxx/yunhua/2023/09/26/dak.png'
}
});
});
loadJs(js2, () => {
H5lz({
papa: '#papa',
total: 20,
size: {width: 25, height: 45},
shape: {background: 'url("https://wj.zp68.com/lxx/yunhua/2023/09/26/yez4.png")', borderRadius: '0'},
ani: 'toLeft',
maxTime: 30,
offset: {x: 0, y: -100},
});
});
})();
</script> @三月的阳光
@冰心
祝福二位双节快乐！幸福的一对儿，幸福快乐永远！ @马黑黑
黑黑，昨天下了还是去网上搜索了关于路径的教程，心里有点数了，但搜索的路径代码都不够漂亮，最后因为我换了按钮图片我的比较显小，就把你的路径角度稍微改了一下，还是黑黑的路径效果漂亮{:4_177:} 阳光不好意思，前段时间玩的少，我也是许多的东西不会了，昨天看见黑黑这个路径编辑的播放器效果很美，我就学习做一个送给你们，但因为时间关系我没有做图，这个是旧图我加了补丁的{:4_173:}，音乐也是以前玩过，但感觉很好听，很喜欢这首歌就用上了。你们别嫌弃，我的心意绝对是最真诚的 来了来了{:4_170:} 小辣椒 发表于 2023-9-26 13:04
@马黑黑
黑黑，昨天下了还是去网上搜索了关于路径的教程，心里有点数了，但搜索的路径代码都不够漂亮， ...
以后方便了，多研究一下下 马黑黑 发表于 2023-9-26 13:13
以后方便了，多研究一下下
心里有点数了{:4_173:} 马黑黑 发表于 2023-9-26 13:12
来了来了
黑黑赶快去眯一下，我昨天睡的迟，现在还可以眯一下，我得马上下了，晚上见 小辣椒 发表于 2023-9-26 13:19
黑黑赶快去眯一下，我昨天睡的迟，现在还可以眯一下，我得马上下了，晚上见
好的，我也正准备休息一下，下午任务重，好歹歇一会儿再说 小辣椒 发表于 2023-9-26 13:18
心里有点数了
确实不太难的 这个曲线进度条还是黑黑的最新效果呢，亲爱的太快了。这个效果在这个帖子里特别适合。
欣赏亲爱的好帖，借帖同祝阳光哥哥和冰心嫂子双节快乐，相伴永远{:4_187:} 飘动的粒子也很有特点，像是那动图藤蔓上飘落下来的似的{:4_199:} 小辣椒 发表于 2023-9-26 13:02
@三月的阳光
@冰心
谢谢师傅，同祝师傅双节快乐~~{:4_187:}{:4_187:} 小辣椒 发表于 2023-9-26 13:08
阳光不好意思，前段时间玩的少，我也是许多的东西不会了，昨天看见黑黑这个路径编辑的播放器效果很美，我就 ...
我也是有一段时间没来了，师傅做帖还是手到擒来，挺美的，程响的歌也好听~~{:4_171:} 我就看看，这个路径的播放器我肯定不会做 送礼，收礼的统统开心{:4_187:} 小辣椒 发表于 2023-9-26 13:02
@三月的阳光
@冰心
谢谢美女师傅哈哈这歌也是我喜欢的同祝美女师傅双节快乐 画面效果超棒的赞哈 红影 发表于 2023-9-26 14:34
这个曲线进度条还是黑黑的最新效果呢，亲爱的太快了。这个效果在这个帖子里特别适合。
欣赏亲爱的好帖，借 ...
谢谢影子妹妹同祝妹妹 双节快乐哈