用CSS控制的閃爍效果_CSS/HTML

　　一段文字或一張圖片，它的周圍有一圈光暈，這圈光暈每一秒鐘閃爍一次，而當滑鼠移到上面時，立即停止閃爍，當滑鼠移開時又繼續閃爍。這種效果用於那些需要特別引起別人注意的內容上(如:警示、報告新增內容等)，能起到較好的效果。

　　上面這個範例就能實現上面所的效果，由於這裡是抓取的一張圖片，不能看到動態效果，只要按下面介紹的方法，製作一個試試，其效果是一目了然的。其製作想法是:採用了CSS的「Glow」濾鏡產生光暈效果，利用CSS的屬性可動態改變的特性，用一小段javascript程式來每一秒鐘改變一次屬性值，從而實現閃爍的效果，再用兩個事件(onmouseover和onmouseout)呼叫Javascript程式來控制是否閃爍。

　　製作方法:

　　1、製作一個Glow濾鏡，CSS濾鏡的設定方法請參考「CSS濾鏡應用技巧」的有關文章。在此不再重複。不是使用Dreamweaver的網友，請把下面的程式碼複製到網頁原始碼的〈head〉與〈/head〉之間:

　　〈style type="text/css"〉

　　〈!--

　　.glow1 { filter:glow(color=#FF0000,strengh=2)}

　　--〉

　　〈/style〉

　　2、插入一個圖層，取名為:bob。在圖層上寫上一段文字。再在圖層上載入一個Glow濾鏡，並加上兩個事件以實現當滑鼠移到文字上時強制停止閃爍，當滑鼠移開文字時繼續閃爍。程式碼:onclick="stopflash(this)"，這句程式碼的作用是:一旦滑鼠移到文字上，將呼叫程式的「stopflash(this)」函數來停止閃爍; onmouseout="init()"，這句程式碼的作用是:一旦滑鼠移開文字，將呼叫程式的「init()」函數來使光暈閃爍。本例完成後圖層標記的程式碼是這樣的:

　　〈div id="bob" style="position:absolute; width:572px; height:35px; z-index:1" class="glow1" onmouseover="stopflash(this)" onmouseout="init() "〉

　　3、在〈head〉與〈/head〉之間插入這樣一段Javascript程式:

　　〈script 〉

　　〈!--

　　function init() // 光暈開始閃爍

　　{

　　makeflash(bob);

　　}

　　function makeflash(obj)

　　{

　　obj.flashTimer=setInterval("bob.filters.glow.enabled= !bob.filters.glow.enabled",1000)

　　} // 這裡的「1000」是閃爍的時間，以毫秒計，在本例中是設定了1000毫秒(即1秒)，可以根據需要修改。

　　function stopflash(obj) // 暈停止閃爍

　　{ clearInterval(obj.flashTimer)

　　}

　　//--〉

　　〈/script〉
　　4、在網頁原始碼的〈body〉標籤中加上這樣一段程式碼:onload="init()"。這句程式碼的作用是當網頁載入時，光暈開始閃爍。

　　至此，製作結束，按F12就可看到預期的效果了。

　　光暈的顏色和光暈的長度均可修改CSS濾鏡中的參數值來改變，光暈閃爍的時間間隔可透過修改Javascript中的間隔時間值來調整。若是在圖層中插入圖片(透明背景的gif圖片效果更好)，則變成圖片邊緣的光暈閃爍效果。