CSS滤镜的应用课件

第十课 CSS 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十四、浮雕纹理（十四、浮雕纹理（Emboss和和Engrave）n十五、波浪（十五、波浪（Wave）主讲内容：一、滤镜概述十三、X射线（X-ray）2课前介绍nCSS滤镜并不是浏览器的插件，也不符合CSS标准，而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的一类功能的集合。由于浏览器IE有着很广的使用范围，因此CSS滤镜也被广大设计者所喜爱。n本课主要介绍CSS各个滤镜的使用方法，包括定义滤镜、加载滤镜、实例解析等等。课前介绍CSS滤镜并不是浏览器的插件，也不符合CSS标准，而3一、滤镜概述nCSS滤镜的标识符是“filter”，总体上跟其它CSS语句一样，都十分简单，语法如下：nfilter:filtername(parameters);n即进行滤镜操作必须先定义filter，filtername是滤镜属性名，包括alpha、blur、chroma等多种属性，parameters是表示各个滤镜属性的参数，也正是这些参数决定了滤镜将以怎样的效果显示。通常指可以直接作用在对象上，便能立即生效的滤镜，主要有以下几种：Alpha 通道、模糊效果（Blur）、移动模糊（Motion Blur）、透明色（Chroma）、下落阴影（Drop Shadow）、对称变换（Flip）、光晕（Glow）、灰度（Grayscale）、反色（Invert）、遮罩（Mask）、阴影（Shadow）、X光效果（Xray）、浮雕（Emboss、Engrave）、波浪（Wave）基本滤镜基本滤镜指需要配合javascript等脚本语言，能产生更多变幻效果的滤镜，主要包括BlendTrans（渐隐变换）、RevealTrans（变换）、Light（灯光）等。高级滤镜高级滤镜滤滤镜镜分分类类一、滤镜概述CSS滤镜的标识符是“filter”，总体上跟其4二、通道（AlphaAlpha）nAlpha滤镜是用来设置透明度的，表达式如下：滤镜是用来设置透明度的，表达式如下：nfilter:alpha(opacity=0100,finishopacity=0100,style=0/1/2/3,startX=0100,startY=0100,finishX=0100,finishY=0100);n其中opacity代表透明度等级，可选值从0100，0代表完全透明，100代表完全不透明；nfinishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从0100；nstyle参数指定了透明区域的形状特征。其中0代表统一形状、1代表线形、2代表圆形放射渐变、3代表矩形放射渐变。当style为2或3时，startX和startY等坐标参数便没有意义，都是以图片中心为起始，四周为结束。nstartX和startY代表渐变透明效果的开始坐标，finishX和finishY代表渐变透明效果的结束坐标，取值范围0100。图片的左上角坐标为（0，0），右下角坐标为（100，100），两点的连线作为线性变换的方向。(0,0)(100,100)二、通道（Alpha）Alpha滤镜是用来设置透明度的，表达5二、通道（AlphaAlpha）源码见实例源码见实例10-01.html二、通道（Alpha）源码见实例10-01.html6三、模糊（BlurBlur）n语法如下：语法如下：nfilter:progid:DXImageTransform.Microsoft.Blur(makeshadow=ture或或false,pixelradius=数值数值,shadowopacity=数值数值);n其中makeshadow设置对象的内容是否被处理为阴影，值为ture或false；npixelradius设置模糊效果的作用深度；nshadowopacity设置使用makeshadow制作成的阴影的透明度，可选项。源码见实例源码见实例10-02.html三、模糊（Blur）语法如下：源码见实例10-02.html7四、运动模糊（Motion BlurMotion Blur）n运动模糊滤镜在运动模糊滤镜在css中指的是在一个方向上的运动模糊，语法如下：中指的是在一个方向上的运动模糊，语法如下：nfilter:progid:DXImageTransform.Microsoft.Motionblur(add=true或或false,direction=角度角度,strength=整数整数)nAdd参数有两个参数值：true和false，用来指定是否叠加原图片；nDirection参数用来设置模糊的方向。模糊效果是按照顺时针方向进行的。其中0度代表垂直向上，每45度一个单位，默认值是向左的270度。角度方向的对应关系见下表：nStrength参数值只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响。默认值是5像素。四、运动模糊（Motion Blur）运动模糊滤镜在css中8四、运动模糊（Motion BlurMotion Blur）源码见实例源码见实例10-03.html四、运动模糊（Motion Blur）源码见实例10-03.9五、透明色（ChromaChroma）nchroma滤镜给予图像一个特定的颜色透明，它的表达式如下：滤镜给予图像一个特定的颜色透明，它的表达式如下：“filter:Chroma(Color=英文单词英文单词/十六进制十六进制)n注：用十六进制时，前面不加注：用十六进制时，前面不加#。源码见实例源码见实例10-04.html五、透明色（Chroma）chroma滤镜给予图像一个特定的10六、下落的阴影（DropshadowDropshadow）nDropshadow滤镜就是为对象添加下落的阴影效果的，其语法如下：滤镜就是为对象添加下落的阴影效果的，其语法如下：nfilter:DropShadow(Color=英文单词英文单词/十六进制十六进制/RGB,OffX=整数像素整数像素,OffY=整数像素整数像素,Positive=ture或或false（1或或0）)n说明：Color代表投射阴影的颜色；nOffx：X轴偏离值，设置值为整数，单位为像素；若水平往右移，则为正数；若水平往左移，则为负数。nOffy：Y轴偏离值，设置值为整数，单位为像素；若垂直往下移，则为正数；若垂直往上移，则为负数。nPositive：ture或false（1或0），ture为任何非透明像素建立可见的投影，false为透明的像素部分建立可见的投影。六、下落的阴影（Dropshadow）Dropshadow滤11六、下落的阴影（DropshadowDropshadow）源码见实例源码见实例10-05.html注意区分标准html编写规则下及非标准编写规则下，文字及图片的显示效果六、下落的阴影（Dropshadow）源码见实例10-05.12七、翻转变幻（FlipFlip）nFlip滤镜的使用非常简单，没有任何参数，滤镜的使用非常简单，没有任何参数，fliph代表水平翻转，代表水平翻转，flipv代表垂直翻转，表达式分别为：代表垂直翻转，表达式分别为：nfilter:fliph /*水平翻转水平翻转*/nfilter:flipv /*竖直翻转竖直翻转*/源码见实例源码见实例10-06.html七、翻转变幻（Flip）Flip滤镜的使用非常简单，没有任何13八、光晕（GlowGlow）n文字或物体发光的特效往往能使得该对象特别的突出，文字或物体发光的特效往往能使得该对象特别的突出，css中的中的Glow滤镜能使得文字和图片实现发光的特效，其语法如下所示：滤镜能使得文字和图片实现发光的特效，其语法如下所示：nfilter:Glow(color=英文单词英文单词/十六进制十六进制/RGB,strength=1255);n其中color指定发光的颜色，strength指定发光的强度，参数值从1255。源码见实例源码见实例10-07.html注意区分标准html编写规则下及非标准编写规则下，文字及图片的显示效果八、光晕（Glow）文字或物体发光的特效往往能使得该对象特别14九、灰度（GrayGray）n黑白相片能够给人怀旧、悠久和回味的感觉，使用黑白相片能够给人怀旧、悠久和回味的感觉，使用css的灰度的灰度gray滤镜滤镜能够轻松地将彩色图片变成黑白图片，语法如下：能够轻松地将彩色图片变成黑白图片，语法如下：nfilter:gray;源码见实例源码见实例10-08.html九、灰度（Gray）黑白相片能够给人怀旧、悠久和回味的感觉，15十、反色（InvertInvert）nInvert滤镜用于把对象的可视化属性全部翻转，包括色彩、饱和度和滤镜用于把对象的可视化属性全部翻转，包括色彩、饱和度和亮度值等，相当于相片底片的效果，其表达式如下：亮度值等，相当于相片底片的效果，其表达式如下：nfilter:Invert;源码见实例源码见实例10-09.html十、反色（Invert）Invert滤镜用于把对象的可视化属16十一、遮罩（MaskMask）nMask滤镜相当于为对象建立一个覆盖在其表面的膜，实现一种颜色滤镜相当于为对象建立一个覆盖在其表面的膜，实现一种颜色框架的效果。其表达式如下：框架的效果。其表达式如下：nfilter:mask(color=英文单词英文单词/十六进制十六进制);n其中color参数用来指定使用什么颜色作为掩膜。源码见实例源码见实例10-10.html十一、遮罩（Mask）Mask滤镜相当于为对象建立一个覆盖在17十二、阴影（ShadowShadow）nshadow滤镜提供了一种拖尾巴的阴影效果，可以在指定的方向建立物滤镜提供了一种拖尾巴的阴影效果，可以在指定的方向建立物体的连续投影，其表达式：体的连续投影，其表达式：nfilter:shadow(color=英文单词英文单词/十六进制十六进制,direction=角度角度/英文单词英文单词)n其中color属性设置阴影的颜色，direction属性设定阴影的方向。源码见实例源码见实例10-11.html十二、阴影（Shadow）shadow滤镜提供了一种拖尾巴的18十三、X X射线（X-rayX-ray）nXray滤镜的效果是给图片添加滤镜的效果是给图片添加X光照射的感觉，表达式如下：光照射的感觉，表达式如下：nfilter:Xray;源码见实例源码见实例10-12.html十三、X射线（X-ray）Xray滤镜的效果是给图片添加X光19十四、浮雕纹理（EmbossEmboss和EngraveEngrave）n在css滤镜中有两个滤镜都能够提供类似浮雕的效果类似浮雕的效果，它们分别是Emboss滤镜和Engrave滤镜，两个不同之处在于Emboss产生凹陷的浮雕产生凹陷的浮雕效果，而效果，而Engrave则产生凸出的浮雕效果则产生凸出的浮雕效果，其语法分别如下所示：n(enabled=ture或或false,bias=-11);n(enabled=ture或或false,bias=-11);n其中enabled的值可以为ture或false，分别对应滤镜的开启与关闭，默认值为ture；nbias设置添加到滤镜结果的每种颜色成分值的百分比，取值范围为-11，此属性值大的则产生高亮滤光效果。对于高对比度的图片而言，该值对滤镜的结果影响较小。十四、浮雕纹理（Emboss和Engrave）在css滤镜中20十四、浮雕纹理（EmbossEmboss和EngraveEngrave）源码见实例源码见实例10-13.html十四、浮雕纹理（Emboss和Engrave）源码见实例1021十五、波浪（WaveWave）nWave滤镜可以为对象添加竖直方向上的波浪效果，也可以用来把对滤镜可以为对象添加竖直方向上的波浪效果，也可以用来把对象按照竖直的波纹样式打乱，其表达式为：象按照竖直的波纹样式打乱，其表达式为：nfilter:wave(add=1或或0,freq=数值数值,lightstrength=0100,phase=0100,strength=数值数值);n说明：nadd参数有两个参数值，1表示显示原对象，0表示不显示原对象；nfreq参数指生成波纹的频率，也就是指定在对象上共需要产生多少个完整的波纹；nlightstrength参数是为了使生成的波纹增强光的效果，参数值为0100；nphase参数用来设置正弦波开始的偏移量，通用值为0，可变范围0100.这个值代表开始时的偏移量占波长的百分比。比如该值为25，代表正弦波从90度（360度*25%）的方向开始；nstrength为振幅的大小。十五、波浪（Wave）Wave滤镜可以为对象添加竖直方向上的22十五、波浪（WaveWave）源码见实例源码见实例10-14.html十五、波浪（Wave）源码见实例10-14.html23经验之谈：n在学习滤镜的过程中，同学们可使用原文字或原图片对照的方式来观察滤镜的效果，另外同学们业余时间可以试着调试一下各个滤镜中的参数，观察不同的效果。还有，也可以试着将多个滤镜同时使用来实现你想要的滤镜效果，这些同学们都可以在实践中不断尝试，制作出各种巧妙的特效。经验之谈：在学习滤镜的过程中，同学们可使用原文字或原图片对照24本章结束，谢谢！本章结束，谢谢！