当前位置： 代码迷 >> HTML/CSS >> CSS滤镜成效介绍
  详细解决方案

CSS滤镜成效介绍

热度：280   发布时间：2012-10-28 09:54:44.0
CSS滤镜效果介绍
滤镜目前还未被W3C正式承认。滤镜只是微软IE浏览器的组成部分，不能用于Netscape浏览器。制定有关标准的组织正

在就此进行讨论，但尚未达成最后定论。在我看来，滤镜是一种非常有趣而且是制作精彩的视觉效果必不可少的一部

分。滤镜能节省带宽，而且是你能在制作奇妙的
视觉设计时使用文字格式，而不必先制作庞大的文字位图以取得相同的效果。

1．CSS静态滤镜样式 （filter）（只有IE4.0以上支持）
　　
      语法：STYLE="filter:filtername(fparameter1, fparameter2...)"
　　          （Filtername为滤镜的名称，fparameter1、fparameter2等是滤镜的参数）

　　滤镜说明：

　　Alpha：设置透明层次
　　blur：创建高速度移动效果，即模糊效果
　　Chroma：制作专用颜色透明
　　DropShadow：创建对象的固定影子
　　FlipH：创建水平镜像图片
　　FlipV：创建垂直镜像图片
　　glow：加光辉在附近对象的边外
　　gray：把图片灰度化
　　invert：反色
　　light：创建光源在对象上
　　mask：创建透明掩膜在对象上
　　shadow：创建偏移固定影子
　　wave：波纹效果
　　Xray：使对象变得像被x光照射一样

　　1、滤镜：Alpha
　　语法：STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=style, StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY)"
　　说明：
　　Opacity：起始值，取值为0～100, 0为透明，100为原图。
　　FinishOpacity：目标值。
　　Style：1或2或3
　　StartX：任意值
　　StartY：任意值
　　例子：filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")

　　2、滤镜：blur
　　语法：STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
　　说明：
　　Add：一般为1，或0。
　　Direction：角度，0～315度，步长为45度。
　　Strength：效果增长的数值，一般5即可。
　　例子：filter:Blur(Add="1",Direction="45",Strength="5")

　　3、滤镜：Chroma
　　语法：STYLE="filter:Chroma(Color = color)"
　　说明：color：#rrggbb格式，任意。
　　例子：filter:Chroma(Color="#FFFFFF")

　　4、滤镜：DropShadow
　　语法：STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
　　说明：Color:#rrggbb格式，任意。
　　Offx：X轴偏离值。
　　Offy：Y轴偏离值。
　　Positive：1或0。
　　例子：filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")

　　5、滤镜：FlipH
　　语法：STYLE="filter:FlipH"
　　例子：filter:FlipH

　　6、滤镜：FlipV
　　语法：STYLE="filter:FlipV"
　　例子：filter:FlipV

　　7、滤镜：glow
　　语法：STYLE="filter:Glow(Color=color, Strength=strength)"
　　说明：
　　Color：发光颜色。
　　Strength：强度(0－100)
　　例子：filter:Glow(Color="#6699CC",Strength="5")

　　8、滤镜：gray
　　语法：STYLE="filter:Gray"
　　例子：filter:Gray

　　9、滤镜：invert
　　语法：STYLE="filter:Invert"
　　例子：filter:Invert

　　10、滤镜：mask
　　语法：STYLE="filter:Mask(Color=color)"
　　例子：filter:Mask (Color="#FFFFE0")

　　11、滤镜：shadow
　　语法：filter:Shadow(Color=color, Direction=direction)
　　说明：
　　Color：#rrggbb格式。
　　Direction：角度，0－315度，步长为45度。
　　例子：filter:Shadow (Color="#6699CC", Direction="135")

　　12、滤镜：wave
　　语法：filter: Wave(Add=add，Freq=freq，LightStrength=strength，Phase=phase，Strength=strength)
　　说明：
　　Add：一般为1，或0。
　　Freq：变形值。
　　LightStrength：变形百分比。
　　Phase：角度变形百分比。
　　Strength：变形强度。
　　例子：filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")

　　13、滤镜：Xray
　　语法：STYLE="filter:Xray"
　　例子：filter:Xray

　　14.颜色变化
　　语法：
　　filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#B5CCFA',EndColorStr='#B5CCFA');

       15.progid:DXImageTransform.Microsoft微软滤镜的应用:progid:DXImageTransform.Microsoft是IE5.5＋及以上版本才有的，而以前的版本中直接使用filter:name即可。)style="FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#4B92D9',endColorStr='#CEDFF6', gradientType='1')" //表格背景渐变样式, gradientType为1左到右,gradientType为0上到

下;

style="filter:progid:DXImageTransform.Microsoft.Shadow(Color=#333333,Direction=120,strength=5)" //表格

线外阴影

filter:progid:DXImageTransform.Microsoft.DropShadow(color=#cccccc,offX=5,offY=5,positives=true); // 投

影滤镜;

filter:progid:DXImageTransform.Microsoft.Pixelate(maxsquare=3); //马赛克;

filter:alpha(opacity=100, finishOpacity=0,style=2); //柔边效果;

黑白照片 // filter: gray;

X光照片 // filter: Xray;

风动模糊 // filter: blur(add=true,direction=45,strength=30);

正弦波纹 // filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3);

半透明效果 // filter: Alpha(Opacity=50);

线型透明 // filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100,

FinishY=140);

放射透明 // filter: Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=30, StartY=30, FinishX=200,

FinishY=200);

白色透明 // filter: Chroma(Color=#FFFFFF);

降低色彩 // filter: grays;

底片效果 // filter: invert;

左右翻转 // filter: fliph;

垂直翻转 // filter: flipv;


2．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的数值）两种。

     1.CSS的RevealTrans动态滤镜是一个神奇的滤镜，它能产生23种动态效果，更为奇妙的是它还能在23种动态效果

中随机抽用其中的一种。用它来进行网页之间的动态切换，简直方便极了，你只要在网页源代码的< head >与< /head>之间插入这样一行代码：< Meta content=revealTrans(Transition=14,Duration=3.0) http-equiv=Page-enter >，

当你进入这个页面时，网页将象拉幕一样从中间向两边拉开，是不是别具一格？！
　　RevealTrans滤镜只有两个参数，Duration：是切换时间，以秒为单位；Transition：是切换方式，它有24种方式，详见下表：

切换效果   Transition参数值      切换效果       Transition参数值
矩形从大至小      0              随机溶解            12
矩形从小至大      1            从上下向中间展开      13
圆形从大至小      2            从中间向上下展开      14
圆形从小至大      3            从两边向中间展开      15
向上推开          4            从中间向两边展开      16
向下推开          5            从右上向左下展开      17
向右推开          6            从右下向左上展开      18
向左推开          7            从左上向右下展开      19
垂直形百叶窗      8            从左下向右上展开      20
水平形百叶窗      9              随机水平细纹        21
水平棋盘          10             随机垂直细纹        22
垂直棋盘          11            随机选取一种特效     23


2.BlendTrans滤镜Revealtrans滤镜来要简单一些，它只有一个参数：Duration 变换时间，    它的功能也比较单一，就是产生一种淡入淡出的效果。


3.DXImageTransform.Microsoft图形渐变滤镜
     23.随机变换效果             type="progid:DXImageTransform.Microsoft.RevealTrans(enabled=ture,transition=23)"

0.方形逐渐变小 type="progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=in)"
交叉形逐渐变大 type="progid:DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=out)"
菱形逐渐变小 type="progid:DXImageTransform.Microsoft.Iris(irisstyle=diamond,motion=in)"

1.方形逐渐变大 type="progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=out)"
交叉形逐渐变小 type="progid:DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=in)"
菱形逐渐变大 type="progid:DXImageTransform.Microsoft.Iris(irisstyle=diamond,motion=out)"

2.圆形逐渐变小 type="progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=in)"
加号形逐渐变大 type="progid:DXImageTransform.Microsoft.Iris(irisstyle=plus,motion=out)"
星形逐渐变小 type="progid:DXImageTransform.Microsoft.Iris(irisstyle=star,motion=in)"

3.圆形逐渐变大 type="progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=out)"
加号形逐渐变小 type="progid:DXImageTransform.Microsoft.Iris(irisstyle=plus,motion=in)"
星形逐渐变大 type="progid:DXImageTransform.Microsoft.Iris(irisstyle=star,motion=out)"

4.向上逐渐擦除 type="progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=up)"

5.向下逐渐擦除 type="progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=down)"

6.向左逐渐擦除 type="progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=left)"

7.向右逐渐擦除 type="progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=right)"

8.垂直百叶窗效果 type="progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=right)"
type="progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=left)"
type="progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=right)"
type="progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=left)"

9.水平百叶窗效果 type="progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=down)"
type="progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=up)"
type="progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=down)"
type="progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=up)"

10.横向棋盘效果 type="progid:DXImageTransform.Microsoft.CheckerBoard(direction=down,squaresX=12,squaresY=12)"
type="progid:DXImageTransform.Microsoft.CheckerBoard(direction=up,squaresX=12,squaresY=12)"
type="progid:DXImageTransform.Microsoft.Checkerboard(direction=down,squaresX=2,squaresY=2)"
type="progid:DXImageTransform.Microsoft.Checkerboard(direction=up,squaresX=2,squaresY=2)"
type="progid:DXImageTransform.Microsoft.Checkerboard(direction=down,squaresX=60,squaresY=60)"
type="progid:DXImageTransform.Microsoft.Checkerboard(direction=up,squaresX=60,squaresY=60)"

11.纵向棋盘效果 type="progid:DXImageTransform.Microsoft.CheckerBoard(direction=right,squaresX=12,squaresY=12)"
type="progid:DXImageTransform.Microsoft.CheckerBoard(direction=left,squaresX=12,squaresY=12)"
type="progid:DXImageTransform.Microsoft.Checkerboard(direction=right,squaresX=2,squaresY=2)"
type="progid:DXImageTransform.Microsoft.Checkerboard(direction=left,squaresX=2,squaresY=2)"
type="progid:DXImageTransform.Microsoft.Checkerboard(direction=right,squaresX=60,squaresY=60)"
type="progid:DXImageTransform.Microsoft.Checkerboard(direction=left,squaresX=60,squaresY=60)"

12.随机溶解效果 type="progid:DXImageTransform.Microsoft.RandomDissolve(enable=true)"

13.左右向中部收缩 type="progid:DXImageTransform.Microsoft.Barn(motion=in,orientation=vertical)"

14.中部向左右展开 type="progid:DXImageTransform.Microsoft.Barn(motion=out,orientation=vertical)"

15.上下向中部收缩 type="progid:DXImageTransform.Microsoft.Barn(motion=in,orientation=horizontal)"

16.中部向上下展开 type="progid:DXImageTransform.Microsoft.Barn(motion=out,orientation=horizontal)"

17.阶梯状向左下展开 type="progid:DXImageTransform.Microsoft.Strips(motion=leftdown)"

18.阶梯状向左上展开 type="progid:DXImageTransform.Microsoft.Strips(motion=leftup)"

19.阶梯状向右下展开 type="progid:DXImageTransform.Microsoft.Strips(motion=rightdown)"

20.阶梯状向右上展开 type="progid:DXImageTransform.Microsoft.Strips(motion=rightup)"

21.随机水平线效果 type="progid:DXImageTransform.Microsoft.RandomBars(orientation=horizontal)"

22.随机垂直线效果 type="progid:DXImageTransform.Microsoft.RandomBars(orientation=vertical)"

24.标准渐变转化效果 type="BlendTrans(enabled=true,percent=10)"

25.可调渐变转化效果 type="progid:DXImageTransform.Microsoft.Fade(enabled=ture,overlap=1.0)"

26.向右下插入效果 type="progid:DXImageTransform.Microsoft.Inset(enabled=ture)"

27.马赛克效果 type="progid:DXImageTransform.Microsoft.Pixelate(maxSquare=20)"

28.时钟形射线擦除 type="progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=clock)"
29.楔子形射线擦除 type="progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=wedge)"
30.辐射形射线擦除 type="progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=radial)"

31.隐藏式幻灯片效果 type="progid:DXImageTransform.Microsoft.Slide(slidestyle=hide,bands=1)"
type="progid:DXImageTransform.Microsoft.Slide(slidestyle=hide,bands=20)"
32.推动式幻灯片效果 type="progid:DXImageTransform.Microsoft.Slide(slidestyle=push,bands=1)"
type="progid:DXImageTransform.Microsoft.Slide(slidestyle=push,bands=20)"
33.交换式幻灯片效果 type="progid:DXImageTransform.Microsoft.Slide(slidestyle=swap,bands=1)"
type="progid:DXImageTransform.Microsoft.Slide(slidestyle=swap,bands=20)"

34.螺旋形收缩效果 type="progid:DXImageTransform.Microsoft.Spiral(gridSizeX=20,gridSizeY=20)"

35.隐藏式伸展效果 type="progid:DXImageTransform.Microsoft.Stretch(stretchstyle=hide)"
36.推动式伸展效果 type="progid:DXImageTransform.Microsoft.Stretch(stretchstyle=push)"
37.旋转式伸展效果 type="progid:DXImageTransform.Microsoft.Stretch(stretchstyle=spin)"

38.风车轮转动效果 type="progid:DXImageTransform.Microsoft.Wheel(spokes=20)"

39.梯度擦除效果 type="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=0,motion=forward)"
type="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=0,motion=reverse)"
type="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=1,motion=forward)"
type="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=1,motion=reverse)"

40.Z字形曲折效果 type="progid:DXImageTransform.Microsoft.Zigzag(gridSizeX=20,gridSizeY=20)"
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.