CSS滤镜.doc

CSS滤镜:1. alpha属性（通道）: 用于设定透明度，表达式如下： filter：alpha（opacity=?，finishopacity=?，style=?，startX=?，startY=?，finishX=?） 其中opacity表示透明度等级，可选值从0100，0代表完全透明，100代表完全不透明。finishopacity是一个可选参数，如果想要设置渐变的透明效果，就可以使用它来指定结束时的透明度，范围也是0100。style参数制定透明区域形状特征。其中0代表统一形状、1代表线形、2代表放射状、3代表长方形。StartX和StartY代表渐变透明效果的开始X和Y坐标。FinishX和FinishY代表渐变透明效果结束X和Y 的坐标。2. BlendTrans属性(淡入淡出效果)：为对象设置淡入淡出效果，表达式如下：Blendtrans(duration=?)其中duration表示效果持续时间，以秒为单位。使用BlendTrans滤镜也和Revealtrans滤镜一样，需要借助于Javascript来调用它的方法来实现。 3. RevealTrans属性(渐变效果)：为对象设置渐变播放效果，表达式如下：RevealTrans(Duration=?, Transition=?)其中，Duration表示渐变持续时间，以秒为单位。Transition为可选项，整数值(Integer)，设置或检索转换所使用的方式。 0 :矩形收缩转换。1 :矩形扩张转换。2 :圆形收缩转换。3 :圆形扩张转换。4 :向上擦除。5 :向下擦除。6 :向右擦除。7 :向左擦除。8 :纵向百叶窗转换。9 :横向百叶窗转换。10 :国际象棋棋盘横向转换。11 :国际象棋棋盘纵向转换。12 :随机杂点干扰转换。13 :左右关门效果转换。14 :左右开门效果转换。15 :上下关门效果转换。16 :上下开门效果转换。17 :从右上角到左下角的锯齿边覆盖效果转换。18 :从右下角到左上角的锯齿边覆盖效果转换。19 :从左上角到右下角的锯齿边覆盖效果转换。20 :从左下角到右上角的锯齿边覆盖效果转换。21 :随机横线条转换。22 :随机竖线条转换。23 :随机使用上面可能的值转换。4. Chroma属性(透明色)：设置一个对象中指定的颜色为透明色，即隐藏某一种颜色。说明：color：#rrggbb格式，任意。 例子：filter:Chroma(Color=#FFFFFF)5. DropShadow属性(投射阴影)：DropShadow属性是为了添加对象的阴影效果的语法：STYLE=filter:DropShadow(Color=？,OffX=？,OffY=？,Positive=？) 说明：Color:#rrggbb格式，任意。 Offx：X轴偏离值。 Offy：Y轴偏离值。 Positive：1（为非透明像素建立阴影效果）或0（为透明像素部分建立阴影效果）。例子：filter:DropShadow(Color=#6699CC,OffX=5,OffY=5,Positive=1)6. FlipH、FlipV属性（水平、垂直翻转）：Flip是CSS滤镜的翻转属性，FlipH代表水平翻转，FlipV代表垂直翻转7. Glow属性（发光）：当对一个对象使用“Glow”属性后，这个对象的边缘就会产生类似发光的效果语法：STYLE=filter:Glow(Color=？,Strength=？) 说明： Color：发光颜色。 Strength：强度(0100) 例子：filter:Glow(Color=#6699CC,Strength=5)8. Gray属性（灰度）：取消对象的颜色信息，将它转变为灰度图。9. Invert属性（反相）：Invert属性可以把对象的可视化属性全部反转，包括色彩、饱和度和亮度值。10. Light属性（光源）：能产生一个模拟光源的效果，但使用它要通过调用它的“方法（Method）”来实现，这就要用到一些Javascript知识。 如果不想让鼠标能控制灯光移动，那么只要下面这样几行代码就行了：本例中很关键的是这句程序代码：lightsy.filters0.addcone(380,-20,5,100,100,255,255,0,40,25);括号中的数值是可以修改的，通过设置不同的值可以获得各种各样的灯光效果，那么这些数值参数代表什么意思呢？第一个参数：光源的X坐标；第二个参数：光源的Y坐标；第三个参数：光源离开页面的高度；第四至第六个参数：光源的颜色；第七个参数：光源光的色相；第八个参数：光源的形状；第九个参数：光源的光的强度 ；第十个参数：光源光散开的范围。一个光源不够，可以增加任意个光源。在“setlights1函数中再增加几句lightsy.filters0.addcone(380,-20,5,100,100,255,255,0,40,25)代码 ，参数要调整，否则所有光源都在同一个位置看不出效果。上面只是用Javascript调用了Light滤镜的addcone（加入锥形光源）和movelight（移动光源）方法。Light滤镜还有一些方法，介绍如下：addambient ： 加入包围的光源；addpoint ： 加入点光源；changecolor ：改变光的颜色；changestrength：改变光源的强度；clear ： 清除所有光源。11. Mask属性(透明膜效果)：为对象建立一个覆盖于表面的膜。 语法：STYLE=filter:Mask(Color=color)例子：filter:Mask(Color=#FFFFE0) 制作方法: 插入一个1*1的表格，给表格加上彩色的背景，在表格中输入文字，给单元格加载一个mask 滤镜即可。12. Shadow属性（阴影效果）：Shadow属性可以在指定的方向建立物体的投影。语法为：filter:Shadow(Color=？, Direction=？) Color 代表阴影的颜色，格式为“#RRGGBB” 。Direction 是设置投影的方向，按照顺时针方向进行，0度代表垂直向上，然后每45度为一个单位。默认值是向左的270度。共8个方向。 实例： filter:Shadow (Color=#6699CC, Direction=135) 13. Wave属性（正弦波纹打乱图片效果）：Wave属性用来把对象按照垂直的波纹样式打乱。语法为：filter: Wave(Add=？, Freq=？, LightStrength=？, Phase=？, Strength=？) Add：是一个布尔值，表示是否要为对象施加此滤镜效果。true（非0)表示应用，false(0)为不应用。 Freq：代表波形产生的频率。 LightStrength：代表施加在波纹上的光的强度。 Phase：设置波形起始位置的偏移量，数值从0到100，0代表0度，100代表360度，25代表90度。 Strength：代表波纹振幅的大小。 实例如下： filter: wave(Add=0, Phase=4, Freq=5, LightStrength=5, Strength=2) 14. Xray属性（只显示轮廓）：将物体的轮廓显现出来并将其加亮。这种属性产生的效果就是使对象看上去有一种X光片的感觉。15. blur属性：假如您用手在一幅还没干透的油画上迅速划过，画面就会变得模糊，CSS下的blur属性就会达到这种模糊的效果。语法： STYLE=filter:Blur(Add = ？, Direction = ？, Stre