黑马程序员技术交流社区

标题: 【广州PHP】浅谈CSS3 Filter的10种特效(上) [打印本页]

---

作者: gz_xudada    时间: 2018-2-2 15:35
标题: 【广州PHP】浅谈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特效

第四步:查看效果

---

作者: baiou1995    时间: 2018-2-2 17:36
这个字体炒鸡好看

---

作者: gz_xudada    时间: 2018-2-2 20:56

baiou1995 发表于 2018-2-2 17:36
这个字体炒鸡好看

哪个字体?

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2