&nbs p;
.hue-btn-box button{margin-top:5px;margin-right:5px;}//zxx: 很多效果为 CSS 3滤镜实时渲染，因此本文需要在Ch rom e等现代浏览器下浏览
一、传统色值按钮
传统按钮都是通过具体色值进行赋色的，例如下面这些按钮和其对应的色值（出自LuLu UI）：
色值： # 2486ff 色值：#01 CF 97 色值：#f4615c
有如下缺点：
每种按钮还有不同的 :hover 和 :active 颜色需要额外设置，按钮CSS代码量较多，出现颜色也很多； 如果出现新的状态按钮，例如今年流行紫色，需要一个紫色按钮。开发 同学 需要求助于设计师，因为自己选的紫色的亮度和饱和度往往和现有的按钮不搭。实际上，有更 简单 的方法按钮赋色方法，可以规避上面的缺点，就是使用CSS3 filter滤镜中的 hue-rotate() 色调旋转滤镜。
二、色调旋转滤镜下的按钮
实际上，我们只需要写好一个按钮样式，其他各种颜色按钮都无需再多此一举写一大堆CSS代码。例如，现有蓝色主按钮如下：
主按钮
下面就是我分分钟实现的35个其他颜色的按钮：
VAR ht ML Hue BT n = ''; for (var hueRotate = 10; hueRotate 360 ; hueRotate+=10) {htmlHueBtn+=' 其它色按钮 ';}hueBtnBox.inner HTML =htmlHueBtn;
Hover并点击按钮，大家可以看到，包括 :hover 和 :active 伪类 状态也一起复制过来了。
实现很简单，就是给已经实现的按钮增加下面一行CSS即可：
.btn { filter: hue-rotate(60 deg ); } 对比示意
对比显真章，已知写好了一个蓝色主按钮CSS，现在要写一个 红色 按钮样式。
首先，色值法和色调法所使用HTML都是一样的，如下：
<button class="ui-button ui-button-warning">红按钮</button>
但CSS方面的差异则就惊人了，见下表：
.ui-button-warning, .ui-button-warning.disabled, .ui-button-warning.disabled:hover, .ui-button-warning.loading, .ui-button-warning.loading:hover { border: 1px solid #f4615c; background-color: #f4615c; color: #fff; } .ui-button-warning:hover, input.ui-button-warning:focus, button.ui-button-warning:focus { background-color: #ff 777 2; border-color: #ff7772; color: #fff; } .ui-button-warning:not(.disabled):active, .ui-button-warning:not(.loading):active { background-color: #dc5652; border-color: #dc5652; } | .ui-button-warning { filter: hue-rotate(140deg); } |
| 红按钮 | 红按钮 |
可以看到上面CSS代码量的对比，左边是你双十一之前的钱包， 右边 是你双十一之后的钱包，是不是差异惊人的大！
可以看出色调旋转滤镜实现按钮的优点一： 巨省代码，开发巨快！
前端也会设计通过旋转色调，我发现了LuLu UI原本按钮中设计的诸多不科学的地方。
绿色按钮太亮了，颜色根本不在一个饱和度范围内，是个失败的取舍，这也是为什么在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 infin IT e; } @keyfr am es pulse { From { filter: hue-rotate(0); } to { filter: hue-rotate(360deg); } } 就是一个色调360度 不断 旋转。
眼见为实，您可以狠狠地点击这里：CSS hue-rotate滤镜 改变 图片颜色动效demo
这种动效方法特别适合色彩丰富的图形或图像。
五、结语
兼容性
IE不支持， Edge 13+支持，其他浏览器支持。
因此，本技 术 适用于不需要考虑兼容性的项目，如中后台管理页面，内部项目，移动端项目等。
其他
滤镜玩的溜可以实现很多惊为天人的动效。
以前看过一个记住反相滤镜实现火焰效果的动效，看了一会儿没看明白，对色彩和滤镜这块掌握还不够，不急，慢慢 积累 ，总会明白的。
OK，以上就是本文的全部内容，感谢阅读！
行文仓促，如有错误欢迎指正。
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产 全部内容，希望文章能够帮你解决 html5教程-CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产的详细内容...