《别错过》TO 花飞飞（学习黑黑meter进度条播放代码）
<style>#papa { margin: 80px 0 0 calc(50% - 681px); width: 1200px; height: 674px; background: url('https://pic.imgdb.cn/item/64d6519f1ddac507ccf25b6a.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; z-index: 1; position: relative; --state: running; overflow: hidden; }
#vid { position: absolute; width: 100%; height: 110%; top:-10%; object-fit: cover; pointer-events: none; mix-blend-mode: screen; z-index: 2; opacity: .35; }
.txt{position: absolute; left: 10%; top: 70%; --c: #4682B4;--w1: radial-gradient(100% 57% at top ,#0000 100%,var(--c) 100.5%) no-repeat;--w2: radial-gradient(100% 57% at bottom, var(--c) 100%,#0000 100.5%) no-repeat;background: var(--w1),var(--w2),var(--w1),var(--w2);background-position-x: -200%, -100%, 0%, 100%;background-position-y: 100%;background-size: 50.5% 100%;animation: m 2s infinite linear var(--state);font-size: 80px;font-weight: bold;color: transparent;-webkit-background-clip: text; -webkit-text-stroke: 2px var(--c); }
@keyframes m {0%{background-position-x:-200%, -100%, 0%, 100%}100%{background-position-x:0%, 100%, 200%, 300%} }
</style>
<div id="papa"><video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/25/51/6241876f98a30_10s_big.mp4" autoplay="" loop="" muted="" bd_landing_video_statistic_record_key="1"></video>
<div class="txt">别错过</div></div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/01/31/a0d9b30987b921f50991de5eb42f86d1.mp3" autoplay loop></audio>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/meter_pinpu_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);
let geci = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
script.onload = () => {
HCPlayer({
papa: '#papa',
lrcAr: geci,
lrc_css: `
top: 20px;
color: lightblue;
--bg: linear-gradient(rgba(200,200,250,.25),rgba(100,200,250,.65));
`,
player_css: `
bottom: 10px;
left: 60px;
color: snow;
`,
/* 频谱设置 num - 频谱数; width - 频谱条宽; color - 频谱条颜色（不要 color 则去随机颜色）*/
pinpu: { num: 40, width: 3, color: 'rgba(100,200,250,.5)' },
});
}
})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script> 谢谢飞飞的赠礼，影子回个小礼。周末了，一起听歌。这个貌似算是抖音热歌呢。@花飞飞{:4_187:} 两个地方不知道怎么改，一个是全屏按钮的底色，一个是播放进度的覆盖颜色。跑上传帖子里找半天，仍然没敢改，怕弄错@马黑黑{:4_173:} 去搜渐变，主要想仔细学习一下，结果遇到个好玩的文字波浪，用到帖子里，好玩一下{:4_173:} 哦，想起来了，meter的进度颜色是随进度百分比变化的，这个不能改。看我这记性{:4_173:} 学习！{:4_187:} 红影 发表于 2023-8-11 23:27
谢谢飞飞的赠礼，影子回个小礼。周末了，一起听歌。这个貌似算是抖音热歌呢。@花飞飞
看到影子的贴子赶紧上来瞧瞧。。。。周末收到礼物，好开心哪~~{:4_205:} 焱鑫磊 发表于 2023-8-12 00:13
学习！
问好焱鑫磊，上午好{:4_187:} 醉美水芙蓉 发表于 2023-8-12 06:24
这个波浪字体漂亮！
无意中见到的，还挺好玩的{:4_173:} 红影 发表于 2023-8-11 23:30
去搜渐变，主要想仔细学习一下，结果遇到个好玩的文字波浪，用到帖子里，好玩一下
这个波浪字体活泼之极，代码完成的，第一次看到，太漂亮了，色彩设的与贴子十分协调~~~影子好厉害！{:4_187:} 红影 发表于 2023-8-11 23:27
谢谢飞飞的赠礼，影子回个小礼。周末了，一起听歌。这个貌似算是抖音热歌呢。@花飞飞
歌曲第一次听到，也是一如既往的活泼，节奏感极强。。。。
影子平时灌水给人温温柔柔柔，聪明伶俐，做贴子所选歌曲却总是热烈奔放~~迷人之极~~{:4_187:} 感谢影子带来这么精致的作品，大爱！
图片空间感极强，用的视频跟光晕动感跳动，太美了~~，多看几遍~~{:4_205:} {:4_208:} 花飞飞 发表于 2023-8-12 08:55
看到影子的贴子赶紧上来瞧瞧。。。。周末收到礼物，好开心哪~~
我做帖子慢，其实收到礼物就已经在想着怎样回礼了{:4_173:} 花飞飞 发表于 2023-8-12 08:58
这个波浪字体活泼之极，代码完成的，第一次看到，太漂亮了，色彩设的与贴子十分协调~~~影子好厉害！{:4_1 ...
本来在文字里加上TO花飞飞的，发现加完文字太长，都侵到人物哪里去了，又不想把文字弄太小，后来就这样了，飞飞知道是真心送你的就好{:4_179:} 花飞飞 发表于 2023-8-12 09:02
歌曲第一次听到，也是一如既往的活泼，节奏感极强。。。。
影子平时灌水给人温温柔柔柔，聪明伶俐，做贴 ...
节奏强的歌曲也很有感染力，前几天去酒吧夜店，被热烈的氛围感染得，摇晃到凌晨2点，还觉得意犹未尽，朋友说我跟吃了摇头丸似的{:4_189:} 花飞飞 发表于 2023-8-12 09:04
感谢影子带来这么精致的作品，大爱！
图片空间感极强，用的视频跟光晕动感跳动，太美了~~，多看几遍~~{:4_ ...
只要飞飞喜欢，影子就开心。喜欢就是给予送礼人的最大鼓励{:4_179:} 红影 发表于 2023-8-11 23:29
两个地方不知道怎么改，一个是全屏按钮的底色，一个是播放进度的覆盖颜色。跑上传帖子里找半天，仍然没敢改 ...
关于全屏按钮，如果你使用来自网页 http://mhh.52qingyin.cn/api/player/ 提供的资源，则所有的基于全屏的设置很简单，里面的通用配置一节有举例。
播放器进度条设置，早已统一为两个CSS变量： --track 和 --prog 影子朋友早晨好！文字恰似三杯水，咣咣铛铛的真有意思。这样的设计独居匠心。