首頁 > 開發者 > CSS

CSS轉換濾鏡一覽

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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()
{
 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.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()
{
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.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()
{
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.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()
{
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.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()
{
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.GradientWipe(duration=3,gradientSize=0.5);
width:333;height:222;">
</body>
</html>

Inset濾鏡
屬性：
duration : 可選項。浮點數(Real)。設定或檢索轉換完成所用的時間。其值為秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 參數設定轉換回放的期間。然而，當你一旦調用了 play 方法，在回放持續過程中 Duration 特性就變為唯讀特性。

<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.Inset();
width:333;height:222;">
</body>
</html>

Pixelate濾鏡
屬性：
duration : 可選項。浮點數(Real)。設定或檢索轉換完成所用的時間。其值為秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 參數設定轉換回放的期間。然而，當你一旦調用了 play 方法，在回放持續過程中 Duration 特性就變為唯讀特性。
maxSquare : 可選項。整數值(Integer)。設定或檢索轉換中矩形色塊的最大寬度。取值範圍為 2 - 50 。預設值為 50 。

<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.Pixelate();
width:333;height:222;">
</body>
</html>

RadialWipe濾鏡
屬性：
duration : 可選項。浮點數(Real)。設定或檢索轉換完成所用的時間。其值為秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 參數設定轉換回放的期間。然而，當你一旦調用了 play 方法，在回放持續過程中 Duration 特性就變為唯讀特性。
wipeStyle : 可讀寫。字串(String)。設定或檢索轉換所使用的擦除方式。CLOCK | WEDGE | RADIAL CLOCK : 預設值。圍繞對象的中心，自上方開始，順時針旋轉擦除。
WEDGE : 圍繞對象的中心，自上方開始，同時向兩邊旋轉擦除。
RADIAL : 以對象的左上方為圓心旋轉擦除。

<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.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 : 縱向線條。

<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.RandomBars(duration=2);
width:333;height:222;">
</body>
</html>

RandomDissolve濾鏡
屬性：
duration : 可選項。浮點數(Real)。設定或檢索轉換完成所用的時間。其值為秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 參數設定轉換回放的期間。然而，當你一旦調用了 play 方法，在回放持續過程中 Duration 特性就變為唯讀特性。

<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.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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
css ellipsis css oblique css scheduler css selectors css alarms skin css lynda css
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More