首页>前端教程>CSS教程

css3第十七课:filter滤镜,真美颜

因为Edge13支持这个属性了,所以打算写出来,毕竟已经看到有项目使用这个CSS3的新属性了。

CSS3 filter 属性是用来为一个元素(通常是图片)添加特殊的效果。

一、语法结构

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

注意:可以使用多个滤镜效果,用空格隔开。

这么多效果也不是都经常使用,所以先从最常用的说起吧。

1、blur(px)

模糊效果,值越大,越模糊。默认值为0,可以设置具体长度值,不能用百分比值。

img{filter:blur(5px);}

See the Pen  filter:blur by zhaolanzhen (@mrszhao)  on CodePen.


2、grayscale(%)

转换成灰度图像。0%-100%之间的数值。100%则完全转换成灰度图像。

img{filter:grayscale(50%)}

See the Pen  filter:blur by zhaolanzhen (@mrszhao)  on CodePen.


3、opacity(%)

透明度,和opacity属性很像。不同之处在于通过filter,一些浏览器为了提升性能会提供硬件加速。

img{filter:opacity(50%)}

See the Pen  filter:opacity by zhaolanzhen (@mrszhao)  on CodePen.


4、drop-shadow(h-shadow v-shadow blur spread color)

添加投影效果,和box-shadow很相似,但是不接受insert内阴影的值。

更大的区别在于drop-shadow是投影,当物体有镂空的部分时,这个镂空的部分是没有投影的,而box-shadow是把物体当整体,不管有没有镂空部分,全部都当成实心的来做阴影。

See the Pen  drop-shadow by zhaolanzhen (@mrszhao)  on CodePen.


5、hue-rotate(deg)

设置色相旋转角度,把颜色看成一个360度的色环。默认值是0deg,图像没有变化。

2.jpg

See the Pen  hue-rotate by zhaolanzhen (@mrszhao)  on CodePen.


6、invert(%)

反转图像,0%图像无变化,100%完全反转。可以理解为反相,就是改变成自己的180度的互补色,就像传统照相的底片一样,也就是负片。

See the Pen  invert by zhaolanzhen (@mrszhao)  on CodePen.


7、brightness(%)

改变图像的亮度。0%为全黑,100%为正常状态,图片不变。可以高于100%,则图片更亮。

See the Pen  brightness by zhaolanzhen (@mrszhao)  on CodePen.


8、saturate(%)

调整图像的饱和度。0%完全不饱和,100%图像无变化,大于100%,则饱和度更高。

See the Pen  saturate by zhaolanzhen (@mrszhao)  on CodePen.


9、sepia(%)

转换成深褐色图像。0%-100%的值。0%图像无变化,100%为最深的褐色。

See the Pen  sepia by zhaolanzhen (@mrszhao)  on CodePen.


10、contrast(%)

调整图像的对比度。0%完全没有对比,图像全灰。100%图像不变。大于100%则图像对比增强。

See the Pen  contrast by zhaolanzhen (@mrszhao)  on CodePen.


11、可以使用多个滤镜,用空格隔开。

See the Pen  multi filters by zhaolanzhen (@mrszhao)  on CodePen.


腾讯isux:腾讯社交用户体验设计 - Tencent ISUX Design腾讯的这个网站就用了灰色图片变成彩色图片的效果,但是为了兼容性,并没有使用filter滤镜,而是准备了两张图片,一张灰色,一张彩色,再用opacity的方式,让彩色图片默认opacity为0,鼠标经过li的时候再把彩色图片的opacity变成1,实现彩色图片挡住下面灰色图片的效果。

点赞


3
保存到:

相关文章

发表评论:

◎请发表你卖萌撒娇或一针见血的评论,严禁小广告。

Top