加载中…
个人资料
静竹
静竹
  • 博客等级:
  • 博客积分:0
  • 博客访问:36,917
  • 关注人气:16
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
谁看过这篇博文
加载中…
正文 字体大小:

css 的 filter简介

(2010-04-09 10:55:56)
标签:

杂谈

分类: 代码

滤镜目前还未被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参数值
矩形从大至小                  随机溶解            12
矩形从小至大                从上下向中间展开      13
圆形从大至小                从中间向上下展开      14
圆形从小至大                从两边向中间展开      15
向上推开                    从中间向两边展开      16
向下推开                    从右上向左下展开      17
向右推开                    从右下向左上展开      18
向左推开                    从左上向右下展开      19
垂直形百叶窗                从左下向右上展开      20
水平形百叶窗                  随机水平细纹        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)"

0

阅读 评论 收藏 转载 喜欢 打印举报/Report
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4000520066 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有