侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

前端  /  管理员 发布于 3年前   240

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

一、传统色值按钮

传统按钮都是通过具体色值进行赋色的,例如下面这些按钮和其对应的色值(出自 LuLu UI ):

有如下缺点:

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

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

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

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

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

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

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

对比示意

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

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

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

但CSS方面的差异则就惊人了,见下表:

可以看到上面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 infinite;}@keyframes pulse {    from { filter: hue-rotate(0); }    to { filter: hue-rotate(360deg); }}

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

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

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

五、结语

兼容性

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

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

其他

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

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

总结

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


  • 上一条:
    大家需要掌握的 html下SPAN和DIV的区别
    下一条:
    研究了一下div+css的高度自适应问题
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 在Nuxt3中如何减少import model声明及初始化加载models快速开发秘诀(0个评论)
    • 在js的websocket客户端开发中遇到代码割裂情况解决方案(0个评论)
    • 在uni-app中使用Ucharts柱状图地步横向滚动条无法滑动解决方式(0个评论)
    • 在vue中实现移动端双指放大或缩小功能代码示例(0个评论)
    • jq中实现图片压缩、base64转成file后上传至服务器示例(0个评论)
    • 近期文章
    • 在Nuxt3中如何减少import model声明及初始化加载models快速开发秘诀(0个评论)
    • 适用于 Laravel 的表单请求测试程序包(0个评论)
    • Laravel 10.25版本发布(0个评论)
    • 在go语言中实现生成文件的校验和功能代码示例(0个评论)
    • Laravel 11版本抢先看,看将有什么新功能发布(0个评论)
    • goose数据库迁移工具介绍及使用流程步骤(0个评论)
    • 中国程序员“翻墙”为海外软件公司打工,105.8万工资被罚没!转知乎(0个评论)
    • 在go语言gin框架中使用Sharding(Gorm分表中间件)实现分表流程步骤(0个评论)
    • 在PHP提高性能方式之开启OPCache扩展及OPCache配置参数详解(0个评论)
    • 在js的websocket客户端开发中遇到代码割裂情况解决方案(0个评论)
    • 近期评论
    • 路人 在

      php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..
    • 博主 在

      科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 @ mashrdn 多切换几个节点测试,免费ssr是没那么稳..
    • mashrdn 在

      科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 V2rayn免费节点添加上去了,youtobe无法打开网页,是怎么回事..
    • 张伟 在

      科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 3q!有用,不过免费节点隔天就要去git上复制新的导进去..
    • 博主 在

      科学上网翻墙访问Google , 上外网神器佛跳墙VPN(永久免费)使用流程步骤中评论 该篇教程已不能用了,告知大家,免的老有老铁问我!..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客