`
AngelAndAngel
  • 浏览: 235524 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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)"
分享到:
评论

相关推荐

    CSS滤镜效果介绍.pdf

    标题中的“CSS滤镜效果介绍”指的是CSS中的滤镜(Filter)特性,它允许开发者对网页元素应用视觉效果,如模糊、颜色调整等。描述中提到了CSS静态滤镜样式和动态滤镜,两者都是CSS滤镜的不同使用方式。 1. **CSS静态...

    CSS滤镜效果大全

    ### CSS滤镜效果大全 #### 一、Alpha滤镜 - 设置透明度 Alpha滤镜用于控制元素的透明度。此滤镜提供了丰富的参数配置来实现不同程度的透明效果,包括简单的透明度调整到复杂的渐变透明。 - **表达格式**: ```...

    css 滤镜大全,全部css滤镜

    在给定的文件中,提到了一系列的CSS滤镜效果,接下来将对这些滤镜进行详细的解释和说明。 ### Alpha(透明度) Alpha滤镜用于调整元素的透明度。`Opacity`参数控制初始透明度,取值范围为0到100,其中0表示完全...

    精通CSS滤镜,精通CSS滤镜

    这些滤镜效果可以在不使用图像编辑软件的情况下直接在网页上实时调整,大大提升了设计师的灵活性。 二、基本语法 CSS滤镜的语法非常直观,通常是以`filter:`属性开始,后面跟着一个或多个滤镜函数。例如,要应用...

    css部分滤镜效果代码

    本篇将详细介绍CSS滤镜效果以及如何在实际项目中应用它们。 1. CSS滤镜基础 CSS滤镜效果主要通过`filter`属性实现,该属性允许我们应用一系列图像处理效果。滤镜功能在现代浏览器中得到广泛支持,但要注意老版本的...

    css自动生成滤镜效果

    其中,CSS滤镜功能为设计师提供了丰富的手段来增强和改变元素的视觉表现。本文将深入探讨“css自动生成滤镜效果”的相关知识点,以及如何使用“微软滤镜调配器”这一工具。 一、CSS滤镜概述 CSS滤镜允许开发者对...

    CSS滤镜在网页设计中的应用.rar

    在网页设计领域,CSS滤镜是一种强大的工具,它允许开发者通过简单的代码实现各种视觉效果,如图像模糊、颜色调整、渐变、光照等,极大地提升了网页的视觉吸引力和用户体验。本篇将深入探讨CSS滤镜的应用,包括其基本...

    css滤镜中文手册 css滤镜大全

    CSS滤镜是Internet Explorer浏览器特有的功能,允许开发者对网页元素进行视觉效果的处理,比如调整颜色、透明度、模糊等。手册中详述的`filters`属性是一个DHTML Object Model的数组集合,可以通过`object.filters`...

    CSS 滤镜效果(查询用)

    以上就是关于CSS滤镜效果的相关知识点介绍,这些滤镜可以帮助开发者轻松地为页面元素添加各种视觉效果,增强网页的交互性和美观性。需要注意的是,部分滤镜属性可能仅在某些浏览器版本中支持,使用时应确保兼容性。

    css滤镜效果实例丛书

    本文将详细介绍几种常见的CSS滤镜效果及其应用方法。 #### 二、CSS滤镜基础知识 **1. 基本概念** CSS滤镜是一种可以应用于HTML元素的视觉效果处理方式。它可以模拟图像处理软件(如Photoshop)中的某些滤镜效果,...

    CSS滤镜使用教程

    压缩包内的.gif文件可能是用于展示不同滤镜效果的示例图像,而.htm文件则可能是包含CSS滤镜应用的代码示例。通过查看这些文件,你可以更直观地理解每个滤镜的效果和用法。 总的来说,掌握CSS滤镜可以极大地丰富你的...

    滤镜CSS3效果

    还有一些其他常见的滤镜效果,如`brightness()`, `contrast()`, `saturate()`, `hue-rotate()`以及`invert()`等,可以改变元素的亮度、对比度、饱和度、色调旋转或颜色反转。此外,`opacity()`可以调整元素的透明度...

    Dreamweaver中CSS滤镜的功能和参数设置

    在Dreamweaver中,CSS滤镜是一种强大的工具,允许开发者为网页元素添加各种视觉效果,如透明度、模糊、阴影、翻转等。通过CSS滤镜,你可以增强网页的视觉吸引力,创造出各种独特的视觉体验。以下是一些主要的CSS滤镜...

    漂亮的CSS滤镜按钮

    创建漂亮的CSS滤镜按钮涉及到HTML基础、CSS样式定制、滤镜效果应用、交互状态处理以及响应式设计等多个方面。通过熟练掌握这些知识点,开发者可以设计出既美观又功能丰富的按钮,提升网页的视觉吸引力和用户体验。在...

    精通CSS滤镜.chm + CSS中文教程.exe

    这个文件可能会涵盖CSS滤镜的各种类型、用法、示例以及最佳实践,帮助读者掌握如何使用滤镜来实现各种视觉效果,如模糊、饱和度调整、颜色转换等。 "CSS中文教程.exe"则可能是一个交互式的教学程序,以中文界面提供...

    css滤镜filter中文手册

    **CSS滤镜(Filter)详解** CSS滤镜(Filter)是一种强大的工具,它允许开发者对网页元素的视觉表现进行各种效果处理,如模糊、灰度、饱和度调整、颜色变化等。在本中文手册中,我们将深入探讨CSS滤镜的各种属性和...

    CSS3滤镜效果动画生成器 Css Filterlab.rar

    使用方法很简单,点击 Add Filter 按钮就可以看到当前 CSS3 所支持的所有滤镜效果了。 点击不同的滤镜效果就可以添加各种参数了,效果会即时的显示在右边的界面中,参数有点类似 Photoshop 的图层效果,具有一定的...

    15种CSS滤镜例子,(全)

    以上就是15种CSS滤镜效果的简要介绍。在实际应用中,开发者可以根据需要,结合不同的滤镜和属性,创造出更加复杂和富有创意的视觉效果。在提供的压缩包文件中,你将找到这些效果的示例代码,通过实践和调整,你可以...

    CSS教程【CSS样式CSS滤镜】CHM版

    CSS滤镜是一种可以对网页元素进行图像处理的技术,常用于图片效果的增强或者创建特殊视觉效果。滤镜主要在CSS3中引入,目前在现代浏览器中广泛支持。常见的CSS滤镜有: - `blur()`: 使元素模糊。 - `brightness()`:...

    CSS滤镜.

    CSS滤镜是一种在Web设计中使用的工具,它允许开发者对网页元素应用视觉效果,比如模糊、阴影、发光等。CSS滤镜是通过filter属性来实现的,这个属性提供了多种不同的视觉效果选项。以下是一些主要的知识点: 1. ...

Global site tag (gtag.js) - Google Analytics