css3之filter特效
1、grayscale
用法:
-moz-filter: grayscale(100%) ;
-webkit-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
效果:灰度即只有黑色和白色
2、sepia(1)
用法:
-moz-filter: sepia(1);
-webkit-filter: sepia(1);
-ms-filter:sepia(1);
-o-filter: sepia(1);
filter:sepia(1);
效果:像老照片一样
3、saturate(0.5)
用法:
-moz-filter: saturate(0.5) ;
-webkit-filter: saturate(0.5);
-ms-filter: saturate(0.5);
-o-filter: saturate(0.5);
filter:saturate(0.5);
效果:用来改变图片的饱和度(指的其实是色彩的纯度,纯度越高,表现越鲜明,纯度较低,表现则较黯淡)
4、hue-rotate
用法:
-moz-filter: hue-rotate(90deg) ;
-webkit-filter:hue-rotate(90deg);
-ms-filter: hue-rotate(90deg);
-o-filter:hue-rotate(90deg);
filter: hue-rotate(90deg);
效果:hue-rotate用来改变图片的色相
5、invert
用法:
-moz-filter: invert(1);
-webkit-filter:invert(1);
-ms-filter:invert(1);
-o-filter:invert(1);
filter:invert(1);
效果:invert像照相机底面一样
6、opacity
用法:
-moz-filter:opacity(.2);
-webkit-filter:opacity(.2);
-ms-filter: opacity(.2);
-o-filter:opacity(.2);
filter: opacity(.2);
效果:opacity改变图片的透明度
7、brightness
用法:
-moz-filter:brightness(.5);
-webkit-filter:brightness(.5);
-ms-filter:brightness(.5);
-o-filter: brightness(.5);
filter: brightness(.5);
效果:改变图片的亮度
8、contrast
用法:
-moz-filter: contrast(2);
-webkit-filter:contrast(2);
-ms-filter: contrast(2);
-o-filter: contrast(2);
filter:contrast(2);
filter: gray;
效果:contrast改变图片的对比度
9、blur
用法:
-moz-filter: blur(3px);
-webkit-filter: blur(3px);
-ms-filter:blur(3px);
-o-filter:blur(3px);
filter:blur(3px);
效果:blur模糊图片
10、drop-shadow
用法:
-moz-filter: drop-shadow(5px 5px 5px #ccc) ;
-webkit-filter:drop-shadow(5px 5px 5px #ccc);
-ms-filter: drop-shadow(5px 5px 5px #ccc);
-o-filter: drop-shadow(5px 5px 5px #ccc);
filter:drop-shadow(5px 5px 5px #ccc);
效果:drop-shadow给图片加阴影效果