欢迎点击「算法与编程之美」↑关注我们！
本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。
问题描述
当在拍照、p图时，有一个东西必不可少那就是滤镜，适当地运用滤镜可以使图片更加的赏心悦目，而作为网页的美化技术来说，CSS同样也具有滤镜的属性。CSS 3 Filter属性就提供了相当于滤镜的模糊和改变元素颜色的功能，使图像产生更加绚丽多彩的效果。接下来就来学习一下CSS3的Filter属性。
具体内容
1滤镜属性简介
CSS滤镜的语法：
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
CSS滤镜参数的含义如下表：
参数名称
效果
blur()
设置图片的高斯模糊效果
brightness()
设置图片的明暗度效果
contrast()
设置图片的对比度
grayscale()
将图片转化为灰度图像
drop-shadow()
设置图片的一个阴影效果
hue-rotate()
给图片应对色相旋转
invert()
反转输入图像
opacity()
转化图像的透明程度
saturate()
转化图像的饱和度
sepia()
将图像转化为深褐色
2 基本滤镜效果
接下来给大家介绍几个实用的滤镜效果语法。
2.1 高斯模糊（blur）滤镜
blur滤镜用于设置图片的高斯模糊效果。blur滤镜的语法格式如下：
filter : blur (px)
其中px的值越大，图像就越模糊。
示例：
高斯模糊
原图：
高斯模糊：
效果：
图1.1 高斯模糊效果图
2.2 明暗度（brightness）滤镜
brightness滤镜用于设置图片的明暗度效果。brightness滤镜的语法如下：
filter : brightness (%)
当参数设置为0%时，图像会变成全黑；当参数为100%时图像无变化；当参数超过100%时图像会比原来还要亮。
示例：
高斯模糊
原图：
图像变亮：
图像变暗：
效果：
图2.2 明暗度滤镜效果图
2.3 对比度滤镜
contrast滤镜用于设置图像的对比度效果。其语法格式如下：
filter : contrast (%)
当参数设置为0%时，图像会变成全黑；当参数为100%时图像无变化。
示例：
高斯模糊
原图：
图像变亮：
图像变暗：
效果：
图2.3 对比度滤镜效果
2.4 阴影（drop-shadow）滤镜
drop-shadow滤镜用于设置图像的阴影效果，使元素内容在页面上产生投影，从而实现立体的效果，其语法格式如下：
arrayObject.length;
示例：
高斯模糊
原图：
灰色阴影：
蓝色阴影：
效果：
图2.4 阴影滤镜效果
3 复合滤镜效果的使用
上面主要是介绍了一些基础的单个滤镜的效果，而综合的使用滤镜效果可以产生一些奇特的动画效果。接下来就来制作一个电闪雷鸣的动画效果吧，在此次的例子里面主要使用了明暗度滤镜、对比度滤镜和深褐色滤镜。
示例：
动态效果
效果：
图3.1 动态效果过程1
图3.2 动态效果过程2
图3.3 动态效果过程3
在上述代码中通过运用@keyframes来规定动画的规则。通过在不同时间点运用不同的滤镜来造成图片动态的效果。
结语
CSS3的滤镜的强大属性可以使图片更加美观，同时运用动画设置图片的复合滤镜也可以使图片动起来。虽然属性的效果可能比不上PS，但是运用的好的话也可以在节约很多空间下和P图的时间，在网页的制作上，可以把一张图片变成多张图片。
END
编 辑 | 王楠岚
责 编 | 杨金月
where2go 团队
微信号：算法与编程之美
长按识别二维码关注我们!
温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！
