当前位置: 代码迷 >> 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)"
  相关解决方案