CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产(2)-木庄网络博客

这就是色调旋转滤镜实现按钮的优点二：色值更精准，准过设计师！

三、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度不断旋转。

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

五、结语

兼容性

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

因此，本技术适用于不需要考虑兼容性的项目，如中后台管理页面，内部项目，移动端项目等。滤镜玩的溜可以实现很多惊为天人的动效。

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

以上就是对CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产的全部介绍，如果您想了解更多有关CSS3教程，请关注PHP中文网。

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者