CSS滤镜使用方法和实例解释.ppt

《CSS滤镜使用方法和实例解释.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、CSS滤镜滤镜CSS滤镜的标识符是：filter语法：filter：filtername（parameters）进行滤镜之前必须定义filterfiltername是滤镜名，parameters是滤镜参数alpha参数说明Opacity代表透明度等级，可选值0-100，0代表完全透明，100代表完全不透明FinishOpacity可选项，设置结束时的透明度，制作渐变效果，可选值0-100Style指明区域的形状特征，0代表统一形状，1代表线性，2代表圆形放射渐变，3代表矩形反射渐变，当style为2或3时，StartX，StartY就无意义

2、StartX，StartY代表透明效果的开始坐标，坐标值是百分比，取值范围0-100FinishX,FinishY代表透明效果的结束坐标，坐标值是百分比，取值范围0-100通道（alpha）Alpha(Opacity=?,FinishOpacity=?,Style=?,StartX=?,StartY=?,FinishX=?,FinishY=?)blur参数说明Add有true和false两个值，用来指定是否叠加原图片Direction设置模糊的方向，模糊效果按顺时针方向进行。0度代表垂直向上，默认值270度Strength使用整数指定，代表

3、有多少像素的宽度受到模糊影响，默认值5px模糊（blur）Blur(Add=？,Direction=？,Strength=？);Chroma参数说明Color使某一个特定的颜色透明，此参数就代表它的颜色值透明色（Chroma）Chroma(Color=?)eg:Chroma(Color=#ff6800)dropshadow参数说明Color代表投射阴影的颜色OffX,OffY表示x方向和y方向的偏移量。设置为正整数，代表x轴的右方向和y轴的向下方向，设置为负数，则相反Positive有两个值，true为任何非透明像素建立可见的投影，fals

4、e为透明的像素部分建立可见的投影下落阴影（dropshadow）DropShadow(Color=?,OffX=?,OffY=?,Positive=?)Glow参数说明Color指定发光的颜色Strength指定发光的强度，参数值从1-255光晕（Glow）Glow(Color=?,Strength=?)Gray灰度（Gray）Grayegfilter:Gray;invert反色（invert）invertegfilter:invert;mask参数说明Color用来指定使用什么颜色作为掩膜，建议用gif图片遮罩（mask）mask(Col

5、or=?)shadow参数说明Color设置阴影的颜色Direction设定阴影方向，改方向按顺时针方向进行，其中0度代表垂直向上阴影（shadow）Shadow(Color=?,Direction=?)xrayX射线（xray）xrayegfilter:xray;wave参数说明Add1表示显示原对象，0表示不显示原对象Freq指生成波纹的频率，即在对象上共需要产生多少个完整的波纹LightStrength使生成的波纹增强光的效果，参数值0-100Phase用来设置正弦波开始的偏移量，0-100Strength振幅大小波浪（wave）Wa

6、ve(Add=?,Freq=?,LightStrength=?,Phase=?,Strength=?)淡入淡出（BlendTrans）BlendTrans滤镜是CSS的高级滤镜之一，语法与一般滤镜类似：filter:BlendTrans(duration=秒数)其中：duration是图片切换时间，以秒为单位。(revealtrans)图片轮播　图片切换revealTrans主要有两个参数:Duration和transition.duration表示持续的时间,而transition表示转换的效果类型.revealTrans(durati

7、on=Number,transition=Number)"