CSS的RevealTrans動態濾鏡是一個神奇的濾鏡，它能產生23種動態效果，更為奇妙的是它還能在23種動態效果中隨機抽用其中的一種。用它來進行網頁之間的動態切換，簡直方便極了，你只要在網頁源代碼的< head >與< /head >之間插入這樣一行代碼：< Meta content=revealTrans(Transition=14,Duration=3.0) http-equiv=Page-enter >，當你進入這個頁面時，網頁將象拉幕一樣從中間向兩邊拉開，是不是別具一格？！
RevealTrans濾鏡只有兩個參數，Duration：是切換時間，以秒為單位；Transition：是切換方式，它有24種方式，詳見下表：
因此，你只要改變RevealTrans濾鏡的“Transition"的值，就能獲得不同的網頁切換效果，是不是太方便了點？但很遺憾，要把 RevealTrans濾鏡用于網頁中的某個對象就沒有這么簡單了，它必須借助于Javascript來調用其方法，才能實現，這就是說要動手編程序了。但也不是太難，下面我將通過一個制作動態字幕變換的例子來說明其使用方法。
漸淡字幕變換效果這個例子演示了利用Javascript程序控制Revealtrans濾鏡來實現字幕逐漸淡出和漸進的效果，請看下面的效果圖：
上面的效果看起來好象不好，是嗎？實際效果看起來比這漂亮多了。由于是動態轉換，上面只是我抓的三張圖片，只能幫助你了解其轉換過程，真正的效果只有待你按我下面講的方法動手做出來才能看到。請看制作方法：
1、制作一個Revealtrans濾鏡，取名為“mytrans"，其制作方法與前面介紹的靜態濾鏡相同，參數值為Transition=12, Duration=2。設置好后，在網頁源代碼的< head >與< /head >之間將有下面這樣的代碼：
< style type="text/css" >
< !--
.mytrans { filter:revealTrans(Transition=12,Duration=2)}
-- >
< /style >
2、插入一個層，我們把層的“Layer ID”改為“div1”（可直接在層的屬性面板上加入即可），并設置好層的背景和調整好層的大小，并把Revealtrans濾鏡加載到到層上，這時你看到的層的標記代碼是這樣的：< div id="div1" style="position:absolute; width:680px; height:30px; z-index:37; background: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000" class="mytrans" >< /div >
3、在網頁源代碼的< head >與< /head >之間插入下面這段Javascript程序：
< script language="JavaScript" >
< !--
function HelpArray(len)
{
this.length=len;
}
// 建立一個數組，存放轉換的內容。
HelpText=new HelpArray(5);
HelpText[0]="在一個文檔使用動態轉換的濾鏡（Revealtrans）其實是很容易的。";
HelpText[1]="首先，為對象的樣式表單建立一個需要轉換的“Revaltrans"濾鏡，";
HelpText[2]="然后，使用“apply()"方法防止錯誤，";
HelpText[3]="現在，你可以改變任何你想改變的東西，";
HelpText[4]="最后，“play()"方法開始進行轉換。";
ScriptText=new HelpArray(5);
var i= -1;
// 顯示轉換效果
function playHelp()
{
if (i==4)
{ i=0 ;}
else
{ i++; }
div1.filters[0].apply();
div1.innerText=HelpText[i];
div1.filters[0].play();
// 設置每段字幕演示的時間，以毫秒計。這里的時間要長于濾鏡中的時間，以保證在轉換結束后能停留一段時間。
// 以方便看清楚字幕內容。在本例中字幕演示的時間是6秒，濾鏡中設置的轉換時間是2秒。
mytimeout=setTimeout("playHelp()",6000);
}
-- >
< /script >
4、在網頁的源代碼的< body >中加入這樣一句代碼：onload="playHelp()"。
到此，可以按F12看效果了，好象也不是太難。你若是想看看其它的轉換效果，只要改變一下Revealtrans濾鏡中的Transition參數值就行了，其它什么也不用改動，你瞧多方便！用它來作廣告條我想效果不會差。比起動畫來可瘦小多了。
當然Revealtrans濾鏡同樣也可以用于圖片，效果也不錯，但要改動一下Javascript程序。由于CSS還有一個動態濾鏡是 BlendTrans濾鏡，用它做圖片的淡入淡出效果相當不錯，且這兩個濾鏡的使用方法有許多類似的地方，所以關于怎樣在圖片上用Revealtrans 濾鏡來產生變換效果，我就一并放到下篇一起講了。