filter:hue-rotate色调旋转滤镜达成按钮批量生产
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+支持,其他浏览器支持。
因此,本技术适用于无需考虑兼容性的项目,如中后台管理页面,内部项目,手机端项目等。滤镜玩的溜可以达成不少惊为天人的动效。
以前看过一个记住反相滤镜达成火焰成效的动效,看了一会儿没看清楚,对色彩和滤镜这块学会还不够,不急,慢慢积累,总会了解的。
本文转载自中文网
希望以上内容可以解决您的问题!
如有其他问题欢迎大家一起交流学习!
►本文网址:http://www.nsxcb.cn/CSS/CSS3/20220510/14143.html
►凡本站提供教程均已验证教程的准确性。