怎么調用CSS層疊樣式表控制閃爍效果

本篇內容介紹了“怎么調用CSS層疊樣式表控制閃爍效果”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

CSS層疊樣式表控制閃爍效果

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

上面這個示例就能實現上面所的效果，由于這里是抓取的一張圖片，不能看到動態效果，只要按下面介紹的方法，制作一個試試，其效果是一目了然的。其制作思路是:采用了CSS的“Glow”濾鏡產生光暈效果，利用CSS的屬性可動態改變的特性，用一小段Javascript程序來每一秒鐘改變一次屬性值，從而實現閃爍的效果，再用兩個事件(onmouseover和onmouseout)調用Javascript程序來控制是否閃爍。

制作方法:

1、制作一個Glow濾鏡，CSS濾鏡的設置方法請參看“CSS濾鏡應用技巧”的有關文章。在此不再重復。不是使用Dreamweaver的網友，請把下面的代碼復制到網頁源代碼的〈head〉與〈/head〉之間:

〈styletype="text/css"〉   〈!--   .glow1{filter:glow(color=#FF0000,strengh=2)}   --〉   〈/style〉

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

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

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

〈script〉   〈!--   functioninit()//光暈開始閃爍   {   makeflash(bob);   }   functionmakeflash(obj)   {   obj.flashTimer=setInterval("bob.filters.glow.enabled=!bob.filters.glow.enabled",1000)   }//這里的“1000”是閃爍的時間，以毫秒計，在本例中是設置了1000毫秒(即1秒)，可以根據需要修改。   functionstopflash(obj)//光暈停止閃爍   {clearInterval(obj.flashTimer)   }   //--〉   〈/script〉

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

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

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

“怎么調用CSS層疊樣式表控制閃爍效果”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！