DDR爱好者之家

CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产
站长资源 2024/11/23 佚名
72 1538
DDR爱好者之家 Design By 杰米

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

一、传统色值按钮

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

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

有如下缺点：

每种按钮还有不同的 :hover 和 :active 颜色需要额外设置，按钮CSS代码量较多，出现颜色也很多；
如果出现新的状态按钮，例如今年流行紫色，需要一个紫色按钮。开发同学需要求助于设计师，因为自己选的紫色的亮度和饱和度往往和现有的按钮不搭。
实际上，有更简单的方法按钮赋色方法，可以规避上面的缺点，就是使用CSS3 filter滤镜中的 hue-rotate() 色调旋转滤镜。

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

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

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

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

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

Hover并点击按钮，大家可以看到，包括 :hover 和 :active 伪类状态也一起复制过来了。

实现很简单，就是给已经实现的按钮增加下面一行CSS即可：

.btn { filter: hue-rotate(60deg); }

对比示意

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

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

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

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

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

可以看到上面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截屏）：

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

实现代码其实很简单：

.bird {
    animation: pulse 5s linear infinite;
}
@keyframes pulse {
    from { filter: hue-rotate(0); }
    to { filter: hue-rotate(360deg); }
}

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

眼见为实，您可以狠狠地点击这里： CSS hue-rotate滤镜改变图片颜色动效demo

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

五、结语

兼容性

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

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

因此，本技术适用于不需要考虑兼容性的项目，如中后台管理页面，内部项目，移动端项目等。

其他

滤镜玩的溜可以实现很多惊为天人的动效。

以前看过一个记住反相滤镜实现火焰效果的动效，看了一会儿没看明白，对色彩和滤镜这块掌握还不够，不急，慢慢积累，总会明白的。

总结

以上所述是小编给大家介绍的CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米