欢迎来到模板无忧!织梦模板,dede模板下载,织梦cms模板,免费网站模板下载站

模板无忧

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+支持,其他浏览器支持。

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

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


本文转载自中文网


希望以上内容可以解决您的问题!
如有其他问题欢迎大家一起交流学习!
作者:酱油妹 来源:www.nsxcb.cn 关注: 时间:2022-05-10 14:00
版权声明:凡注明来源为http://www.nsxcb.cn的均为本站原创,转载请注明来源。
本文网址:http://www.nsxcb.cn/CSS/CSS3/20220510/14143.html
凡本站提供教程均已验证教程的准确性。
相关教程
在线客服

织梦模板 整站模板 新手教程 使用技巧