CSS hue-rotate() 函数

CSS hue-rotate() 语法

在 CSS 中，hue-rotate() 函数一般作为 filter 属性的值，来改变元素的色相（hue）。

hue-rotate() 的原理是：在 HSL（色相、饱和度、亮度）颜色空间中，通过旋转色相的角度值，使得元素的颜色 “变调” 。感兴趣的小伙伴，可以自行搜索了解一下。

语法：

filter: hue-rotate(angle);

说明：

angle 是色相旋转的角度值，可以是正值（顺时针旋转）或负值（逆时针旋转）。常用单位包括：

deg：度，比如 90deg。
rad：弧度，比如 1.57rad。
turn：圈，比如 0.25turn。

如果角度为 0，此时颜色会保持不变。角度值可以超过 360 度，但浏览器会取模 360° 处理。例如，hue-rotate(450deg) 等价于 hue-rotate(90deg)）。

对于 hue-rotate() 函数，小伙伴们还需要清楚以下几点。

hue-rotate() 只会改变色相，而不会改变元素的饱和度（S）或亮度（L）。
hue-rotate() 经常用于图片、图标、背景等的色彩变换，尤其适合做出动态变色的视觉效果。
hue-rotate() 可以与其他滤镜函数（如 invert()、sepia()）搭配一起使用。
hue-rotate() 经常用于结合 CSS 动画与 CSS 过渡，来实现平滑的过渡效果。

CSS hue-rotate() 摘要

属于	CSS 滤镜
使用频率	低
兼容性	查看
官方文档	查看
MDN	查看

CSS hue-rotate() 示例

接下来，我们通过几个简单的例子来讲解一下 CSS hue-rotate() 函数是如何使用的。

示例 1：hue-rotate() 用于改变色相

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        img {
            filter: hue-rotate(90deg);
        }
    </style>
</head>
<body>
    <img src="imgs/bird.jpg" alt="">
</body>
</html>

页面效果如下图所示。

hue-rotate() 实现色相旋转

分析：

hue-rotate(90deg) 表示将图片的色相顺时针旋转 90°。其中，红色可能会变为绿色，而蓝色可能会变为紫色。

示例 2：hue-rotate() 结合 CSS 过渡

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: lightskyblue;
            transition: filter 0.5s;
        }
        div:hover {
            filter: hue-rotate(180deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

默认情况下，页面效果如下图 1 所示。当鼠标移到 div 元素上时，页面效果如下图 2 所示。

hue-rotate() 实现悬停时的色相变化 1

hue-rotate() 实现悬停时的色相变化 2

分析：

在这个例子中，div 元素的背景色初始为 lightskyblue。当鼠标移到元素上时，hue-rotate(180deg) 会将色相旋转 180 度，从而生成接近互补色的效果。

示例 3：hue-rotate() 结合其他滤镜函数

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        img {
            filter: hue-rotate(45deg) brightness(1.2) contrast(1.1);
        }
    </style>
</head>
<body>
    <img src="imgs/bird.jpg" alt="">
</body>
</html>

页面效果如下图所示。

hue-rotate() 结合其他滤镜函数

分析：

filter: hue-rotate(45deg) brightness(1.2) contrast(1.1);

上面这句代码表示应用了 3 种滤镜效果。

hue-rotate(45deg) 表示将色相旋转 45°。
brightness(1.2) 表示将亮度改为 1.2 倍。
contrast(1.1) 将对比度改为 1.1 倍。