//zxx: 许多效果为CSS3滤镜及时衬着，因而本文须要在Chrome等当代阅读器下阅读
一、传统色值按钮
传统按钮都是经由过程细致色值举行赋色的，比方下面这些按钮和其对应的色值（出自LuLu UI）：
色值：#2486ff 色值：#01cf97 色值：#f4615c
有以下瑕玷：
每种按钮另有差别的：hover和：active颜色须要分外设置，按钮CSS代码量较多，涌现颜色也许多；
假如涌现新的状况按钮，比方本年盛行紫色，须要一个紫色按钮。开辟同砚须要求助于设想师，由于本身选的紫色的亮度和饱和度每每和现有的按钮不搭。
实际上，有更简朴的要领按钮赋色要领，能够躲避上面的瑕玷，就是运用CSS3 filter滤镜中的hue-rotate（）颜色扭转滤镜。
二、颜色扭转滤镜下的按钮
实际上，我们只须要写好一个按钮款式，其他种种颜色按钮都无需再节外生枝写一大堆CSS代码。比方，现有蓝色主按钮以下：
主按钮
下面就是我分分钟完成的35个其他颜色的按钮：
Hover并点击按钮，人人能够看到，包含：hover和：active伪类状况也一同复制过来了。
完成很简朴，就是给已完成的按钮增添下面一行CSS即可：
.btn { filter: hue-rotate（60deg）； }
对照表示
对照显真章，已知写好了一个蓝色主按钮CSS，如今要写一个赤色按钮款式。
起首，色值法和颜色法所运用HTML都是一样的，以下：
<button class="ui-button ui-button-warning">红按钮</button>
但CSS方面的差别则就惊人了，见下表：
能够看到上面CSS代码量的对照，左侧是你双十一之前的钱包，右侧是你双十一以后的钱包，是否是差别惊人的大！
能够看出颜色扭转滤镜完成按钮的长处一：巨省代码，开辟巨快！
前端也会设想
经由过程扭转颜色，我发现了LuLu UI底本按钮中设想的诸多不科学的处所。
hover态差别的按钮设想的不一致，主色按钮hover是颜色加深，效果赤色按钮是hover颜色减淡，失利失利。
从这个角度讲，我们前端要比纯靠视觉感觉，靠取色东西在色板上点几个差不多颜色的设想师要更会设想。所以，当我们须要一个新的紫色按钮的时刻，我们本身来就好了，把颜色扭转到紫色一栏，bingo，按钮完成！假如找设想师帮助找颜色（包含交互状况共3色），得，根据我这么多年协作的履历，饱和度和亮度100%不一致，虽然视觉上彷佛一致。由于纯靠视觉感觉取色肯定会存在误差的。
这就是颜色扭转滤镜完成按钮的长处二：色值更精准，准过设想师！
三、hue-rotate滤镜语法
hue-rotate滤镜除了支撑deg，还支撑别的CSS3单元，如圈数turn以及弧度rad等。
比方：
hue-rotate（90deg） /* 90度扭转 */
hue-rotate（。5turn） /* 180度扭转 */
hue-rotate（3.142rad） /* 3.142弧度扭转，近似一圈，也就是360度 */
四、hue-rotate滤镜与动效
hue-rotate滤镜还能够用来完成很酷的动效，比方下面这个图象变色的效果（GIF截屏）：
完成代码实在很简朴：
.bird {
animation: pulse 5s linear infinite;
}
@keyframes pulse {
from { filter: hue-rotate（0）； }
to { filter: hue-rotate（360deg）； }
}
就是一个颜色360度不停扭转。
这类动效要领迥殊合适颜色雄厚的图形或图象。
五、结语
兼容性
IE不支撑，Edge13+支撑，其他阅读器支撑。
因而，本手艺适用于不须要斟酌兼容性的项目，如中背景治理页面，内部项目，挪动端项目等。滤镜玩的溜能够完成许多惊为天人的动效。
之前看过一个记着反相滤镜完成火焰效果的动效，看了一会儿没看邃晓，对颜色和滤镜这块控制还不够，不急，逐步积聚，总会邃晓的。
以上就是对CSS filter:hue-rotate颜色扭转滤镜完成按钮批量生产的悉数引见，假如您想相识更多有关CSS3教程，请关注ki4网。
以上就是CSS filter:hue-rotate颜色扭转滤镜完成按钮批量生产的细致内容，更多请关注ki4网别的相干文章！
