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