马黑黑 发表于 2025-9-7 13:01

通过hue-rotate滤镜改变progress进度指示颜色

<style>
        .prog-wrapper { margin: auto; padding: 60px; width: 400px; height: 300px; }
        .tMid { text-align: center; }
</style>

<divclass="prog-wrapper">
        <p class="tMid">
                <progress id="prog"></progress>
        </p>
        <p>
                <br><br><label for="rangeAngle">调整 hue-rotate 值：</label>
                <input id="rangeAngle" type="range" min="0" max="360" value="0" />
                <output id="deg">0deg</output>
        </p>
</div>

<script>
        rangeAngle.oninput = () => {
                deg.value = rangeAngle.value + 'deg';
                prog.style.setProperty('filter', `hue-rotate(${rangeAngle.value}deg)`);
        };
</script>

马黑黑 发表于 2025-9-7 13:07

progress 标签的进度指示色在现代浏览器中默认是 #0078D7，蓝色系。凡颜色不是黑灰白的，都可以通过色相旋转将其变成色盘中的相应色彩（没有黑灰白），一楼就是演示这个，也可从中拿到 hue-rotate 的角度参数值（注意不能少 deg 单位）。

一楼完整代码：

<style>
        .prog-wrapper { margin: auto; padding: 60px; width: 400px; height: 300px; }
        .tMid { text-align: center; }
</style>

<divclass="prog-wrapper">
        <p class="tMid">
                <progress id="prog"></progress>
        </p>
        <p>
                <br><br><label for="rangeAngle">调整 hue-rotate 值：</label>
                <input id="rangeAngle" type="range" min="0" max="360" value="0" />
                <output id="deg">0deg</output>
        </p>
</div>

<script>
        rangeAngle.oninput = () => {
                deg.value = rangeAngle.value + 'deg';
                prog.style.setProperty('filter', `hue-rotate(${rangeAngle.value}deg)`);
        };
</script>


杨帆 发表于 2025-9-7 13:45

真好！可以随意改变进度指示颜色了，谢谢马老师经典分享{:4_191:}

红影 发表于 2025-9-7 14:51

奇怪，我用edge浏览器，则调整了也看不到颜色改变。
用百分浏览器可以调颜色，但是歌词同步里的颜色剪切无法剪。
好像这两个浏览器都不能用{:4_203:}

红影 发表于 2025-9-7 14:53

我好像就这两个浏览器，真奇怪，为什么edge看不到颜色变化，是我的设置问题么？

山人 发表于 2025-9-7 15:41

红影 发表于 2025-9-7 14:51
奇怪，我用edge浏览器，则调整了也看不到颜色改变。
用百分浏览器可以调颜色，但是歌词同步里的颜色剪切无 ...

你的EDGE浏览器需要升级

马黑黑 发表于 2025-9-7 15:55

红影 发表于 2025-9-7 14:53
我好像就这两个浏览器，真奇怪，为什么edge看不到颜色变化，是我的设置问题么？

如果看不到，不是版本太低，就是设置混乱了。先清除浏览器缓存试试，不行的话恢复设置，还不行的话更新浏览器到最新版本

红影 发表于 2025-9-7 19:52

山人 发表于 2025-9-7 15:41
你的EDGE浏览器需要升级

嗯嗯，我去清理了一下历史记录，果然可以了，谢谢{:4_187:}

红影 发表于 2025-9-7 19:53

马黑黑 发表于 2025-9-7 15:55
如果看不到，不是版本太低，就是设置混乱了。先清除浏览器缓存试试，不行的话恢复设置，还不行的话更新浏 ...

是的，已经找到问题所在了，现在好了{:4_199:}

马黑黑 发表于 2025-9-7 21:38

红影 发表于 2025-9-7 19:53
是的，已经找到问题所在了，现在好了

鱼吃的少了容易出问题

红影 发表于 2025-9-8 22:39

马黑黑 发表于 2025-9-7 21:38
鱼吃的少了容易出问题

吃多了鱼的小命出问题。

马黑黑 发表于 2025-9-9 08:05

红影 发表于 2025-9-8 22:39
吃多了鱼的小命出问题。

鱼基本都是人工养殖了，专门养来吃的，不是你想保护的宠物鱼

红影 发表于 2025-9-9 21:43

马黑黑 发表于 2025-9-9 08:05
鱼基本都是人工养殖了，专门养来吃的，不是你想保护的宠物鱼

哦哦，那还好{:4_187:}

马黑黑 发表于 2025-9-9 21:44

红影 发表于 2025-9-9 21:43
哦哦，那还好

宠物鱼一般都不会有人吃的，死了就拿去喂鱼

红影 发表于 2025-9-10 12:30

马黑黑 发表于 2025-9-9 21:44
宠物鱼一般都不会有人吃的，死了就拿去喂鱼

拿鱼喂鱼？{:4_173:}

马黑黑 发表于 2025-9-10 13:44

红影 发表于 2025-9-10 12:30
拿鱼喂鱼？

也有做肥料的

红影 发表于 2025-9-10 21:24

马黑黑 发表于 2025-9-10 13:44
也有做肥料的

嗯嗯，已经死去的鱼无论怎么处理都行，生命毕竟不存在了。

马黑黑 发表于 2025-9-10 21:47

红影 发表于 2025-9-10 21:24
嗯嗯，已经死去的鱼无论怎么处理都行，生命毕竟不存在了。

但按你的说法，精神永在

红影 发表于 2025-9-10 22:56

马黑黑 发表于 2025-9-10 21:47
但按你的说法，精神永在

精神永生好像是你前一个回复里说的吧{:4_173:}

马黑黑 发表于 2025-9-10 23:16

红影 发表于 2025-9-10 22:56
精神永生好像是你前一个回复里说的吧
你很早以前说的是灵魂永在。我不认为有灵魂，所以用精神替代。
页: [1] 2
查看完整版本: 通过hue-rotate滤镜改变progress进度指示颜色