关于css3:神奇的色调旋转滤镜huerotate

8次阅读

共计 460 个字符,预计需要花费 2 分钟才能阅读完成。

如果想实现色彩变动的动效,能够思考应用色调旋转滤镜:filter:hue-rotate()
filter 是个功能强大的办法,能够给元素增加各种各样的滤镜,比方含糊、暗影、变灰等等。
hue-rotate 能够扭转元素的 色调 ,展现出更丑陋的色彩。
案例 1:设置按钮的背景色

<button style="background: #2486ff;filter: hue-rotate(350deg);"> 按钮 </button>

然而,单纯设置背景色的话,色调变动多少不好把握,而且个别 UI 会给出具体的色彩值。
所以,hue-rotate 更适宜做 色彩变动的动效
案例 2:高亮文字色彩闪动变动

<span> 啦啦啦 </span>

span {
    background: red;
    animation: hue 3s;
}
@keyframes hue {
    from {filter: hue-rotate(0deg);
    }
    to {filter: hue-rotate(-360deg);
    }
}
正文完
 0