CSS色调旋转滤镜

一 关于filter

首先看一下官方对于CSS的filter属性的定义：

CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。

本文主要讲的是filter中的一个属性：hue-rotate。官方定义是：

给图像应用色相旋转。“angle”一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。

本文主要是通过一些demo和思考来讲述其强大和便捷之处。

二 代码差异

首先来写一个带有hover特效的button组件吧～代码如下：

<button class="btn btn-primary">primary</button>
<button class="btn btn-primary-filter">primary-filter</button>

.btn{
  padding: 4px 15px;
  outline: none;
  border: none;
  border-radius: 3px;
  margin: 10px 20px;
  cursor: pointer;
  color: #fff;
  background: #1890ff;
  border-color: #1890ff;
  box-shadow: 0 2px 0 rgba(0,0,0,.045);
}
.btn-primary:hover{
  background-color: #096dd9;
  border-color: #096dd9;
  color: #fff;
}
.btn-primary-filter:hover{
  filter: hue-rotate(15deg);
}

效果如下：

<a href="https://sm.ms/image/CG3pI65XRWOrNA4" target="_blank"><img src="https://i.loli.net/2020/12/01/CG3pI65XRWOrNA4.gif" ></a>

通过动图可以看到，两个button组件的效果基本类似，但是代码量是有一定的差距的，目前我们只写了hover的特效，当我们加上其余的状态以后，代码量的差距会更大。

开胃菜我们吃的差不多了，我们搞点事情：

我们经常看到进度条，但是更多时候的动画效果都是通过js实现的，我们这次可以做一个根据进度而时刻变化颜色的进度条，走起走起：

首先我们要有一个进度条：

其次我们要让它动起来，根据我们的进度保持颜色的递进变化，代码如下：

<div class="main">
  <div class="demo"></div>
</div>

.main{
  margin: 100px auto;
  width: 600px;
  height: 60px;
  position: relative;
}
.demo{
  height: 100%;
  box-sizing: border-box;
  border-radius: 15px 30px 30px 15px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.22)); // 阴影效果
  background: #fff;
}

.demo::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 100%;
  // 背景颜色给个渐变效果
  background: linear-gradient(to bottom, #7abcff 0%, #00BCD4 44%, #2196F3 100%);
  border-radius: 0px 0px 5px 5px;
  box-shadow: 0 14px 28px rgba(33, 150, 243, 0), 0 10px 10px rgba(9, 188, 215, 0.08);
  animation: charging 5s linear infinite;
  filter: hue-rotate(110deg);
}

@keyframes charging {
  50% {
    box-shadow: 0 14px 28px rgba(0, 150, 136, 0.83), 0px 4px 10px rgba(9, 188, 215, 0.4);
  }

  95% {
    right: 5%;
    filter: hue-rotate(0deg);
    border-radius: 0 0 5px 5px;
    box-shadow: 0 14px 28px rgba(4, 188, 213, .2), 0 10px 10px rgba(9, 188, 215, 0.08);
  }
  100% {
    right: 0%;
    filter: hue-rotate(0deg);
    border-radius: 15px 15px 5px 5px;
    box-shadow: 0 14px 28px rgba(4, 188, 213, 0), 0 10px 10px rgba(9, 188, 215, 0.4);
  }
}

效果如下：

<a href="https://sm.ms/image/VUlqsi9kQIu6XJS" target="_blank"><img src="https://i.loli.net/2020/12/01/VUlqsi9kQIu6XJS.gif" ></a>

如上，我们这里有一个小小的暗箱操作，就是我们无法对一个渐变色进行动画animation，但是我们可以通过hue-rotate的方式，利用滤镜进行颜色的变化，从而实现当前的效果。

三 总结

举一反三，该属性玩得顺了的话，其实可以做到很多让人眼前一亮的效果，最直接的就是我们可以将我们的个人博客首页，做根据当前时区和时间而变化的背景色。当然了，安卓手机现在的充电效果也可以做到，但是想要做出来肯定需要一定的css熟练度。我们在使用过程中，通过不断的调节filter里面属性的数据，可以得到差异效果很大的动画，当然了，好的效果需要不断的调试，但是这样会使我们的业务开发变得更加的有乐趣～

最后，欢迎指正和修改本文～