1、传统色值按钮

　　传统按钮都是通过具体色值进行赋色的，比如下面这类按钮和其对应的色值（源于LuLuUI）：

　　色值：#2486ff色值：#01cf97色值：#f4615c

　　有如下缺点：

　　每种按钮还有不一样的：hover和：active颜色需要额外设置，按钮CSS代码量较多，出现颜色也不少；

　　假如出现新的状况按钮，比如今年时尚紫色，需要一个紫色按钮。开发同学需需要助于设计师，由于自己选的紫色的亮度和饱和度总是和现有些按钮不搭。

　　事实上，有更容易的办法按钮赋色办法，可以避免上面的缺点，就是用CSS3filter滤镜中的hue-rotate（）色调旋转滤镜。

　　2、色调旋转滤镜下的按钮

　　事实上，大家仅需写好一个按钮样式，其他各种颜色按钮都不需要再画蛇添足写一大堆CSS代码。比如，现有蓝色主按钮如下：

　　主按钮

　　下面就是我分分钟达成的35个其他颜色的按钮：

　　微信截图_20181127165549.png

　　Hover并点击按钮，大伙可以看到，包含：hover和：active伪类状况也一块复制过来了。

　　达成非常简单，就是给已经达成的按钮增加下面一行CSS即可：

　　.btn{filter:hue-rotate（60deg）；}

　　对比示意

　　对比显真章，已知写好了一个蓝色主按钮CSS，目前要写一个红色按钮样式。

　　第一，色值法和色调法所用HTML都是一样的，如下：

　　<buttonclass="ui-buttonui-button-warning">红按钮</button>

　　但CSS方面的差异则就惊人了，见下表：

　　微信截图_20181127165831.png

　　可以看到上面CSS代码量的对比，左侧是你双十一之前的钱包，右侧是你双十一之后的钱包，是否差异惊人的大！

　　可以看出色调旋转滤镜达成按钮的优点1、巨省代码，开发巨快！

　　前端也会设计

　　通过旋转色调，我发现了LuLuUI原本按钮中设计的很多不科学的地方。

　　hover态不一样的按钮设计的不同，主色按钮hover是颜色加深，结果红色按钮是hover颜色减淡，失败失败。

　　从这个角度讲，大家前端要比纯靠视觉感受，靠取色工具在色板上点几个差不多颜色的设计师要更会设计。所以，当大家需要一个新的紫色按钮的时候，大家自己来就好了，把色调旋转到紫色一栏，bingo，按钮完成！假如找设计师帮忙找颜色（包含交互状况共3色），得，根据我这么多年合作的经验，饱和度和亮度100%不同，虽然视觉上仿佛一致。由于纯靠视觉感受取色必然会存在偏差的。

　　这就是色调旋转滤镜达成按钮的优点2、色值更精准，准过设计师！

　　3、hue-rotate滤镜语法

　　hue-rotate滤镜除去支持deg，还支持其它CSS3单位，如圈数turn与弧度rad等。

　　比如：

　　hue-rotate（90deg）/*90度旋转*/

　　hue-rotate（。5turn）/*180度旋转*/

　　hue-rotate（3.142rad）/*3.142弧度旋转，近似一圈，也就是360度*/

　　4、hue-rotate滤镜与动效

　　hue-rotate滤镜还可以用来达成非常酷的动效，比如下面这个图像变色的成效（GIF截屏）：

　　达成代码其实非常简单：

　　4b4d632fgy1fxbhtnq3kkg208h06hqdl.gif

　　.bird{

　　animation:pulse5slinearinfinite;

　　}

　　@keyframespulse{

　　from{filter:hue-rotate（0）；}

　　to{filter:hue-rotate（360deg）；}

　　}

　　就是一个色调360度不断旋转。

　　这种动效办法特别合适色彩丰富的图形或图像。

　　5、结语

　　兼容性

　　IE不支持，Edge13+支持，其他浏览器支持。

　　因此，本技术适用于无需考虑兼容性的项目，如中后台管理页面，内部项目，手机端项目等。滤镜玩的溜可以达成不少惊为天人的动效。

　　以前看过一个记住反相滤镜达成火焰成效的动效，看了一会儿没看清楚，对色彩和滤镜这块学会还不够，不急，慢慢积累，总会了解的。


本文转载自中文网

希望以上内容可以解决您的问题！
如有其他问题欢迎大家一起交流学习！