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="Yang.filters.item(0).play();
}
</script>
</head>
<body onload="show()">
<img src="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="Yang.filters.item(0).play();
}
</script>
</head>
<body onload="show()">
<img src="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="Yang.filters.item(0).play();
}
</script>
</head>
<body onload="show()">
<img src="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="Yang.filters.item(0).play();
}
</script>
</head>
<body onload="show()">
<img src="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="iecn.filters.item(0).play();
}
</script>
</head>
<body onload="show()">
<img src="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="iecn.filters.item(0).play();
}
</script>
</head>
<body onload="show()">
<img src="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="iecn.filters.item(0).play();
}
</script>
</head>
<body onload="show()">
<img src="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="iecn.filters.item(0).play();
}
</script>
</head>
<body onload="show()">
<img src="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="iecn.filters.item(0).play();
}
</script>
</head>
<body onload="show()">
<img src="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="iecn.filters.item(0).play();
}
</script>
</head>
<body onload="show()">
<img src="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="iecn.filters.item(0).play();
}
</script>
</head>
<body onload="show()">
<img src="style="filter:progid:DXImageTransform.Microsoft.Zigzag() ;width:333;height:222;">
</body>
</html>