生活随笔
收集整理的這篇文章主要介紹了
巧用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濾鏡來實現字幕逐漸淡出和漸進的效果，請看下面的效果圖：
<?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滤镜的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
