马黑黑 发表于 2023-4-7 13:41

CSS滤镜 hue-rotate 应用举例

<style>
#papa {
        margin: auto;
        width: 760px;
        min-height: 300px;
}
#papa > p { margin: 10px 0; }
#mnbox {
        --state: paused;
        cursor: pointer;
        animation: hue 6s infinite alternate linear var(--state);
}
.mybox {
        margin: 30px auto;
        position: relative;
        width: 700px;
        height: 200px;
        background: linear-gradient(90deg, black 70px, white 0, white 140px, gray 0, gray 210px, red 0, red 280px, orange 0, orange 350px, yellow 0, yellow 420px, green 0, green 490px, cyan 0, cyan 560px, blue 0, blue 630px, purple 0);
        border: 2px solid orange;
        box-shadow: 4px 6px 12px black;
}
.small { height: 40px; }
@keyframes hue {
        from { filter: hue-rotate(0deg); }
        to { filter: hue-rotate(360deg); }
}
</style>

<div id="papa">
        <p>从色相（hue）观念看，七原色都是纯色，但黑、白、灰不是纯色。纯色不止七原色，在相色盘上，除了黑白灰是非纯色，其余的都是纯色。凡纯色，都可以进行色相的色调转换，CSS 滤镜 filter 的 hue-rotate(deg) 就是干这个事，语法为：</p>
        <blockquote>filter: hue-rotate(xdeg);</blockquote>
        <p>下面有两个盒子：大盒子有10个颜色块，黑白灰加七原色红橙黄绿青蓝紫。这个大盒子加入了 hue-rotate 滤镜动画，单击它运行动画，再单击暂停动画，可以通过动画观察滤镜对纯色和非纯色的作用情况；小盒子色块是大盒子的复制，提供初始色块参照，它自始至终不做任何色调改变。</p>
        <div id="mnbox" class="mybox" title="点击运行/暂停"></div>
        <div class="mybox small"></div>
        <p>代码放在楼下——</p>
</div>

<script>
let chg = true;
mnbox.onclick = () => {
        mnbox.style.setProperty('--state', chg ? 'running' : 'paused');
        chg = !chg;
}
</script>

马黑黑 发表于 2023-4-7 13:42

<style>
#mnbox {
        --state: paused;
        cursor: pointer;
        animation: hue 6s infinite alternate linear var(--state);
}
.mybox {
        margin: 30px auto;
        position: relative;
        width: 700px;
        height: 200px;
        background: linear-gradient(90deg, black 70px, white 0, white 140px, gray 0, gray 210px, red 0, red 280px, orange 0, orange 350px, yellow 0, yellow 420px, green 0, green 490px, cyan 0, cyan 560px, blue 0, blue 630px, purple 0);
        border: 2px solid orange;
        box-shadow: 4px 6px 12px black;
}
.small { height: 40px; }
@keyframes hue {
        from { filter: hue-rotate(0deg); }
        to { filter: hue-rotate(360deg); }
}
</style>

<div id="mnbox" class="mybox" title="点击运行/暂停"></div>
<div class="mybox small"></div>

<script>
let chg = true;
mnbox.onclick = () => {
        mnbox.style.setProperty('--state', chg ? 'running' : 'paused');
        chg = !chg;
}
</script>

红影 发表于 2023-4-7 15:59

以为色相旋转会把各种颜色转一遍，看这个例子好像不是的。不但黑白灰不变色，而且其余的七个颜色因为底色不同，变化也不一样，并不是在各种颜色里转呢。

红影 发表于 2023-4-7 16:05

能变成什么颜色，和底色有很大的关系呢。我之前的理解又是错的{:4_173:}

红影 发表于 2023-4-7 16:06

这样对比着看着真好，否则肯定是一团模糊了{:4_173:}

小辣椒 发表于 2023-4-7 17:21

颜色可以切换，那就是以后背景可以切换了吧

马黑黑 发表于 2023-4-7 18:26

小辣椒 发表于 2023-4-7 17:21
颜色可以切换，那就是以后背景可以切换了吧

对的

小辣椒 发表于 2023-4-7 19:39

马黑黑 发表于 2023-4-7 18:26
对的

黑黑威武

马黑黑 发表于 2023-4-7 20:00

小辣椒 发表于 2023-4-7 19:39
黑黑威武

{:4_191:}

亚伦影音工作室 发表于 2023-4-13 19:17

滤镜对前三个颜色没有作用！

马黑黑 发表于 2023-4-13 20:15

亚伦影音工作室 发表于 2023-4-13 19:17
滤镜对前三个颜色没有作用！

对纯色有作用，对非纯色没有作用

亚伦影音工作室 发表于 2023-4-13 20:57

马黑黑 发表于 2023-4-13 20:15
对纯色有作用，对非纯色没有作用

黑老师能做一条伸缩频谱闪动条不能？前边是暂停开启按钮，动条后是进度时间显示。

马黑黑 发表于 2023-4-13 21:28

亚伦影音工作室 发表于 2023-4-13 20:57
黑老师能做一条伸缩频谱闪动条不能？前边是暂停开启按钮，动条后是进度时间显示。

目前没有这个兴趣
页: [1]
查看完整版本: CSS滤镜 hue-rotate 应用举例