CSS滤镜使用详解

一、CSS动态滤镜

动态滤镜可以为页面添加动人的淡入淡出、图象转化效果，它可以分为两种blend（混合）和reveal（显示），前者可以使对象渐渐消失或出现，后者 提供了24种图象转化的效果。对于动态滤镜的调用除去象在静态滤镜中要定义的滤镜类型，参数等等，还用到脚本语言控制它的状态。

首先，在开始一个动态效果之前，先需要进行装备（Apply），然后播放（Play）动态效果，在动态效果进行中还可以中断动态效果（Stop），以上可以用下面的方法实现： 对象名.filters(滤镜数值).Apply() 对象名.filters(滤镜数值).Play() 对象名.filters(滤镜数值).Stop()

对于滤镜状态的判断可以通过“对象名.filters(滤镜数值).status”判断，该值为0时，表示滤镜未执行，为1时，表示滤镜已经完成，为2时表示滤镜在执行中。在定义filter时，如上面所提到的，可以有混合（“filter:blendTrans(duration=时间数值)”，duration表示滤 镜执行需要的时间，单位为秒）和显示（“filter:revealTrans(duration=时间数值,transition=过渡类型)”，过渡 类型为从0－23的数值）两种。

滤镜目前还未被W3C正式承认。滤镜只是微软IE浏览器的组成部分，不能用于Netscape浏览器。制定有关标准的组织正在就此进行讨论，但尚未达成最后定论。在我看来，滤镜是一种非常有趣而且是制作精彩的视觉效果必不可少的一部分。滤镜能节省带 宽，而且是你能在制作奇妙的视觉设计时使用文字格式，而不必先制作庞大的文字位图以取得相同的效果。但由于这些功能尚未成为HTML的正式组成部分，所以并不是所有的浏览器都能看到这些特色。有些时候，你必须考虑以传统的方式制作相同的效果，当然，你不得不继续将庞大的GIF文件塞到网页之中。

(动态滤镜)页面切换效果：

在页面头部与之间加入： content=\"RevealTrans(duration=5,Transitionv=11)\">

说明：duration为页面切换的时间长度，3.000表示3秒钟，一般可以直接输入3便可；transition为切换效果，从1-23共22种不同的切换效果，其中23为随机效果。 动态滤镜效果详解：

盒状收缩 RevealTrans 0 盒状展开 RevealTrans 1 圆形收缩 RevealTrans 2 圆形展开 RevealTrans 3 向上擦除 RevealTrans 4 向下擦除 RevealTrans 5 向左擦除 RevealTrans 6 向右擦除 RevealTrans 7 垂直百页窗 RevealTrans 8 水平百页窗 RevealTrans 9 横向棋盘式 RevealTrans 10 纵向棋盘式 RevealTrans 11 溶解 RevealTrans 12

左右向中部收缩 RevealTrans 13 中部向左右展开 RevealTrans 14

上下向中部收缩 RevealTrans 15 中部向上下展开 RevealTrans 16 阶梯状向左下展开 RevealTrans 17 阶梯状向左上展开 RevealTrans 18 阶梯状向右下展开 RevealTrans 19 阶梯状向右上展开 RevealTrans 20 随机水平线 RevealTrans 21 随机垂直线 RevealTrans 22 随机 RevealTrans 23

二、CSS静态滤镜样式 （filter）

使用滤镜的时候必须要加上width /height /position:absolute或relative;之一。

CSS静态滤镜样式的使用方法：

{ filter : filtername( parameters1, parameters2, ...) } Filter样式 简要说明 支持参数

alpha 设置图片或文字的不透明度 opacity、finishOpacity、style、startX、startY、finishX、finishY、add、direction、strength

blur 在指定的方向和位置上产生动感模糊效果 add、direction、strength chroma 对所选择的颜色进行透明处理 color

dropShadow 在指定的方向和位置上产生阴影 color、offX、offY、positive flipH 沿水平方向翻转对象 flipV 沿垂直方向翻转对象

glow 在对象周围上发光 color、strength gray 将对象以灰度处理 invert 逆转对象颜色 light 对对象进行模拟光照 mask 对对象生成掩膜 color

shadow 沿对象边缘产生阴影 color、direction

wave 在垂直方向产生正弦波形 add、freq、lightStrength、phase、strength xray 改变对象颜色深度，并绘制黑白图象

以上就是静态滤镜的全部内容，要注意的是CSS是区分大小写的！ 1、滤镜：Alpha（设置图片或文字的不透明度）

语 法：filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity，Sty le=style,StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY) 说明：

Opacity：起始值，取值为0～100, 0为透明，100为原图。

FinishOpacity：用来设置结束时的透明度，从而达到一种渐变效果，取值0-100

Style：指定了透明区域的形状特征。其中0代表统一形状；1代表线形；2代表放射状；3 代表长方形。取值：0-3

StartX和StartY：代表渐变透明效果的开始坐标。 FinishY和finishY：代表渐变透明效果的结束坐标。 例子：filter:Alpha(Opacity=\"0\ 2、滤镜：blur（在指定的方向和位置上产生动感模糊效果）

语法：filter:Blur(Add = add, Direction = direction, Strength = strength) 说明：

Add有两个参数值：true和false。意思是指定图片是否被改变成模糊效果.

Strength参数值只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响。默认值是5像素。

Direction参数用来设置模糊的方向。模糊效果是按照顺时针方向进行的。其中0度代表垂直向上，每45度一个单位，默认值是向左的270度。

角度 0 45 90 135 180 225 270 315 模糊方向 垂直向上 垂直向左 向左 向下偏右 垂直向下 向下偏左 向左 向上偏右 例子：filter:Blur(Add=\"true\3、滤镜：Chroma（对所选择的颜色进行透明处理） 语法：filter:Chroma(Color = color) 说明：color：#rrggbb格式，任意。 例子：filter:Chroma(Color=\"#FFFFFF\")

4、滤镜：DropShadow（在指定的方向和位置上产生阴影）

语法：filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive) 说明：

Color:代表投射阴影的颜色。

Offx和offy:分别是指X方向和Y方向阴影的偏移量。偏移量必须用整数值来设置。如果设置为正整数，代表X轴的右方向和Y轴的向下方向。设置为负整数则相反。

Positive参数有两个值：True为任何非透明像素建立可见的投影，False为透明的像素部分建立可见的投影。

例子：filter:DropShadow(Color=\"#6699CC\ 5、滤镜：FlipH（沿水平方向翻转对象） 语法：filter:FlipH 例子：filter:FlipH

6、滤镜：FlipV（沿垂直方向翻转对象） 语法：filter:FlipV 例子：filter:FlipV

7、滤镜：glow（在对象周围上发光）

语法：filter:Glow(Color=color, Strength=strength) 说明：Color：发光颜色。Strength：强度(0－255) 例子：filter:Glow(Color=\"#6699CC\8、滤镜：gray（将对象以灰度处理） 语法：filter:Gray 例子：filter:Gray

9、滤镜：invert（逆转对象颜色） 语法：filter:Invert 例子：filter:Invert

10、滤镜：light（对对象进行模拟光照） 语法：filter:light 例子：filter:light

11、滤镜：mask（对对象生成掩膜） 语法：filter:Mask(Color=color) 例子：filter:Mask (Color=\"#FFFFE0\") 12、滤镜：shadow（沿对象边缘产生阴影）

语法：filter:Shadow(Color=color, Direction=direction)

说明：Color：#rrggbb格式。Direction：角度，0－315度，步长为45度。 例子：filter:Shadow (Color=\"#6699CC\13、滤镜：wave（在垂直方向产生正弦波形。波纹效果）

语法：filter: Wave(Add=add，Freq=freq，LightStrength=strength，Phase=phase， Strength=strength) 说明：

Add：表示是否要把对象按照波形式样扭曲，它只有两个值，即\"true\"和\"false\"。默认值是\"true（1）\"，当然你也可以修改它的值为\"false\"（\"0\"）。 freq：是波纹的频率，也就是指定在这个对象上面一共需要产生多少个完整的波纹。

lightstrength：参数可以对于波纹增强光影的效果。取值范围0-100的整数。 phase：参数用来设置正弦波开始的偏移量。这个偏移量的通用值为0，但是你可以改变它。phase的取值从0到100之间，这个数值代表开始时的偏移量取自波长的百分比值。 例如如果值为25那么正弦波就从90度的方向开始。 strength：表示波形的振幅大小，也可以简单的理解为扭曲的程度。

例子：filter: wave(Add=\"0\Strength=\"2\")

14、滤镜：Xray（改变对象颜色深度，并绘制黑白图象。变的像被x光照射一样） 语法：filter:Xray 例子：filter:Xray;