CSS3 Filter 特效应用

发布时间：2019-07-07 16:27:11编辑：auto阅读（1232）

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


常被称为滤镜

浏览器支持：

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

下面来看看各种效果:

有以下几种效果可以使用




grayscale

brightness

hue-rotate

invert

opacity

contrast

saturate

sepia

drop-shadow

blur




我在这里使用到的图片是



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

grayscale

/*
grayscale 灰度图
说明:图片变成灰色,只有黑白两个色调
默认值：100％，
大于100%无效果
值越小色彩越鲜艳
*/
.grayscale{
-webkit-filter:grayscale(100%);
}

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







效果：

    




/*
sepia  复古风格
说明：图片颜色变成褐色的复古风格
默认值：100％，
大于100%无效果
值越小色彩越鲜艳
*/
.sepia{
-webkit-filter:sepia(100%);
}

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

效果：






/*
hue-rotate 色彩变向
说明:改变图片的色相
默认值：0deg(单位是°，旋转的角度)
*/
.hue-rotate{
-webkit-filter:hue-rotate(50deg);
}

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




效果：



/*
		invert 底片效果
		说明：照相机底片一样的效果
		默认值：100%
		值越小色彩越鲜艳
	*/
	.invert{
		-webkit-filter:invert(100%);
	}

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

效果：



/*
		opacity 透明度
		说明：调整图片的透明程度；
		默认值：100%；
		值越小越透明
	*/
	.opacity{
		-webkit-filter:opacity(30%);
	}

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

效果：






/*
		brightness 亮度
		说明：调整图片亮度
		默认值：100%
		值越小越暗
	*/
	.brightness{
		-webkit-filter:brightness(0.5);/*50%也可以写作0.5*/
	}

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




效果：



/*
		drop-shadow 阴影
		说明：和box-shadow有着相似的效果。给图片添加阴影
		drop-shadow(X轴 Y轴 阴影直径 阴影颜色);
	*/
	.drop-shadow{
		-webkit-filter:drop-shadow(0px 5px 20px#C9F);
	}

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

效果：



/*
		saturate 饱和度
		说明:saturat改变图片的饱和度
		默认值：100%；
		值越小饱和度越小
	*/
	.saturate{
		-webkit-filter:saturate(50%);
	}

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

效果：



/*
		blur 模糊
		说明:改变图片的清晰度
		默认值：0px；
	*/
	.blur{
		-webkit-filter:blur(30px);
	}

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

效果：



/*当然你可以使用多个属性去操作这个图片效果，如:*/
/*一个包含图片模糊透明度以及有阴影的一个class*/
.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">

效果：

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






























































































效果：

关键字：