A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

浅谈CSS3 Filter10种特效()
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特效
第四步:查看效果

2 个回复

倒序浏览
回复 使用道具 举报
baiou1995 发表于 2018-2-2 17:36
这个字体炒鸡好看

哪个字体?
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马