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);
}

可以同时使用多个滤镜,之间用空格分开,所以,我们可以往里面增加grayscaleopacity滤镜效果:

.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浏览器目前都看不到效果 🙁

图片滤镜特效试验

Fx Photo

鼠标悬停控制动画

Fx Photo

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

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

视频滤镜效果

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

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

阅读余下内容
 

《“CSS滤镜(Filters)”》 有 3 条评论

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注


京ICP备12002735号