Css提供了許多功能強(qiáng)大的濾鏡，給我們提供了非常便利的條件。其 分為界面濾鏡（Procedural Surfaces)靜態(tài)濾鏡(Static filters)和轉(zhuǎn)換濾鏡(Transitions)
*************************************************************************************
注：除了RevealTrans和BlendTrans外，其余的須在IE5.5+下才可正確運(yùn)行！
barn濾鏡
屬性：
duration : 可選項(xiàng)。浮點(diǎn)數(shù)(Real)。設(shè)置或檢索轉(zhuǎn)換完成所用的時(shí)間。其值為秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 參數(shù)設(shè)置轉(zhuǎn)換回放的持續(xù)時(shí)間。然而，當(dāng)你一旦調(diào)用了 play 方法，在回放持續(xù)過(guò)程中 Duration 特性就變?yōu)橹蛔x特性。
motion : 可選項(xiàng)。字符串(String)。設(shè)置或檢索對(duì)象的新內(nèi)容是先從外顯示還是先從內(nèi)顯示。out | in out : 默認(rèn)值。轉(zhuǎn)換從對(duì)象的中心向四邊進(jìn)行。
in : 轉(zhuǎn)換從對(duì)象的四邊向中心進(jìn)行。
orientation : 可選項(xiàng)。字符串(String)。設(shè)置或檢索濾鏡效果模擬的開(kāi)關(guān)門是橫向的還是縱向的。vertical | horizontal vertical : 默認(rèn)值。縱向線條轉(zhuǎn)換。
horizontal : 橫向線條轉(zhuǎn)換。
小例子:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建網(wǎng)頁(yè) 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 :可選項(xiàng)。浮點(diǎn)數(shù)(Real)。設(shè)置或檢索轉(zhuǎn)換完成所用的時(shí)間。其值為秒.毫秒(0.0000)格式 ＇
bands : 可選項(xiàng)。整數(shù)值(Integer)。設(shè)置或檢索濾鏡效果中有多少條百葉窗的窗格出現(xiàn)。取值范圍為 1 - 100 。默認(rèn)值為 10 。
Direction :可選項(xiàng)。字符串(String)。設(shè)置或檢索百葉窗開(kāi)關(guān)的方向。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>
在頁(yè)面頁(yè)面進(jìn)入和退出的特效中也可用到duration
頁(yè)面進(jìn)入和退出的特效
<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">
<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">
這個(gè)是頁(yè)面被載入和調(diào)出時(shí)的一些特效。duration表示特效的持續(xù)時(shí)間，以秒為單位。transition表示使用哪種特效，取值為1-23:
0 矩形縮小
1 矩形擴(kuò)大
2 圓形縮小
3 圓形擴(kuò)大
4 下到上刷新
5 上到下刷新
6 左到右刷新
7 右到左刷新
8 豎百葉窗
9 橫百葉窗
10 錯(cuò)位橫百葉窗
11 錯(cuò)位豎百葉窗
12 點(diǎn)擴(kuò)散
13 左右到中間刷新
14 中間到左右刷新
15 中間到上下
16 上下到中間
17 右下到左上
18 右上到左下
19 左上到右下
20 左下到右上
21 橫條
22 豎條
23 以上22種隨機(jī)選擇一種
checkerboard濾鏡
duration :可選項(xiàng)。浮點(diǎn)數(shù)(Real)。設(shè)置或檢索轉(zhuǎn)換完成所用的時(shí)間。其值為秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 參數(shù)設(shè)置轉(zhuǎn)換回放的持續(xù)時(shí)間。然而，當(dāng)你一旦調(diào)用了 play 方法，在回放持續(xù)過(guò)程中 Duration 特性就變?yōu)橹蛔x特性。
squaresX :可選項(xiàng)。整數(shù)值(Integer)。設(shè)置或檢索濾鏡效果中橫向有多少條。取值范圍為 >=2 。默認(rèn)值為 12 。任何小于 2 的值都會(huì)被轉(zhuǎn)為默認(rèn)值 12 。
squaresY :可選項(xiàng)。整數(shù)值(Integer)。設(shè)置或檢索濾鏡效果中縱向有多少條。取值范圍為 >=2 。默認(rèn)值為 10 。任何小于 2 的值都會(huì)被轉(zhuǎn)為默認(rèn)值 10 。
Direction :可選項(xiàng)。字符串(String)。設(shè)置或檢索網(wǎng)格推拉的方向。down | up | right | left down:向下。
up :向上。
right :默認(rèn)值。向右。
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 :可選項(xiàng)。浮點(diǎn)數(shù)(Real)。設(shè)置或檢索轉(zhuǎn)換完成所用的時(shí)間。其值為秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 參數(shù)設(shè)置轉(zhuǎn)換回放的持續(xù)時(shí)間。然而，當(dāng)你一旦調(diào)用了 play 方法，在回放持續(xù)過(guò)程中 Duration 特性就變?yōu)橹蛔x特性。
overlap :可選項(xiàng)。浮點(diǎn)數(shù)(Real)。設(shè)置或檢索在轉(zhuǎn)換進(jìn)程中源內(nèi)容和目標(biāo)內(nèi)容都被顯示的比例。取值范圍為 0.0 - 1.0 。默認(rèn)值為 1.0 。
假如此屬性值設(shè)為 0.4,duration 屬性值設(shè)為 10 ，則轉(zhuǎn)換會(huì)發(fā)生下屬行為：
前三秒，源對(duì)象開(kāi)始隱出。 隨后的四秒，源對(duì)象完全隱出，新內(nèi)容同時(shí)隱入。最后三秒，新內(nèi)容完全隱入
示例:
<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 :可選項(xiàng)。浮點(diǎn)數(shù)(Real)。設(shè)置或檢索轉(zhuǎn)換完成所用的時(shí)間。其值為秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 參數(shù)設(shè)置轉(zhuǎn)換回放的持續(xù)時(shí)間。然而，當(dāng)你一旦調(diào)用了 play 方法，在回放持續(xù)過(guò)程中 Duration 特性就變?yōu)橹蛔x特性。
gradientSize :可選項(xiàng)。浮點(diǎn)數(shù)(Real)。設(shè)置或檢索對(duì)象內(nèi)容被梯度漸隱條覆蓋的百分比。取值范圍為 0.0 - 1.0 。默認(rèn)值為 0.25 。
motion :可選項(xiàng)。字符串(String)。設(shè)置或檢索對(duì)象內(nèi)容出現(xiàn)的方向是依據(jù) WipeStyle 特性的設(shè)定，還是取反。forward | reverse forward :默認(rèn)值。對(duì)象內(nèi)容依據(jù) WipeStyle 特性設(shè)定的流向出現(xiàn)。
reverse :對(duì)象內(nèi)容依據(jù) WipeStyle 特性設(shè)定的流向的反方向出現(xiàn)。
例如:
<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 : 可選項(xiàng)。浮點(diǎn)數(shù)(Real)。設(shè)置或檢索轉(zhuǎn)換完成所用的時(shí)間。其值為秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 參數(shù)設(shè)置轉(zhuǎn)換回放的持續(xù)時(shí)間。然而，當(dāng)你一旦調(diào)用了 play 方法，在回放持續(xù)過(guò)程中 Duration 特性就變?yōu)橹蛔x特性。
[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 :可選項(xiàng)。浮點(diǎn)數(shù)(Real)。設(shè)置或檢索轉(zhuǎn)換完成所用的時(shí)間。其值為秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 參數(shù)設(shè)置轉(zhuǎn)換回放的持續(xù)時(shí)間。然而，當(dāng)你一旦調(diào)用了 play 方法，在回放持續(xù)過(guò)程中 Duration 特性就變?yōu)橹蛔x特性。
maxSquare :可選項(xiàng)。整數(shù)值(Integer)。設(shè)置或檢索轉(zhuǎn)換中矩形色塊的最大寬度。取值范圍為 2 - 50 。默認(rèn)值為 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 :可選項(xiàng)。浮點(diǎn)數(shù)(Real)。設(shè)置或檢索轉(zhuǎn)換完成所用的時(shí)間。其值為秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 參數(shù)設(shè)置轉(zhuǎn)換回放的持續(xù)時(shí)間。然而，當(dāng)你一旦調(diào)用了 play 方法，在回放持續(xù)過(guò)程中 Duration 特性就變?yōu)橹蛔x特性。
wipeStyle :可讀寫。字符串(String)。設(shè)置或檢索轉(zhuǎn)換所使用的擦除方式。CLOCK | WEDGE | RADIAL CLOCK : 默認(rèn)值。圍繞對(duì)象的中心，自上方開(kāi)始，順時(shí)針旋轉(zhuǎn)擦除。
WEDGE :圍繞對(duì)象的中心，自上方開(kāi)始，同時(shí)向兩邊旋轉(zhuǎn)擦除。
RADIAL : 以對(duì)象的左上角為圓心旋轉(zhuǎn)擦除。
[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 :可選項(xiàng)。浮點(diǎn)數(shù)(Real)。設(shè)置或檢索轉(zhuǎn)換完成所用的時(shí)間。其值為秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 參數(shù)設(shè)置轉(zhuǎn)換回放的持續(xù)時(shí)間。然而，當(dāng)你一旦調(diào)用了 play 方法，在回放持續(xù)過(guò)程中 Duration 特性就變?yōu)橹蛔x特性。
orientation :可讀寫。字符串(String)。設(shè)置或檢索轉(zhuǎn)換所使用的隨機(jī)線條是橫向的還是縱向的。horizontal | vertical horizontal :默認(rèn)值。橫向線條。
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 :可選項(xiàng)。浮點(diǎn)數(shù)(Real)。設(shè)置或檢索轉(zhuǎn)換完成所用的時(shí)間。其值為秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 參數(shù)設(shè)置轉(zhuǎn)換回放的持續(xù)時(shí)間。然而，當(dāng)你一旦調(diào)用了 play 方法，在回放持續(xù)過(guò)程中 Duration 特性就變?yōu)橹蛔x特性。
[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 :可選項(xiàng)。浮點(diǎn)數(shù)(Real)。設(shè)置或檢索轉(zhuǎn)換完成所用的時(shí)間。其值為秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 參數(shù)設(shè)置轉(zhuǎn)換回放的持續(xù)時(shí)間。然而，當(dāng)你一旦調(diào)用了 play 方法，在回放持續(xù)過(guò)程中 Duration 特性就變?yōu)橹蛔x特性。
bands :可選項(xiàng)。整數(shù)值(Integer)。設(shè)置或檢索濾鏡效果中有多少滑條被抽離。取值范圍為 1 - 100 。默認(rèn)值為 1 。
slideStyle :可選項(xiàng)。字符串(String)。設(shè)置或檢索滑條抽離效果的方式。HIDE | PUSH | SWAP HIDE : 默認(rèn)值。在新內(nèi)容上抽離舊內(nèi)容。
PUSH :抽離舊內(nèi)容時(shí)同步同向拉進(jìn)新內(nèi)容。
SWAP :在抽離的同時(shí)交換新舊內(nèi)容。
<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 : 可選項(xiàng)。浮點(diǎn)數(shù)(Real)。設(shè)置或檢索轉(zhuǎn)換完成所用的時(shí)間。其值為秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 參數(shù)設(shè)置轉(zhuǎn)換回放的持續(xù)時(shí)間。然而，當(dāng)你一旦調(diào)用了 play 方法，在回放持續(xù)過(guò)程中 Duration 特性就變?yōu)橹蛔x特性。
gridSizeX :可選項(xiàng)。整數(shù)值(Integer)。設(shè)置或檢索濾鏡效果中橫向盤旋多少次。取值范圍為 1 - 100 。默認(rèn)值為 16 。
gridSizeY :可選項(xiàng)。整數(shù)值(Integer)。設(shè)置或檢索濾鏡效果中縱向盤旋多少次。取值范圍為 1 - 100 。默認(rèn)值為 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 :可選項(xiàng)。浮點(diǎn)數(shù)(Real)。設(shè)置或檢索轉(zhuǎn)換完成所用的時(shí)間。其值為秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 參數(shù)設(shè)置轉(zhuǎn)換回放的持續(xù)時(shí)間。然而，當(dāng)你一旦調(diào)用了 play 方法，在回放持續(xù)過(guò)程中 Duration 特性就變?yōu)橹蛔x特性。
stretchStyle : 可讀寫。字符串(String)。設(shè)置或檢索拉伸變形轉(zhuǎn)換的方式。SPIN | HIDE | PUSH SPIN : 默認(rèn)值。在舊內(nèi)容上自中心向左右兩邊拉伸新內(nèi)容。
HIDE :在舊內(nèi)容上自左向右拉伸(縮)新內(nèi)容。
PUSH : 自左向右拉伸新內(nèi)容近來(lái)同時(shí)擠壓舊內(nèi)容出去。這種轉(zhuǎn)換方式的視覺(jué)效果類似立方體從一面轉(zhuǎn)到另一面。
<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 : 可選項(xiàng)。浮點(diǎn)數(shù)(Real)。設(shè)置或檢索轉(zhuǎn)換完成所用的時(shí)間。其值為秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 參數(shù)設(shè)置轉(zhuǎn)換回放的持續(xù)時(shí)間。然而，當(dāng)你一旦調(diào)用了 play 方法，在回放持續(xù)過(guò)程中 Duration 特性就變?yōu)橹蛔x特性。
motion : 可讀寫。字符串(String)。設(shè)置或檢索轉(zhuǎn)換新內(nèi)容從哪一個(gè)角開(kāi)始。leftdown | leftup | rightdown | Prightup leftdown : 默認(rèn)值。從左下角到右上角。
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 : 可選項(xiàng)。浮點(diǎn)數(shù)(Real)。設(shè)置或檢索轉(zhuǎn)換完成所用的時(shí)間。其值為秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 參數(shù)設(shè)置轉(zhuǎn)換回放的持續(xù)時(shí)間。然而，當(dāng)你一旦調(diào)用了 play 方法，在回放持續(xù)過(guò)程中 Duration 特性就變?yōu)橹蛔x特性。
spokes : 可讀寫。整數(shù)值(Integer)。設(shè)置或檢索風(fēng)車葉輪數(shù)目。取值范圍為 2 - 20 。默認(rèn)值為 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 : 可選項(xiàng)。浮點(diǎn)數(shù)(Real)。設(shè)置或檢索轉(zhuǎn)換完成所用的時(shí)間。其值為秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 參數(shù)設(shè)置轉(zhuǎn)換回放的持續(xù)時(shí)間。然而，當(dāng)你一旦調(diào)用了 play 方法，在回放持續(xù)過(guò)程中 Duration 特性就變?yōu)橹蛔x特性。
gridSizeX : 可選項(xiàng)。整數(shù)值(Integer)。設(shè)置或檢索濾鏡效果中橫向盤旋多少次。取值范圍為 1 - 100 。默認(rèn)值為 16 。
gridSizeY : 可選項(xiàng)。整數(shù)值(Integer)。設(shè)置或檢索濾鏡效果中縱向盤旋多少次。取值范圍為 1 - 100 。默認(rèn)值為 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>