CSS滤镜(Filters)

滤镜(Filters)是CSS3里新增的一种神奇的功能。说起滤镜(filter)效果，经常使用PhotoShop的人应该非常清楚，每张用Photoshop制作出来的图片几乎都使用了滤镜进行美化。而CSS滤镜，不需要你使用任何做图软件，用纯CSS就会生成多种的滤镜效果，比如模糊效果，透明效果，色彩反差调整，色彩反相等等；不仅能对图片进行滤镜处理，而且对任何网页元素、甚至视频都可以处理。下面让我们来看看CSS滤镜是如何使用的，看看我们如何用简单的代码创造出漂亮的滤镜效果！

有很多的CSS滤镜(filter)效果可以使用：grayscale(灰度级), blur(模糊),sepia(怀旧老照片效果), saturate(色彩饱和度), opacity(透明度),brightness(亮度), contrast(对比度), hue-rotate(色调), 和 invert(反相)。这些CSS属性的属性值基本上都是0到1之间的数值，但有几个例外，blur属性值以像素为单位，可以是任何整数。而hue-rotate滤镜值以”deg”单位，度数。

下面是blur滤镜的用法例子：

.myElement {filter: blur(2px);}

可以同时使用多个滤镜，之间用空格分开，所以，我们可以往里面增加grayscale和opacity滤镜效果：

.myElement {filter: blur(2px) grayscale (.5) opacity(0.8);}

对hue-rotate滤镜的使用也是一样的：

.myElement {filter: blur(2px) grayscale (.5) opacity(0.8) hue-rotate(120deg);}

如果静态滤镜效果还不能让你满意，你可以使用@keyframes来生成动画效果的CSS滤镜：

@keyframes testAnim {0% {filter: grayscale(0.5) blur(1px) saturate(2);}100% {filter: grayscale(0.2) blur(6px) saturate(9);}}/* 图片将呈现动画效果的滤镜处理过程 */#animatePhoto {}#animatePhoto:hover {animation-name: testAnim;animation-duration: 2s;animation-iteration-count: 1;animation-direction: alternate;animation-timing-function: ease-out;animation-fill-mode: forwards;animation-delay: 0s;}

如果大量是使用滤镜，可能会对页面的性能产生影响；所以经常测试你的网站永远都没有坏处。

效果演示

目前只有谷歌浏览器完全实现了CSS滤镜功能，火狐浏览器和IE浏览器目前都看不到效果

图片滤镜特效试验

黑白照片(灰度级)效果(grayscale:1)

模糊效果(blur:4px)

老照片(褐黄色)效果(sepia:1)

饱和度调整(saturate:0)

透明度调整(opacity:0.9)

亮度调整(brightness:1)

对比度调整(contrast:1)

色调调整(hue-rotate:0deg)

色彩反相(invert:0)

鼠标悬停控制动画

基本页面元素滤镜效果 – 2px blur

龙王辞别，出长安，回水府。大小水神接着，问曰：“大王访那卖卦的如何？”龙王道：“有，有，有！但是一个掉嘴口讨春的先生。我问他几时下雨，他就说明日下雨；问他什么时辰，什么雨数，他就说辰时布云，巳时发雷，午时下雨，未时雨足，得水三尺三寸零四十八点，我与他打了个赌赛；若果如他言，送他谢金五十两；如略差些，就打破他门面，赶他起身，不许在长安惑众。”众水族笑曰：“大王是八河都总管，司雨大龙神，有雨无雨，惟大王知之，他怎敢这等胡言？那卖卦的定是输了，定是输了！”主

视频滤镜效果

你甚至可以用CSS对视频进行滤镜处理。

CSS3里的滤镜给我们提供了更高级的对web图片、视频和网页元素进行个性化的方法。相信在不久的将来CSS滤镜(filter)很快就会在大大小小的网站上流行起来。