CSS滤镜 hue-rotate 应用举例

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

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

x

从色相（hue）观念看，七原色都是纯色，但黑、白、灰不是纯色。纯色不止七原色，在相色盘上，除了黑白灰是非纯色，其余的都是纯色。凡纯色，都可以进行色相的色调转换，CSS 滤镜 filter 的 hue-rotate(deg) 就是干这个事，语法为：

filter: hue-rotate(xdeg);

下面有两个盒子：大盒子有10个颜色块，黑白灰加七原色红橙黄绿青蓝紫。这个大盒子加入了 hue-rotate 滤镜动画，单击它运行动画，再单击暂停动画，可以通过动画观察滤镜对纯色和非纯色的作用情况；小盒子色块是大盒子的复制，提供初始色块参照，它自始至终不做任何色调改变。

代码放在楼下——

马黑黑 · 发表于 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>