当前位置:网站首页>神奇的色调旋转滤镜hue-rotate

神奇的色调旋转滤镜hue-rotate

2021-11-25 17:11:17 河豚学前端

如果想实现颜色变化的动效,可以考虑使用色调旋转滤镜: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);
    }
}

版权声明
本文为[河豚学前端]所创,转载请带上原文链接,感谢
https://segmentfault.com/a/1190000041017699

随机推荐