CSS滤镜的应用课件.ppt

1、第十课 CSS CSS滤镜的应用主讲内容：n 一、滤镜概述一、滤镜概述n 二、通道（二、通道（Alpha）n 三、模糊（三、模糊（Blur）n 四、运动模糊（四、运动模糊（Motion Blur）n 五、透明色（五、透明色（Chroma）n 六、下落的阴影（六、下落的阴影（Dropshadow）n 七、翻转变幻（七、翻转变幻（Flip）n 八、光晕（八、光晕（Glow）n 九、灰度（九、灰度（Gray）n 十、反色（十、反色（Invert）n 十一、遮罩（十一、遮罩（Mask）n 十二、阴影（十二、阴影（Shadow）n 十三、十三、X射线（射线（X-ray）n 十四、浮雕纹理（十四、浮雕纹理

2、（Emboss和和Engrave）n 十五、波浪（十五、波浪（Wave）课前介绍n CSS滤镜并不是浏览器的插件，也不符合CSS标准，而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的一类功能的集合。由于浏览器IE有着很广的使用范围，因此CSS滤镜也被广大设计者所喜爱。n 本课主要介绍CSS各个滤镜的使用方法，包括定义滤镜、加载滤镜、实例解析等等。一、滤镜概述n CSS滤镜的标识符是“filter”，总体上跟其它CSS语句一样，都十分简单，语法如下：n filter:filtername(parameters);n 即进行滤镜操作必须先定义filter，filtername是滤镜属

3、性名，包括alpha、blur、chroma等多种属性，parameters是表示各个滤镜属性的参数，也正是这些参数决定了滤镜将以怎样的效果显示。通常指可以直接作用在对象上，便能立即生效的滤镜，主要有以下几种：Alpha 通道、模糊效果（Blur）、移动模糊（Motion Blur）、透明色（Chroma）、下落阴影（Drop Shadow）、对称变换（Flip）、光晕（Glow）、灰度（Grayscale）、反色（Invert）、遮罩（Mask）、阴影（Shadow）、X光效果（Xray）、浮雕（Emboss、Engrave）、波浪（Wave）基本滤镜基本滤镜指需要配合javascript等

4、脚本语言，能产生更多变幻效果的滤镜，主要包括BlendTrans（渐隐变换）、RevealTrans（变换）、Light（灯光）等。高级滤镜高级滤镜滤滤镜镜分分类类二、通道（AlphaAlpha）n Alpha滤镜是用来设置透明度的，表达式如下：滤镜是用来设置透明度的，表达式如下：n filter:alpha(opacity=0100,finishopacity=0100,style=0/1/2/3,startX=0100,startY=0100,finishX=0100,finishY=0100);n 其中opacity代表透明度等级，可选值从0100，0代表完全透明，100代表完全不透明；

5、n finishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从0100；n style参数指定了透明区域的形状特征。其中0代表统一形状、1代表线形、2代表圆形放射渐变、3代表矩形放射渐变。当style为2或3时，startX和startY等坐标参数便没有意义，都是以图片中心为起始，四周为结束。n startX和startY代表渐变透明效果的开始坐标，finishX和finishY代表渐变透明效果的结束坐标，取值范围0100。图片的左上角坐标为（0，0），右下角坐标为（100，100），两点的连线作为线性变换的方向。(0,0)(100,100)二、通道（A

6、lphaAlpha）源码见实例源码见实例10-01.html三、模糊（BlurBlur）n 语法如下：语法如下：n filter:progid:DXImageTransform.Microsoft.Blur(makeshadow=ture或或false,pixelradius=数值数值,shadowopacity=数值数值);n 其中makeshadow设置对象的内容是否被处理为阴影，值为ture或false；n pixelradius设置模糊效果的作用深度；n shadowopacity设置使用makeshadow制作成的阴影的透明度，可选项。源码见实例源码见实例10-02.html四、运动

7、模糊（Motion BlurMotion Blur）n 运动模糊滤镜在运动模糊滤镜在css中指的是在一个方向上的运动模糊，语法如下：中指的是在一个方向上的运动模糊，语法如下：n filter:progid:DXImageTransform.Microsoft.Motionblur(add=true或或false,direction=角度角度,strength=整数整数)n Add参数有两个参数值：true和false，用来指定是否叠加原图片；n Direction参数用来设置模糊的方向。模糊效果是按照顺时针方向进行的。其中0度代表垂直向上，每45度一个单位，默认值是向左的270度。角度方向的对

8、应关系见下表：n Strength参数值只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响。默认值是5像素。四、运动模糊（Motion BlurMotion Blur）源码见实例源码见实例10-03.html五、透明色（ChromaChroma）n chroma滤镜给予图像一个特定的颜色透明，它的表达式如下：滤镜给予图像一个特定的颜色透明，它的表达式如下：“filter:Chroma(Color=英文单词英文单词/十六进制十六进制)n 注：用十六进制时，前面不加注：用十六进制时，前面不加#。源码见实例源码见实例10-04.html六、下落的阴影（DropshadowDropshadow）

9、n Dropshadow滤镜就是为对象添加下落的阴影效果的，其语法如下：滤镜就是为对象添加下落的阴影效果的，其语法如下：n filter:DropShadow(Color=英文单词英文单词/十六进制十六进制/RGB,OffX=整数像整数像素素,OffY=整数像素整数像素,Positive=ture或或false（1或或0）)n 说明：Color代表投射阴影的颜色；n Offx：X轴偏离值，设置值为整数，单位为像素；若水平往右移，则为正数；若水平往左移，则为负数。n Offy：Y轴偏离值，设置值为整数，单位为像素；若垂直往下移，则为正数；若垂直往上移，则为负数。n Positive：ture或f

10、alse（1或0），ture为任何非透明像素建立可见的投影，false为透明的像素部分建立可见的投影。六、下落的阴影（DropshadowDropshadow）源码见实例源码见实例10-05.html注意区分标准html编写规则下及非标准编写规则下，文字及图片的显示效果七、翻转变幻（FlipFlip）n Flip滤镜的使用非常简单，没有任何参数，滤镜的使用非常简单，没有任何参数，fliph代表水平翻转，代表水平翻转，flipv代表垂直翻转，表达式分别为：代表垂直翻转，表达式分别为：n filter:fliph /*水平翻转水平翻转*/n filter:flipv /*竖直翻转竖直翻转*/源码见

11、实例源码见实例10-06.html八、光晕（GlowGlow）n 文字或物体发光的特效往往能使得该对象特别的突出，文字或物体发光的特效往往能使得该对象特别的突出，css中的中的Glow滤镜能使得文字和图片实现发光的特效，其语法如下所示：滤镜能使得文字和图片实现发光的特效，其语法如下所示：n filter:Glow(color=英文单词英文单词/十六进制十六进制/RGB,strength=1255);n 其中color指定发光的颜色，strength指定发光的强度，参数值从1255。源码见实例源码见实例10-07.html注意区分标准html编写规则下及非标准编写规则下，文字及图片的显示效果九、

12、灰度（GrayGray）n 黑白相片能够给人怀旧、悠久和回味的感觉，使用黑白相片能够给人怀旧、悠久和回味的感觉，使用css的灰度的灰度gray滤镜滤镜能够轻松地将彩色图片变成黑白图片，语法如下：能够轻松地将彩色图片变成黑白图片，语法如下：n filter:gray;源码见实例源码见实例10-08.html十、反色（InvertInvert）n Invert滤镜用于把对象的可视化属性全部翻转，包括色彩、饱和度和滤镜用于把对象的可视化属性全部翻转，包括色彩、饱和度和亮度值等，相当于相片底片的效果，其表达式如下：亮度值等，相当于相片底片的效果，其表达式如下：n filter:Invert;源码见实例

13、源码见实例10-09.html十一、遮罩（MaskMask）n Mask滤镜相当于为对象建立一个覆盖在其表面的膜，实现一种颜色滤镜相当于为对象建立一个覆盖在其表面的膜，实现一种颜色框架的效果。其表达式如下：框架的效果。其表达式如下：n filter:mask(color=英文单词英文单词/十六进制十六进制);n 其中color参数用来指定使用什么颜色作为掩膜。源码见实例源码见实例10-10.html十二、阴影（ShadowShadow）n shadow滤镜提供了一种拖尾巴的阴影效果，可以在指定的方向建立滤镜提供了一种拖尾巴的阴影效果，可以在指定的方向建立物体的连续投影，其表达式：物体的连续投影

14、，其表达式：n filter:shadow(color=英文单词英文单词/十六进制十六进制,direction=角度角度/英文单词英文单词)n 其中color属性设置阴影的颜色，direction属性设定阴影的方向。源码见实例源码见实例10-11.html十三、X X射线（X-rayX-ray）n Xray滤镜的效果是给图片添加滤镜的效果是给图片添加X光照射的感觉，表达式如下：光照射的感觉，表达式如下：n filter:Xray;源码见实例源码见实例10-12.html十四、浮雕纹理（EmbossEmboss和EngraveEngrave）n 在css滤镜中有两个滤镜都能够提供类似浮雕的效果类

15、似浮雕的效果，它们分别是Emboss滤镜和Engrave滤镜，两个不同之处在于Emboss产生凹陷的浮雕产生凹陷的浮雕效果，而效果，而Engrave则产生凸出的浮雕效果则产生凸出的浮雕效果，其语法分别如下所示：n(enabled=ture或或false,bias=-11);n(enabled=ture或或false,bias=-11);n 其中enabled的值可以为ture或false，分别对应滤镜的开启与关闭，默认值为ture；n bias设置添加到滤镜结果的每种颜色成分值的百分比，取值范围为-11，此属性值大的则产生高亮滤光效果。对于高对比度的图片而言，该值对滤镜的结果影响较小。十四、浮

16、雕纹理（EmbossEmboss和EngraveEngrave）源码见实例源码见实例10-13.html十五、波浪（WaveWave）n Wave滤镜可以为对象添加竖直方向上的波浪效果，也可以用来把对滤镜可以为对象添加竖直方向上的波浪效果，也可以用来把对象按照竖直的波纹样式打乱，其表达式为：象按照竖直的波纹样式打乱，其表达式为：n filter:wave(add=1或或0,freq=数值数值,lightstrength=0100,phase=0100,strength=数值数值);n 说明：n add参数有两个参数值，1表示显示原对象，0表示不显示原对象；n freq参数指生成波纹的频率，也就

17、是指定在对象上共需要产生多少个完整的波纹；n lightstrength参数是为了使生成的波纹增强光的效果，参数值为0100；n phase参数用来设置正弦波开始的偏移量，通用值为0，可变范围0100.这个值代表开始时的偏移量占波长的百分比。比如该值为25，代表正弦波从90度（360度*25%）的方向开始；n strength为振幅的大小。十五、波浪（WaveWave）源码见实例源码见实例10-14.html经验之谈：n 在学习滤镜的过程中，同学们可使用原文字或原图片对照的方式来观察滤镜的效果，另外同学们业余时间可以试着调试一下各个滤镜中的参数，观察不同的效果。还有，也可以试着将多个滤镜同时使用来实现你想要的滤镜效果，这些同学们都可以在实践中不断尝试，制作出各种巧妙的特效。本章结束，谢谢！