《DIV+CSSCSS滤镜的应用》由会员分享，可在线阅读，更多相关《DIV+CSSCSS滤镜的应用（19页珍藏版）》请在金锄头文库上搜索。
1、CSS滤镜的应用滤镜的应用.Tankertanker DesignTankertanker Design第八讲 CSS滤镜 8.1 滤镜简介8.2 通道Alpha滤镜8.3 模糊Blur 滤镜8.4 运动模糊(MotionBlur)8.5 透明色(Chroma)8.6 反转变换(Flip)8.7 光晕(Glow).Tankertanker DesignTankertanker Design8.8 灰度(Gray)8.9 反色(Invert)8.10 遮罩(Mask)8.11 阴影(Shadow)8.12 X射线(X-ray)8.13 浮雕纹理(Emboss和Engrave)8.14 波浪(Wa
2、ve)第八讲 CSS滤镜.Tankertanker DesignTankertanker Design8.1 滤镜简介 Css滤镜的标识符式“filter，总体的应用上和其他的css语句相同。css滤镜可分为根本滤镜和高级滤镜两种。可以直接作用于对象上，并且立即生效的滤镜称为根本滤镜。而要配合JavaScript等脚本语言，能产生更多变幻效果的那么称为高级滤镜。CSS滤镜的标识符是：滤镜的标识符是：filter语法：语法：filter：filternameparameters 进行滤镜之前必须定义进行滤镜之前必须定义filter filtername是滤镜名，是滤镜名，parameters是滤
3、镜参数是滤镜参数在在CSS样式中，提供了样式中，提供了filter滤镜效果，它可以对文字、图片、表格等滤镜效果，它可以对文字、图片、表格等确定范围的确定范围的HTML标记设置滤镜效果标记设置滤镜效果.Tankertanker DesignTankertanker Design8.2 Alpha8.2 Alpha滤镜滤镜通道通道alphaAlpha(Opacity=?,FinishOpacity=?,Style=?,StartX=?,StartY=?,FinishX=?,FinishY=?)参数参数说说 明明Opacity代表透明度等级，可选值代表透明度等级，可选值0-100，0代表完全透明，代
4、表完全透明，100代表完全不透明代表完全不透明FinishOpacity可选项，设置结束时的透明度，制作渐变效果，可选值可选项，设置结束时的透明度，制作渐变效果，可选值0-100Style指明区域的形状特征，指明区域的形状特征，0代表统一形状，代表统一形状，1代表线性，代表线性，2代表圆形放射渐变，代表圆形放射渐变，3代表矩形反射渐变，当代表矩形反射渐变，当style为为2或或3时，时，StartX，StartY就无意义就无意义StartX，StartY代表透明效果的开始坐标，坐标值是百分比，取值范围代表透明效果的开始坐标，坐标值是百分比，取值范围0-100FinishX,FinishY代表透
5、明效果的结束坐标，坐标值是百分比，取值范围代表透明效果的结束坐标，坐标值是百分比，取值范围0-100.Tankertanker DesignTankertanker Design8.3 Blur滤镜参数说 明makeshadowmakeshadow有有truetrue和和falsefalse两个值，用来指定是否有阴影效果两个值，用来指定是否有阴影效果pixelradiuspixelradius表示模糊作用深度表示模糊作用深度shadowpacityshadowpacity表示阴影透明度表示阴影透明度模糊模糊blurBlur(makeshadow=？,pixelradius=？,shadowpa
6、city=？);.Tankertanker DesignTankertanker Design8.4 运动模糊(MotionBlur)参数说 明Add有有true和和false两个值，用来指定是否叠加原图片两个值，用来指定是否叠加原图片Direction设置模糊的方向，模糊效果按顺时针方向进行。设置模糊的方向，模糊效果按顺时针方向进行。0度代表垂度代表垂直向上，默认值直向上，默认值270度度Strength使用整数指定，代表有多少像素的宽度受到模糊影响，默使用整数指定，代表有多少像素的宽度受到模糊影响，默认值认值5pxl运运动模糊动模糊(MotionBlur)lBlur(Add=？,Direc
7、tion=？,Strength=？);.Tankertanker DesignTankertanker Design 其中：参数direction用于设定动态模糊效果的方向，总单位为360，0代表垂直向上，并以每45为一个单位，而度数以方向定位时，将如以以下图所示。.Tankertanker DesignTankertanker Design8.5 8.5 透明色透明色(Chroma)(Chroma)透明色透明色ChromaChroma(enablrd=?,Color=?)参数说 明enabled有有true和和false两个值，用来指定是否应用滤镜两个值，用来指定是否应用滤镜Color使某一
8、个特定的颜色透明，此参数就代表它的颜色值使某一个特定的颜色透明，此参数就代表它的颜色值.Tankertanker DesignTankertanker Design8.6 8.6 反转变换反转变换(Flip)(Flip)FlipHFlipH滤镜是设置对象产生水平翻转滤镜是设置对象产生水平翻转180180，即左右相反，即左右相反的效果；而的效果；而FlipVFlipV滤镜是设置对象产生垂直翻转滤镜是设置对象产生垂直翻转180180，即上下颠倒的效果。即上下颠倒的效果。这两个滤镜的根本语法如下：这两个滤镜的根本语法如下：filter:FlipHfilter:FlipHfilter:FlipVfil
9、ter:FlipV 这两个滤镜没有参数。这两个滤镜没有参数。.Tankertanker DesignTankertanker Design8.7 8.7 光晕光晕(Glow)(Glow)参数说 明Color指定发光的颜色指定发光的颜色Strength指定发光的强度，参数值从指定发光的强度，参数值从1-255光晕光晕GlowGlow(Color=?,Strength=?).Tankertanker DesignTankertanker Design8.8 8.8 灰度灰度(Gray)(Gray)灰度灰度Grayfilter:Gray;.Tankertanker DesignTankertanke
10、r Design8.9 8.9 反色反色(Invert)(Invert)反色反色invertfilter:invert;.Tankertanker DesignTankertanker Design8.10 8.10 遮罩遮罩(Mast)(Mast)参数说 明ColorColor用来指定使用什么颜色作为掩膜，建议用用来指定使用什么颜色作为掩膜，建议用gifgif图片图片遮罩遮罩maskmask(Color=?).Tankertanker DesignTankertanker Design8.11 8.11 阴影阴影(Shadow)(Shadow)参数说 明ColorColor设置阴影的颜色设置
11、阴影的颜色offxoffx用来设置阴影在横坐标轴上以对象为基准的偏移用来设置阴影在横坐标轴上以对象为基准的偏移量。其值为整数型，正右，负左，默认为量。其值为整数型，正右，负左，默认为5 5offyoffy用来设置阴影在纵坐标轴上以对象为基准的偏移用来设置阴影在纵坐标轴上以对象为基准的偏移量。其值为整数型，正下，负上，默认为量。其值为整数型，正下，负上，默认为5 5positivepositiveTrueTrue为任何非透明像素建立可见投影，为任何非透明像素建立可见投影，falsefalse为为任何透明像素建立可见投影任何透明像素建立可见投影阴影阴影shadowShadow(enabled=?,
12、Color=?,offX=?,offY=?,positive=?).Tankertanker DesignTankertanker Design9.12 X-9.12 X-射线射线X X射线射线xrayxrayfilter:xray;filter:xray;.Tankertanker DesignTankertanker Design9.13 9.13 浮雕纹理浮雕纹理 浮雕纹理浮雕纹理(Emboss和和Engrave)filter:progid:DXImageTransform.Microsoft.emboss(ennabled=ennabled,bias=？)filter:progid:D
13、XImageTransform.Microsoft.engrave(ennabled=ennabled,bias=?)参数说 明enabledenabled设置阴影的颜色设置阴影的颜色embossemboss产生凹陷的浮雕效果产生凹陷的浮雕效果engraveengrave产生突出的浮雕效果产生突出的浮雕效果biasbias浮雕深度浮雕深度.Tankertanker DesignTankertanker Design参数说 明Add1表示显示原对象，表示显示原对象，0表示不显示原对象表示不显示原对象 Freq指生成波纹的频率，即在对象上共需要产生多少指生成波纹的频率，即在对象上共需要产生多少个完整的波纹个完整的波纹LightStrength使生成的波纹增强光的效果，参数值使生成的波纹增强光的效果，参数值0-100Phase用来设置正弦波开始的偏移量，用来设置正弦波开始的偏移量，0-100Strength振幅大小振幅大小波浪waveWave(Add=?,Freq=?,LightStrength=?,Phase=?,Strength=?)9.14 9.14 波浪波浪.Tankertanker DesignTankertanker Design谢谢.
