CSS的 RevealTrans 濾鏡
??
?????
? 　　CSS的RevealTrans動態濾鏡是一個神奇的濾鏡，它能產生23種動態效果，更為奇妙的是它還能在23種動態效果中隨機抽用其中的一種。用它來進行網頁之間的動態切換，簡直方便極了，你只要在網頁源代碼的< head >與< /head >之間插入這樣一行代碼：< Meta content=revealTrans(Transition=14,Duration=3.0) http-equiv=Page-enter >，當你進入這個頁面時，網頁將象拉幕一樣從中間向兩邊拉開，是不是別具一格？！
??
? 　　RevealTrans濾鏡只有兩個參數，Duration：是切換時間，以秒為單位；Transition：是切換方式，它有24種方式，詳見下表：??

切換效果	Transition參數值	切換效果	Transition參數值
矩形從大至小	0	隨機溶解	12
矩形從小至大	1	從上下向中間展開	13
圓形從大至小	2	從中間向上下展開	14
圓形從小至大	3	從兩邊向中間展開	15
向上推開	4	從中間向兩邊展開	16
向下推開	5	從右上向左下展開	17
向右推開	6	從右下向左上展開	18
向左推開	7	從左上向右下展開	19
垂直形百葉窗	8	從左下向右上展開	20
水平形百葉窗	9	隨機水平細紋	21
水平棋盤	10	隨機垂直細紋	22
垂直棋盤	11	隨機選取一種特效	23

???
? 　　因此，你只要改變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 >中加入這樣一句代碼：οnlοad="playHelp()"。
??
? 　　到此，可以按F12看效果了，好象也不是太難。你若是想看看其它的轉換效果，只要改變一下Revealtrans濾鏡中的Transition參數值就行了，其它什么也不用改動，你瞧多方便！用它來作廣告條我想效果不會差。比起動畫來可瘦小多了。
??
? 　　當然Revealtrans濾鏡同樣也可以用于圖片，效果也不錯，但要改動一下Javascript程序。由于CSS還有一個動態濾鏡是BlendTrans濾鏡，用它做圖片的淡入淡出效果相當不錯，且這兩個濾鏡的使用方法有許多類似的地方，所以關于怎樣在圖片上用Revealtrans濾鏡來產生變換效果，我就一并放到下篇一起講了。

總結

以上是生活随笔為你收集整理的[CSS]RevealTrans 滤镜的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。