Spira（测试管状进度条）

马黑黑 · 发表于 2023-7-29 09:16

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2023-8-11 18:35 编辑

马黑黑 · 发表于 2023-7-29 09:17

帖子代码

<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: [[1,"Enzalla - Spira",3]],
});
};
})();
</script>

复制代码

马黑黑 · 发表于 2023-7-29 09:28

帖子使用插件的默认配置。更多的插件配置请参考：

window.onload = () => {
      HCPlayer({
         papa: '#mydiv',
         lrcAr: [[1,"Enzalla - Spira",3]],
         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) 等。