CSS3滤镜(Filters)功效

滤镜(Filters)是CSS3中新增的功能，可以实现模糊效果，透明效果，色彩反差调整，色彩反相等效果。

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

 

使用方式：

 

.myElement {
	filter: blur(2px);
}
/*多外滤镜效果用空格隔开*/
.myElement {
	filter: blur(2px) grayscale (.5) opacity(0.8);
}
.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;

  }

 代码解说：

 

 

animation-name: testAnim; /*需要绑定到选择器的 keyframe 名称*/
animation-duration: 2s; /*成动画所花费的时间*/
animation-iteration-count: 1; /*播放的次数*/
animation-direction: alternate; /*是否应该轮流反向播放动画*/
animation-timing-function: ease-out; /*动画的速度曲线*/
animation-fill-mode: forwards; /*为 元素规定填充模式：*/
animation-delay: 0s; /*动画开始之前的延迟时间*/