Spira（测试管状进度条）
本帖最后由 马黑黑 于 2023-8-11 18:35 编辑 <br /><br /><style>#mydiv { margin: 0 0 0 calc(50% - 593px); display: grid; place-items: center; width: 1024px; height: 588px; background: lightblue url('https://638183.freep.cn/638183/t23/2/spira.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; user-select: none; overflow: hidden; position: relative; z-index: 1; --state: running; }
#mydiv::before,#mydiv::after { position: absolute; left: 0px; top: 0px; content: url('https://638183.freep.cn/638183/t23/2/yumc.jpg'); mix-blend-mode: screen; offset-path: path('M-20,-20 L1060,200');animation: move 30s var(--delay) infinite var(--state); --delay: 0s; }
#mydiv::after { --delay: -15s; }
@keyframes move { from {offset-distance: 0%; transform: rotate(0deg); } to { offset-distance: 100%; transform: rotate(720deg); } }
</style>
<div id="mydiv"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=429261487" autoplay loop></audio>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/tube_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);
window.onload = () => {
HCPlayer({
papa: '#mydiv',
lrcAr: [],
});
};
})();
</script>
帖子代码
<style>
#mydiv { margin: 0 0 0 calc(50% - 593px); display: grid; place-items: center; width: 1024px; height: 588px; background: lightblue url('https://638183.freep.cn/638183/t23/2/spira.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; user-select: none; overflow: hidden; position: relative; z-index: 1; --state: running; }
#mydiv::before,#mydiv::after { position: absolute; left: 0px; top: 0px; content: url('https://638183.freep.cn/638183/t23/2/yumc.jpg'); mix-blend-mode: screen; offset-path: path('M-20,-20 L1060,200');animation: move 30s var(--delay) infinite var(--state); --delay: 0s; }
#mydiv::after { --delay: -15s; }
@keyframes move { from {offset-distance: 0%; transform: rotate(0deg); } to { offset-distance: 100%; transform: rotate(720deg); } }
</style>
<div id="mydiv"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=429261487" autoplay loop></audio>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/tube_lrc.js';
document.head.appendChild(script);
window.onload = () => {
HCPlayer({
papa: '#mydiv',
lrcAr: [],
});
};
})();
</script>
帖子使用插件的默认配置。更多的插件配置请参考：
window.onload = () => {
HCPlayer({
papa: '#mydiv',
lrcAr: [],
lrc_css: `
left: 10px;
top: 10px;
color: gray;
--bg: linear-gradient(to right, tan, red);
`;
player_css: `
left: 100px;
bottom: 15px;
--color: tan;
--track: #ccc;
--prog: red;
--bg: url('图片地址') no-repeat center/cover;
`;
});
};
【注】
lrc_css 和 player_css 都有 --bg 变量，分开设置，支持图片、渐变背景和纯颜色。
player_css 参数，--color 针对管状进度条边框颜色和时间信息的文本色，--track 是进度条底轨颜色，--prog 是进度颜色，这些建议使用纯颜色表达方式，支持16进制、rgb(a) 和 hsl(a) 等。
马黑黑 发表于 2023-7-29 09:28
帖子使用插件的默认配置。更多的插件配置请参考：
window.onload = () => {
也就是说不使用配套设置时，可以这样调整。这个楼层应该和沙发层配合着看呢{:4_187:} 欣赏黑黑又一个封装上传效果。这个播放器按钮配色很美，直接用默认的设置就很漂亮呢{:4_199:} 飘飞的羽毛很晶莹剔透，好美啊{:4_187:} 刚看到标题时看错成了 试管进度条，哈哈{:4_189:} 红影 发表于 2023-7-29 10:14
也就是说不使用配套设置时，可以这样调整。这个楼层应该和沙发层配合着看呢
每一个插件，都提供默认配置，默认配置不合适时，可自己调配。系列插件的参数，将尽量弄成一致的属性，但由于形态不同，不可能全部一致。
红影 发表于 2023-7-29 10:18
刚看到标题时看错成了 试管进度条，哈哈
挺好，就是试管的样纸的 红影 发表于 2023-7-29 10:16
欣赏黑黑又一个封装上传效果。这个播放器按钮配色很美，直接用默认的设置就很漂亮呢
没有加透明度。加透明度的话可能会更炫酷。 黑黑这个播放器带进度条的，确实透明的更加漂亮，以前也是有同类型的那种，只是不是光盘的，也是挺喜欢的{:4_199:} 记得我做的那个航天人之歌的播放器就是这种类型的，那个播放器我一下子做了几次的 小辣椒 发表于 2023-7-29 11:41
黑黑这个播放器带进度条的，确实透明的更加漂亮，以前也是有同类型的那种，只是不是光盘的，也是挺喜欢的{: ...
按钮可以定制的，放图片也行 飘飞的羽毛很美，这个小巧精致的播放器是我喜欢的几个播放器之一，给黑黑老师点赞送花花{:4_187:}{:4_178:}{:4_199:} 千羽 发表于 2023-7-29 15:33
飘飞的羽毛很美，这个小巧精致的播放器是我喜欢的几个播放器之一，给黑黑老师点赞送花花 ...
木有冰激凌吗{:4_203:} 马黑黑 发表于 2023-7-29 15:41
木有冰激凌吗
有呀，发个地址，马上空运{:4_173:} 千羽 发表于 2023-7-29 15:44
有呀，发个地址，马上空运
海角天涯 马黑黑 发表于 2023-7-29 15:46
海角天涯
酒花冰激凌哦，不想吃了？{:4_203:} 千羽 发表于 2023-7-29 15:52
酒花冰激凌哦，不想吃了？
换一瓶好酒吧{:4_170:} 欣赏黑黑老师新品佳作~~{:4_199:}{:4_187:}