浅谈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特效 第四步:查看效果
|