《中国军魂》（学习黑黑《山河壮丽》简洁进度条）
<style>@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: url('https://pic1.imgdb.cn/item/68bc44e958cb8da5c884fcf7.jpg') no-repeat center/cover; --ma-size: 10%; }
#ma {left: 60px; bottom: 26px; background: url('https://pic1.imgdb.cn/item/68bc489c58cb8da5c88509d8.png') no-repeat center/cover; }
#btnFs { right: 60px; bottom: 20px; color: #fce2ba; border-color: #fce2ba!important; }
.qk-vid {opacity: .2;}
#prog { position: absolute; cursor: pointer; opacity: 1; top: 28%; right: 0; width: 31%; transform: rotate(-90deg);filter: hue-rotate(124deg); }
#lrc { right: 100px; top: 30px; color: #fce2ba; letter-spacing: 4px; font: bold 3.2em STLiti; writing-mode: vertical-lr; }
#lrc::before { width: 100%; height: 0; background: url('https://pic1.imgdb.cn/item/68bc526058cb8da5c885215f.jpg') center; background-clip: text; }
@keyframes cover1 { from { height: 0; }to { height: 100%; } }
@keyframes cover2 { from { height: 0; }to { height: 100%; } }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1927723493" autoplay loop></audio>
<video class="qk-vid" src="https://video.699pic.com/videos/59/36/39/a_wzkfsXYaq3p11656593639.mp4" autoplay loop muted></video>
<progress id="prog"></progress>
<div id="ma" class="brightness"></div>
<svg id="svg" width="100%" height="100%" viewBox="0 0 1600 900">
<defs>
<g id="svgShape" fill="white" stroke="snow">
<image x="0" y="0" width="140" height="78" href="https://pic1.imgdb.cn/item/68bc3de058cb8da5c884ce78.png" />
</g>
<path id="motionPath" d="M-160 220 L1600 120" />
</defs>
</svg>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/svglz_fs.js';
var setting = { svg: svg, lz: 20, dur: 12, gap: 600 };
FS(pa, ma, setting);
var uses = svg.querySelectorAll('use');
uses.forEach(u => u.style.setProperty('filter', `hue-rotate(${Math.random() * 360}deg)`));
import lrc from 'https://638183.freep.cn/638183/web/lrc/hclrc_only.js';
var geci = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
lrc(pa, geci);
aud.ontimeupdate = () => prog.value=aud.currentTime/aud.duration;
prog.onclick = (e) => aud.currentTime=aud.duration*e.offsetX/prog.offsetWidth;
</script> 我把进度条放到旗杆上，想调出红色的上升标志，代表上升的气势，用filter: hue-rotate() 也没试出来。
把陨落之翼里的小羽毛换了战斗机，谢谢黑黑的代码@马黑黑 {:4_187:} 这个进度果然很好用，加了歌词，调整进度条，歌词同步也跟着变化呢，虽然知道是这个结果，亲眼看到更开心{:4_173:} 非常喜欢的一首歌，是《亮剑》里的插曲。我曾在视频里见过楚云飞（张光北）演唱这首歌，唱得特别好。
剑已出鞘 雷鸣电闪，这歌词太气势了，听了很多遍，虽然没找原唱，这个是某个翻唱，听着也很不错。@樵歌 喜欢这歌么，来翻唱一个如何{:4_173:}
我都想去学唱了，不过我应该是唱不好，还是算了。 把进度条放到旗杆上了，这个小羽毛换了战斗机特别壮观。还有激昂的歌曲。太棒了！{:4_187:} 欣赏点赞学习。{:4_199:} 效果超棒！谢谢影子精彩分享{:4_204:} 盛世华章，铁血军魂！ 先生，如此大气磅礴，真的钦佩！大赞！ 红影 发表于 2025-9-7 09:59
我把进度条放到旗杆上，想调出红色的上升标志，代表上升的气势，用filter: hue-rotate() 也没试出来。
把 ...
hue-rotate 是可以调出红色系的进度指示，你需要改变函数的角度参数 画面恢宏震憾，静态完美清晰，动画丝滑流趟！ 学以致用！把单调的代码巧妙地转化为动态的音画，展现设计营造的意境，播放器的位置也很和谐，与整个画面相得益彰！ 红影 发表于 2025-9-7 10:04
非常喜欢的一首歌，是《亮剑》里的插曲。我曾在视频里见过楚云飞（张光北）演唱这首歌，唱得特别好。
剑已 ...
嗯，这歌既有进行曲的节奏，也有豪迈的意境！等抽时间学习一下，看能唱好否。{:4_173:} 梦江南 发表于 2025-9-7 10:16
把进度条放到旗杆上了，这个小羽毛换了战斗机特别壮观。还有激昂的歌曲。太棒了！
调整了一些设置，谢谢江南鼓励{:4_187:} 杨帆 发表于 2025-9-7 11:05
效果超棒！谢谢影子精彩分享
感谢杨帆夸奖鼓励，下午好{:4_187:} 梦油 发表于 2025-9-7 11:05
盛世华章，铁血军魂！
是啊，看了九三阅兵很激动，正好也借机学习一下代码{:4_187:} 小文 发表于 2025-9-7 11:48
先生，如此大气磅礴，真的钦佩！大赞！
多谢小文的喜欢，谢谢{:4_187:} 马黑黑 发表于 2025-9-7 12:03
hue-rotate 是可以调出红色系的进度指示，你需要改变函数的角度参数
我用习惯的edge看不到调后的颜色，貌似调整颜色百分浏览器才看得到。 樵歌 发表于 2025-9-7 13:40
画面恢宏震憾，静态完美清晰，动画丝滑流趟！
那些飞机是黑黑的粒子代码驱动的{:4_173:} 樵歌 发表于 2025-9-7 13:43
学以致用！把单调的代码巧妙地转化为动态的音画，展现设计营造的意境，播放器的位置也很和谐，与整个画面相 ...
谢谢师兄夸奖，想学一下代码，正好做一下这首喜欢的歌曲{:4_173:}