【学习笔记】CSS动态滤镜 -

funzhang2010

浏览: 14508 次

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

【学习笔记】CSS动态滤镜

博客分类：

css 滤镜动态

自W3C公布了样式单（CSS）的标准以来，HTML的每一部分开始以元素的形式出现，并且事件开始真正被引入页面，动态HTML成为了人们讨论的热点。实际上，W3C采用的标准即为微软的DOM，也就是说IE4.0可以更好的支持CSS，并且微软对CSS还进行了许多十分有益地探索，Filter就是一个很好的例子。

众所周知，Javascript或Vbscript作为脚本语言，其功能是不完善的，有许多高级语言的功能无法实现，如图象的处理功能。Filter是微软对CSS的扩展，与PhotoShop中的滤镜概念相似，它可以用很简单的方法对页面中的文字特效作出特效处理，静态如阴影、模糊的效果，动态如各种淡入淡出效果。

如果你使用过图形软件的话，视觉滤镜这个概念你一定不会感到陌生。你可以选择一个图形，让计算机对其进行模糊过滤，或者将有些文字或图象反转处理。要想实现这些技巧，你得将需要变化的内容以位图形式输入你的图象处理软件，应用相应的过滤器，然后及其以GIF或JPEG格式发布。

但是生成文字的图象格式会破坏原有文字的存储格式并且会延长下载的时间。生命的一分一秒被消耗在下载的漫长等待之中实在是一种残忍的折磨和享受。但是你需要为你的标题添加一点漂亮的蓝色下落阴影，并且在其四周环绕以红色的光晕。好吧，我们就给它加上一个漂亮的修饰。

有时候当图象下载到客户端时你需要对图象做一些变化，比如加一个移动模糊让其“神经质”地滑过屏幕。不要怕，CSS图象过滤器将帮助你实现你的愿望（但是现在只能在微软IE 4.0上实现这些功能）。

● 1．CSS静态滤镜样式（filter）（只有IE4.0以上支持）

CSS静态滤镜样式的使用方法：{ filter : filtername( parameters1, parameters2, ...) }

Filter样式简要说明支持参数

alpha 设置图片或文字的不透明度 opacity、finishOpacity、style、startX、startY、finishX、finishY、add、direction、strength

blur 在指定的方向和位置上产生动感模糊效果 add、direction、strength

chroma 对所选择的颜色进行透明处理 color

dropShadow 在指定的方向和位置上产生阴影 color、offX、offY、positive

flipH 沿水平方向翻转对象

flipV 沿垂直方向翻转对象

glow 在对象周围上发光 color、strength

gray 将对象以灰度处理

invert 逆转对象颜色

light 对对象进行模拟光照

mask 对对象生成掩膜 color

shadow 沿对象边缘产生阴影 color、direction

wave 在垂直方向产生正弦波形 add、freq、lightStrength、phase、strength

xray 改变对象颜色深度，并绘制黑白图象

以上就是静态滤镜的全部内容，要注意的是CSS是区分大小写的！

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

滤镜目前还未被W3C正式承认。滤镜只是微软IE浏览器的组成部分，不能用于Netscape浏览器。制定有关标准的组织正在就此进行讨论，但尚未达成最后定论。在我看来，滤镜是一种非常有趣而且是制作精彩的视觉效果必不可少的一部分。滤镜能节省带宽，而且是你能在制作奇妙的

视觉设计时使用文字格式，而不必先制作庞大的文字位图以取得相同的效果。

但由于这些功能尚未成为HTML的正式组成部分，所以并不是所有的浏览器都能看到这些特色。有些时候，你必须考虑以传统的方式制作相同的效果，当然，你不得不继续将庞大的GIF文件塞到网页之中。

Javascript中filters[0]的诠释

动态滤镜

　　动态滤镜可以为页面添加动人的淡入淡出、图象转化效果，它可以分为两种blend（混合）和reveal（显示），前者可以使对象渐渐消失或出现，后者提供了24种图象转化的效果。对于动态滤镜的调用除去象在静态滤镜中要定义的滤镜类型，参数等等，还用到脚本语言控制它的状态，首先，在开始一个动态效果之前，先需要进行装备（Apply），然后播放（Play）动态效果，在动态效果进行中还可以中断动态效果（Stop），以上可以用下面的方法实现：

对象名.filters(滤镜数值).Apply()
对象名.filters(滤镜数值).Play()
对象名.filters(滤镜数值).Stop()

　　对于滤镜状态的判断可以通过“对象名.filters(滤镜数值).status”判断，该值为0时，表示滤镜未执行，为1时，表示滤镜已经完成，为2时表示滤镜在执行中。

filters[0] 就是动态虑镜的一种状态表示此虑镜是开启的"[]"中"0"就一个值大家用的时候就直接写0就行,如果非要把它理解成虑镜组中的第一个虑镜也行.

<html>

<head>

<style>

{

width:50%;

}

</style>

</head>

<body>

<p>注释：如果元素的 width 属性没有设置，那么滤镜不会起作用。</p>

</body>

</html>

今天看了下css动态滤镜，写在这里，加强记忆！

1：css动态滤镜有blendtrans淡入或淡出和revealtrans 23种图片转换效果(字母不区分大小写):

blendtrans用法：blendtrans （duration=以秒为单位的时间自然数）

revealtrans用法：revealtrans （duration=以秒为单位的时间自然数,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：动态转换滤镜的属性、方法和事件：

　　看到属性、方法、事件这三个东西，你一定会想到编程，没错，要使用这两个高级滤镜，你必须要用Scripts程序，什么VBScripts或是JavaScripts都可以。下面，我们来介绍一下转换滤镜的属性、方法和事件。请看下面的几个表格。

属性表
属性名	说明	取值
duration	图像转换的延迟时间，最小单位是毫秒，也就是小数点后第三位。	单位是秒，取值自然数
enabled	指定是否应用滤镜效果	0表示不应用，非0表示就用。
staus	传回一个转换状态	0表示转换停止 1表示显示应用的转换滤镜 2表示正在转换中

方法表
方法名	说明
Apply	将滤镜应用到对象上
Play	开始转换
Stop	停止转换

事件表
事件名	说明
OnFilterChange	当滤镜转变发生改变或是滤镜完成时所触发的事件

3、动态滤镜的应用演示

混合转换滤镜的演示：	显示转换滤镜的演示：

你只要在图片上单击，就可以看见效果了。效果展示完以后，如果你还想看的话，那么请你刷新一下网页。
代码如下所示： <html> <head> <script language="JavaScript"> //滤镜应用的步骤 function startTrans() { window.defaultStatus=SampleID.filters.blendTrans.status; //指定应用混合转换滤镜 SampleID.filters.blendTrans.Apply(); //转换后的图像文件名称 SampleID.src = "photo1.jpg"; //开始执行混合滤镜 SampleID.filters.blendTrans.Play(); } //滤镜结束时, 显示讯息对话框 function finishTrans() { if (SampleID.filters.blendTrans.Status == 0) alert("滤镜展示完毕"); } function doTrans() { theImg.filters.item(0).Apply(); theImg.src="photo1.jpg"; theImg.filters.item(0).Play(); } </script></head> <body bgcolor="#FFFFFF"> <img ID="SampleID" src="tr0512photo.jpg" style=" filter:blendTrans(duration=3)" onclick="startTrans()" onFilterChange="finishTrans()" width="225" height="180"> <img ID="theImg" src="tr0512photo.jpg" style="filter:revealTrans(Duration=3.3, Transition=8)" onClick="doTrans()" onFilterChange="finishTrans()" width="225" height="180"> </body> </html>

　　怎么要，是不是感受到了比较强大的功能，还只要写上一小段程序，不赖吧。

图片如何应用CSS的滤镜的效果

有时候，我们需要给网页中的图片加一些特殊的效果，比如透明、扭曲、阴影或者翻转等，我们一般都会想到用Photoshop等一些图形软件来处理，其实我们也可以利用CSS(层叠式样表)提供的一些滤镜来处理，这对于不熟悉Photoshop的网友来说，是非常好的一件事。

我们先从较简单的开始，介绍几个没有参数的滤镜。

1.Gray滤镜
Gray滤镜的作用是产生黑白效果
使用方法：<img src="a.gif" style="filter:gray">

2.Invert滤镜
Invert滤镜的作用是反色效果
使用方法：<img src="a.gif" style="filter:invert">

3.Xray滤镜
Xray滤镜的作用是产生X光效果
使用方法：<img src="a.gif" style="filter:xray">

4.fliph和flipv
fliph滤镜的作用是产生水平翻转效果；flipv滤镜的作用是产生垂直翻转效果
使用方法：<img src="a.gif" style="filter:fliph">或<img src="a.gif" style="filter:flipv">

接下来，我们再介绍几个比较复杂的滤镜：

5.alpha滤镜
alpha滤镜作用主要是对图片的透明度进行处理
使用方法：<img src="a.gif" style="filter:alpha(opacity=value1,finishopacity=value2,style=value3)">
说明：value1为图片的透明值，范围是0（完全透明）～100（完全不透明）
value2为图片透明度变换结束时的透明值，范围是0（完全透明）～100（完全不透明）注：该值只有在value3设定时才有效
value3为图片透明度变换方向。取值为1时，图片透明度按从左到右线性变化；取值为2时，图片透明度从内到外沿半径变化；取值为3时，图片透明度从内到外呈矩形变化
例：<img src="a.gif" style="filter:alpha(opacity=0,finishopacity=60,style=2)">

6.shadow滤镜
shadow滤镜的作用是产生阴影效果
使用方法：<img src="a.gif" style="filter:shadow(color=value1,direction=value2)">
说明：value1为阴影的颜色值，如000000表示黑色
value2为光线照射角度，如135
例：<img src="a.gif" style="filter:shadow(color=000000,direction=135)">

7.wave滤镜
wave滤镜的作用是使图片产生扭曲效果
使用方法：<img src="a.jpg" style="filter:wave(add=value1,freq=value2,lightstrength=value3,phase=value4,strength=value5)">
说明：value1的取值为1时，将原图片增加到处理过的图片上；为0时，则不增加
value2为视觉扭曲的波浪数
value3是波形亮度百分比，取值范围为0～100
value4为正弦波开始偏移的初始量，取值范围为0～100
value5为波形效果的强度
例：<img src="a.jpg" style="filter:wave(add=0,freq=5,lightstrength=50,phase=0,strength=5)">

下面我们举一个简单的例子，浏览时会出现这样的一个效果：网页上有一个几乎透明的图像，当鼠标移到图像上时，图像慢慢变清晰；当鼠标移开时，图像又恢复到原来的透明状态。
要实现这个功能，需要使用到CSS的alpha滤镜，并用javascript来控制alpha滤镜的Opacity值，首现在网页中插入一个图片，并设定alpha滤镜的opacity值，让图片透明，图片代码为：<img src="a.gif" id="me" style="FILTER:alpha(Opacity=20)">.

javascript代码如下：
<script language="javascript">
function ch(n)
{
if(n=="add") //如果传入的参数为add，则将图片的不透明度增大
if(me.filters.alpha.Opacity<100)
{
me.filters.alpha.Opacity=me.filters.alpha.Opacity+5;
setTimeout("ch('add')",10);
}

if(n=="dec") //如果传入的参数为dec，则将图片的不透明度降低
if(me.filters.alpha.Opacity>20)
{
me.filters.alpha.Opacity=me.filters.alpha.Opacity-5;
setTimeout("ch('adc')",10);
}
}
</script>

将上面的代码加入<head></head>中，然后给图片加入onMouseOver和onMouseOut动作，即<img src="a.gif" id="me" style="FILTER:alpha(Opacity=20)" onMouseOver="ch('add')" onMouseOut="ch('dec')">.
好了，关于CSS滤镜我们就介绍到这里，相信各位开动脑子，一定会做出更好的效果。

CSS滤镜详解

语法：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