聊聊CSS滤镜转换

Css提供了许多功能强大的滤镜，给我们提供了非常便利的条件。其分为界面滤镜（Procedural Surfaces)静态滤镜(Static filters)和转换滤镜(Transitions)
*************************************************************************************
注：除了RevealTrans和BlendTrans外，其余的须在IE5.5+下才可正确运行！

barn滤镜
属性：
duration : 可选项。浮点数(Real)。设置或检索转换完成所用的时间。其值为秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 参数设置转换回放的持续时间。然而，当你一旦调用了 play 方法，在回放持续过程中 Duration 特性就变为只读特性。
motion : 可选项。字符串(String)。设置或检索对象的新内容是先从外显示还是先从内显示。out | in out : 默认值。转换从对象的中心向四边进行。
in : 转换从对象的四边向中心进行。
orientation : 可选项。字符串(String)。设置或检索滤镜效果模拟的开关门是横向的还是纵向的。vertical | horizontal vertical : 默认值。纵向线条转换。
horizontal : 横向线条转换。
小例子:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
<script language="javascript">
function show()
{
Yang.filters.item(0).apply();
Yang.src="http://iecn.net/forum/banners/csdn_120x60.gif";
Yang.filters.item(0).play();
}
</script>
</head>
<body onload="show()">
<img src="http://iecn.net/forum/images/iecn/logo.gif" name="Yang" style="filter:progid:DXImageTransform.Microsoft.Barn(duration=4)">
</body>
</html>

blinds滤镜
主要属性：
duration :可选项。浮点数(Real)。设置或检索转换完成所用的时间。其值为秒.毫秒(0.0000)格式＇
bands : 可选项。整数值(Integer)。设置或检索滤镜效果中有多少条百叶窗的窗格出现。取值范围为 1 - 100 。默认值为 10 。
Direction :可选项。字符串(String)。设置或检索百叶窗开关的方向。down | up | right | left
示例：
<html>
<head>
<script language=javascript>
function show()
{
Yang.filters.item(0).apply();
Yang.src="http://iecn.net/forum/banners/csdn_120x60.gif";
iecn.filters.item(0).play();
}
</script>
</head>
<body onload="show()">
<img src="http://iecn.net/forum/images/iecn/logo.gif" name="Yang"
style="filter:progid:DXImageTransform.Microsoft.Blinds(direction=down,duration=2,bands=13);
width:333;height:222;">
</body>
</html>

在页面页面进入和退出的特效中也可用到duration
页面进入和退出的特效
<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">
<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">

这个是页面被载入和调出时的一些特效。duration表示特效的持续时间，以秒为单位。transition表示使用哪种特效，取值为1-23:
　　0 矩形缩小
　　1 矩形扩大
　　2 圆形缩小
　　3 圆形扩大
　　4 下到上刷新
　　5 上到下刷新
　　6 左到右刷新
　　7 右到左刷新
　　8 竖百叶窗
　　9 横百叶窗
　　10 错位横百叶窗
　　11 错位竖百叶窗
　　12 点扩散
　　13 左右到中间刷新
　　14 中间到左右刷新
　　15 中间到上下
　　16 上下到中间
　　17 右下到左上
　　18 右上到左下
　　19 左上到右下
　　20 左下到右上
　　21 横条
　　22 竖条
　　23 以上22种随机选择一种

checkerboard滤镜

duration :可选项。浮点数(Real)。设置或检索转换完成所用的时间。其值为秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 参数设置转换回放的持续时间。然而，当你一旦调用了 play 方法，在回放持续过程中 Duration 特性就变为只读特性。
squaresX :可选项。整数值(Integer)。设置或检索滤镜效果中横向有多少条。取值范围为 >=2 。默认值为 12 。任何小于 2 的值都会被转为默认值 12 。
squaresY :可选项。整数值(Integer)。设置或检索滤镜效果中纵向有多少条。取值范围为 >=2 。默认值为 10 。任何小于 2 的值都会被转为默认值 10 。
Direction :可选项。字符串(String)。设置或检索网格推拉的方向。down | up | right | left down:向下。
up :向上。
right :默认值。向右。
left :向左。
<html>
<head>
<script language=javascript>
function show()
{
Yang.filters.item(0).apply();
Yang.src="http://iecn.net/forum/banners/csdn_120x60.gif";
Yang.filters.item(0).play();
}
</script>
</head>
<body onload="show()">
<img src="http://iecn.net/forum/images/iecn/logo.gif" name="Yang"
style="filter:progid:DXImageTransform.Microsoft.Checkerboard(direction=right,duration=2);
width:333;height:222;">
</body>
</html>

Fade滤镜
属性：
duration :可选项。浮点数(Real)。设置或检索转换完成所用的时间。其值为秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 参数设置转换回放的持续时间。然而，当你一旦调用了 play 方法，在回放持续过程中 Duration 特性就变为只读特性。
overlap :可选项。浮点数(Real)。设置或检索在转换进程中源内容和目标内容都被显示的比例。取值范围为 0.0 - 1.0 。默认值为 1.0 。
假如此属性值设为 0.4,duration 属性值设为 10 ，则转换会发生下属行为：
前三秒，源对象开始隐出。随后的四秒，源对象完全隐出，新内容同时隐入。最后三秒，新内容完全隐入
示例:

<html>
<head>
<script language=javascript>
function show()
{
Yang.filters.item(0).apply();
Yang.src="http://iecn.net/forum/banners/csdn_120x60.gif";
Yang.filters.item(0).play();
}
</script>
</head>
<body onload="show()">
<img src="http://iecn.net/forum/images/iecn/logo.gif" name="Yang"
style="filter:progid:DXImageTransform.Microsoft.Fade(duration=2);
width:333;height:222;">
</body>
</html>

GradientWipe滤镜
属性：
duration :可选项。浮点数(Real)。设置或检索转换完成所用的时间。其值为秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 参数设置转换回放的持续时间。然而，当你一旦调用了 play 方法，在回放持续过程中 Duration 特性就变为只读特性。
gradientSize :可选项。浮点数(Real)。设置或检索对象内容被梯度渐隐条覆盖的百分比。取值范围为 0.0 - 1.0 。默认值为 0.25 。
motion :可选项。字符串(String)。设置或检索对象内容出现的方向是依据 WipeStyle 特性的设定，还是取反。forward | reverse forward :默认值。对象内容依据 WipeStyle 特性设定的流向出现。
reverse :对象内容依据 WipeStyle 特性设定的流向的反方向出现。

例如:
<html>
<head>
<script language=javascript>
function show()
{
Yang.filters.item(0).apply();
Yang.src="http://iecn.net/forum/banners/csdn_120x60.gif";
Yang.filters.item(0).play();
}
</script>
</head>
<body onload="show()">
<img src="http://iecn.net/forum/images/iecn/logo.gif" name="Yang"
style="filter:progid:DXImageTransform.Microsoft.GradientWipe(duration=3,gradientSize=0.5);
width:333;height:222;">
</body>
</html>

Inset滤镜
属性：
duration : 可选项。浮点数(Real)。设置或检索转换完成所用的时间。其值为秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 参数设置转换回放的持续时间。然而，当你一旦调用了 play 方法，在回放持续过程中 Duration 特性就变为只读特性。

[Code:]
<html>
<head>
<script language=javascript>
function show()
{
Yang.filters.item(0).apply();
Yang.src="http://iecn.net/forum/banners/csdn_120x60.gif";
Yang.filters.item(0).play();
}
</script>
</head>
<body onload="show()">
<img src="http://iecn.net/forum/images/iecn/logo.gif" name="Yang"
style="filter:progid:DXImageTransform.Microsoft.Inset();
width:333;height:222;">
</body>
</html>

Pixelate滤镜
属性：
duration :可选项。浮点数(Real)。设置或检索转换完成所用的时间。其值为秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 参数设置转换回放的持续时间。然而，当你一旦调用了 play 方法，在回放持续过程中 Duration 特性就变为只读特性。
maxSquare :可选项。整数值(Integer)。设置或检索转换中矩形色块的最大宽度。取值范围为 2 - 50 。默认值为 50 。

[Code:]
<html>
<head>
<script language=javascript>
function show()
{
Yang.filters.item(0).apply();
Yang.src="http://iecn.net/forum/banners/csdn_120x60.gif";
Yang.filters.item(0).play();
}
</script>
</head>
<body onload="show()">
<img src="http://iecn.net/forum/images/iecn/logo.gif" name="Yang"
style="filter:progid:DXImageTransform.Microsoft.Pixelate();
width:333;height:222;">
</body>
</html>

RadialWipe滤镜
属性：
duration :可选项。浮点数(Real)。设置或检索转换完成所用的时间。其值为秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 参数设置转换回放的持续时间。然而，当你一旦调用了 play 方法，在回放持续过程中 Duration 特性就变为只读特性。
wipeStyle :可读写。字符串(String)。设置或检索转换所使用的擦除方式。CLOCK | WEDGE | RADIAL CLOCK : 默认值。围绕对象的中心，自上方开始，顺时针旋转擦除。
WEDGE :围绕对象的中心，自上方开始，同时向两边旋转擦除。
RADIAL : 以对象的左上角为圆心旋转擦除。

[Code:]
<html>
<head>
<script language=javascript>
function show()
{
Yang.filters.item(0).apply();
Yang.src="http://iecn.net/forum/banners/csdn_120x60.gif";
Yang.filters.item(0).play();
}
</script>
</head>
<body onload="show()">
<img src="http://iecn.net/forum/images/iecn/logo.gif" name="Yang"
style="filter:progid:DXImageTransform.Microsoft.RadialWipe(duration=2,wipestyle=1);
width:333;height:222;">
</body>
</html>

RandomBars滤镜

属性：
duration :可选项。浮点数(Real)。设置或检索转换完成所用的时间。其值为秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 参数设置转换回放的持续时间。然而，当你一旦调用了 play 方法，在回放持续过程中 Duration 特性就变为只读特性。
orientation :可读写。字符串(String)。设置或检索转换所使用的随机线条是横向的还是纵向的。horizontal | vertical horizontal :默认值。横向线条。
vertical :纵向线条。

[Code:]
<html>
<head>
<script language=javascript>
function show()
{
Yang.filters.item(0).apply();
Yang.src="http://iecn.net/forum/banners/csdn_120x60.gif";
Yang.filters.item(0).play();
}
</script>
</head>
<body onload="show()">
<img src="http://iecn.net/forum/images/iecn/logo.gif" name="Yang"
style="filter:progid:DXImageTransform.Microsoft.RandomBars(duration=2);
width:333;height:222;">
</body>
</html>

RandomDissolve滤镜
属性：
duration :可选项。浮点数(Real)。设置或检索转换完成所用的时间。其值为秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 参数设置转换回放的持续时间。然而，当你一旦调用了 play 方法，在回放持续过程中 Duration 特性就变为只读特性。
[Code:]
<html>
<head>
<script language=javascript>
function show()
{
Yang.filters.item(0).apply();
Yang.src="http://iecn.net/forum/banners/csdn_120x60.gif";
iecn.filters.item(0).play();
}
</script>
</head>
<body onload="show()">
<img src="http://iecn.net/forum/images/iecn/logo.gif" name="Yang"
style="filter:progid:DXImageTransform.Microsoft.RandomDissolve();
width:333;height:222;">
</body>
</html>

Slide滤镜

属性：
duration :可选项。浮点数(Real)。设置或检索转换完成所用的时间。其值为秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 参数设置转换回放的持续时间。然而，当你一旦调用了 play 方法，在回放持续过程中 Duration 特性就变为只读特性。
bands :可选项。整数值(Integer)。设置或检索滤镜效果中有多少滑条被抽离。取值范围为 1 - 100 。默认值为 1 。
slideStyle :可选项。字符串(String)。设置或检索滑条抽离效果的方式。HIDE | PUSH | SWAP HIDE : 默认值。在新内容上抽离旧内容。
PUSH :抽离旧内容时同步同向拉进新内容。
SWAP :在抽离的同时交换新旧内容。
<html>
<head>
<script language=javascript>
function show()
{
iecn.filters.item(0).apply();
iecn.src="http://iecn.net/forum/banners/csdn_120x60.gif";
iecn.filters.item(0).play();
}
</script>
</head>
<body onload="show()">
<img src="http://iecn.net/forum/images/iecn/logo.gif" name="iecn"
style="filter:progid:DXImageTransform.Microsoft.Slide( duration=2,bands=5,slideStyle=PUSH);
width:333;height:222;">
</body>
</html>

Spiral滤镜
属性：
duration : 可选项。浮点数(Real)。设置或检索转换完成所用的时间。其值为秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 参数设置转换回放的持续时间。然而，当你一旦调用了 play 方法，在回放持续过程中 Duration 特性就变为只读特性。
gridSizeX :可选项。整数值(Integer)。设置或检索滤镜效果中横向盘旋多少次。取值范围为 1 - 100 。默认值为 16 。
gridSizeY :可选项。整数值(Integer)。设置或检索滤镜效果中纵向盘旋多少次。取值范围为 1 - 100 。默认值为 16 。

<html>
<head>
<script language=javascript>
function show()
{
iecn.filters.item(0).apply();
iecn.src="http://iecn.net/forum/banners/csdn_120x60.gif";
iecn.filters.item(0).play();
}
</script>
</head>
<body onload="show()">
<img src="http://iecn.net/forum/images/iecn/logo.gif" name="iecn"
style="filter:progid:DXImageTransform.Microsoft.Spiral(duration=1,gridSizeX=5,gridSizeY=2 );
width:333;height:222;">
</body>
</html>

Stretch滤镜
属性：
duration :可选项。浮点数(Real)。设置或检索转换完成所用的时间。其值为秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 参数设置转换回放的持续时间。然而，当你一旦调用了 play 方法，在回放持续过程中 Duration 特性就变为只读特性。
stretchStyle : 可读写。字符串(String)。设置或检索拉伸变形转换的方式。SPIN | HIDE | PUSH SPIN : 默认值。在旧内容上自中心向左右两边拉伸新内容。
HIDE :在旧内容上自左向右拉伸(缩)新内容。
PUSH : 自左向右拉伸新内容近来同时挤压旧内容出去。这种转换方式的视觉效果类似立方体从一面转到另一面。

<html>
<head>
<script language=javascript>
function show()
{
iecn.filters.item(0).apply();
iecn.src="http://iecn.net/forum/banners/csdn_120x60.gif";
iecn.filters.item(0).play();
}
</script>
</head>
<body onload="show()">
<img src="http://iecn.net/forum/images/iecn/logo.gif" name="iecn"
style="filter:progid:DXImageTransform.Microsoft.Stretch ( duration=2,stretchStyle=SPIN ) ;width:333;height:222;">
</body>
</html>

Strips滤镜
属性：
duration : 可选项。浮点数(Real)。设置或检索转换完成所用的时间。其值为秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 参数设置转换回放的持续时间。然而，当你一旦调用了 play 方法，在回放持续过程中 Duration 特性就变为只读特性。
motion : 可读写。字符串(String)。设置或检索转换新内容从哪一个角开始。leftdown | leftup | rightdown | Prightup leftdown : 默认值。从左下角到右上角。
leftup : 从左上角到右下角。
rightdown : 从右下角到左上角。
rightup : 从右上角到左下角。
<html>
<head>
<script language=javascript>
function show()
{
iecn.filters.item(0).apply();
iecn.src="http://iecn.net/forum/banners/csdn_120x60.gif";
iecn.filters.item(0).play();
}
</script>
</head>
<body onload="show()">
<img src="http://iecn.net/forum/images/iecn/logo.gif" name="iecn"
style="filter:progid:DXImageTransform.Microsoft.Strips() ;width:333;height:222;">
</body>
</html>

Wheel滤镜

属性：
duration : 可选项。浮点数(Real)。设置或检索转换完成所用的时间。其值为秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 参数设置转换回放的持续时间。然而，当你一旦调用了 play 方法，在回放持续过程中 Duration 特性就变为只读特性。
spokes : 可读写。整数值(Integer)。设置或检索风车叶轮数目。取值范围为 2 - 20 。默认值为 4 。
<html>
<head>
<script language=javascript>
function show()
{
iecn.filters.item(0).apply();
iecn.src="http://iecn.net/forum/banners/csdn_120x60.gif";
iecn.filters.item(0).play();
}
</script>
</head>
<body onload="show()">
<img src="http://iecn.net/forum/images/iecn/logo.gif" name="iecn"
style="filter:progid:DXImageTransform.Microsoft.wheel() ;width:333;height:222;">
</body>
</html>

Zigzag滤镜

属性：
duration : 可选项。浮点数(Real)。设置或检索转换完成所用的时间。其值为秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 参数设置转换回放的持续时间。然而，当你一旦调用了 play 方法，在回放持续过程中 Duration 特性就变为只读特性。
gridSizeX : 可选项。整数值(Integer)。设置或检索滤镜效果中横向盘旋多少次。取值范围为 1 - 100 。默认值为 16 。
gridSizeY : 可选项。整数值(Integer)。设置或检索滤镜效果中纵向盘旋多少次。取值范围为 1 - 100 。默认值为 16 。
<html>
<head>
<script language=javascript>
function show()
{
iecn.filters.item(0).apply();
iecn.src="http://iecn.net/forum/banners/csdn_120x60.gif";
iecn.filters.item(0).play();
}
</script>
</head>
<body onload="show()">
<img src="http://iecn.net/forum/images/iecn/logo.gif" name="iecn"
style="filter:progid:DXImageTransform.Microsoft.Zigzag() ;width:333;height:222;">
</body>
</html>

posted on 2005-11-08 17:35 飞扬阅读(540) 评论(0) 编辑收藏

新用户注册刷新评论列表


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻知识库 C++博客博问管理

导航

文章分类(10)

收藏夹(2)

随笔档案(10)

文章档案(12)

统计

FAQ网站

JSP/Java/Servlet开发工具

JSP/Java/Servlet技术著名网站

JSP/Servlet应用程序站点

优选博客