CSSfilter:hue-rotate色调旋转滤镜实现按钮批量生产

//zxx: 很多效果为CSS3滤镜实时渲染，因此本文需要在Chrome等现代浏览器下浏览

一、传统色值按钮

传统按钮都是通过具体色值进行赋色的，例如下面这些按钮和其对应的色值（出自LuLu UI）：

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

有如下缺点：

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

如果出现新的状态按钮，例如今年流行紫色，需要一个紫色按钮。开发同学需要求助于设计师，因为自己选的紫色的亮度和饱和度往往和现有的按钮不搭。

实际上，有更简单的方法按钮赋色方法，可以规避上面的缺点，就是使用CSS3 filter滤镜中的hue-rotate（）色调旋转滤镜。

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

实际上，我们只需要写好一个按钮样式，其他各种颜色按钮都无需再多此一举写一大堆CSS代码。例如，现有蓝色主按钮如下：

主按钮

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

.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教程，请关注PHP中文网。

以上就是CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产的详细内容，更多请关注 第一PHP社区 其它相关文章！