一 关于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);
}
效果如下：
通过动图可以看到，两个button组件的效果基本类似，但是代码量是有一定的差距的，目前我们只写了hover的特效，当我们加上其余的状态以后，代码量的差距会更大。
开胃菜我们吃的差不多了，我们搞点事情：
我们经常看到进度条，但是更多时候的动画效果都是通过js实现的，我们这次可以做一个根据进度而时刻变化颜色的进度条，走起走起：
首先我们要有一个进度条：
其次我们要让它动起来，根据我们的进度保持颜色的递进变化，代码如下：
<div class="main">
<div class="demo"></div>
</div>
.main{
margin: 100px auto;
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,