CSS3 Filter 特效应用

Filters主要是运用在图片的一些特效，也可以应用到一些视频上面。

常被称为滤镜

浏览器支持：

    目前来说，我知道的是WEBkit可以较好的支持

下面来看看各种效果:

有以下几种效果可以使用

grayscale

brightness

hue-rotate

invert

opacity

contrast

saturate

sepia

drop-shadow

blur

我在这里使用到的图片是

使用css3 Fiilter 呈现出了以下几种效果。

grayscale

.grayscale{
-webkit-filter:grayscale(100%);
}

<!--灰度图(黑白)-->
<img class="grayscale" src="../IGM/bg.jpg" width="850" height="500">

效果：

.sepia{
-webkit-filter:sepia(100%);
}

 <!--复古风格-->
	<img class="sepia" src="../IGM/bg.jpg" width="850" height="500">

效果：

.hue-rotate{
-webkit-filter:hue-rotate(50deg);
}

 <!--色彩变向-->
<img class="hue-rotate" src="../IGM/bg.jpg" width="850" height="500">

效果：

	.invert{
		-webkit-filter:invert(100%);
	}

 <!--底片效果-->
	<img class="invert" src="../IGM/bg.jpg" width="850" height="500">

效果：

	.opacity{
		-webkit-filter:opacity(30%);
	}

 <!--透明效果-->
	<img class="opacity" src="../IGM/bg.jpg" width="850" height="500">

效果：

	.brightness{
		-webkit-filter:brightness(0.5);
	}

 <!--明暗效果-->
	<img class="brightness" src="../IGM/bg.jpg" width="850" height="500">

效果：

	.drop-shadow{
		-webkit-filter:drop-shadow(0px 5px 20px#C9F);
	}

<!--阴影效果-->
	<img class="drop-shadow" src="../IGM/bg.jpg" width="850" height="500">

效果：

	.saturate{
		-webkit-filter:saturate(50%);
	}

 <!--饱和度-->
	<img class="saturate" src="../IGM/bg.jpg" width="850" height="500">

效果：

	.blur{
		-webkit-filter:blur(30px);
	}

<!--模糊-->
	<img class="blur" src="../IGM/bg.jpg" width="850" height="500">

效果：

.blur-opacity-drop-shadow{
-webkit-filter:blur(30px) opacity(0.3) drop-shadow(0px 0px 10px #F00);
}

<!--多种效果-->
	<img class="blur-opacity-drop-shadow" src="../IGM/bg.jpg" width="850" height="500">

效果：

以上是多种图片特效的演示

效果：