浅谈CSS3 Filter的10种特效(上)

浅谈CSS3 Filter的10种特效(上)
Filter主要是运用在图片上，以实现一些特效（尽管他们也能运用于video上）。但是，我们主要讨论的是Filter图片上的运用,今天我们先学习前五种效果.
1.1. 语法
css选择器 {
filter: none | filter-function ;
}
1.2. filter取值
它的默认值是none，且不具备继承性。其中filter-function具有以下可选值：
1.2.1. grayscale灰度
使用这个特效，会把图片变成灰色，也就是说你的图片将只有两种颜色——“黑色”和“白色”。
.grayscale{
-webkit-filter:grayscale(1);
}
默认值：100％。
如果你在sepia()中没有任参数值，默认将会以“100％”渲染，具体效果如下图
1.2.2. sepia褐色
sepia译为“褐色”，使用这种特效，会将你的图片复古成黑白老照片
.sepia{
-webkit-filter:sepia(1);
}
默认值：100％
1.2.3. saturate饱和度
saturate的作用是用来改变图片的饱和度。
.saturate{
-webkit-filter:saturate(0.5);
}
1.2.4. hue-rotate色相旋转
hue-rotate的作用用来改变图片的色相
.hue-rotate{
-webkit-filter:hue-rotate(90deg);
}
默认值：0deg
1.2.5. invert反色
invert做出来的效果就像是我们照相机底面的效果一样
.invert{
-webkit-filter:invert(1);
}
默认值：100％
1.2.6. 代码效果图
第一步:html结构代码

第二步:css全局样式

第三步:设置不同的filter特效

第四步:查看效果
更多技术资讯可关注：gzitcast