CSS樣式表完成可以控制的閃爍效果

來源:互聯網
上載者:User
css|控制|閃爍|樣式表

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

  上面這個樣本就能實現上面所的效果,由於這裡是抓取的一張圖片,不能看到動態效果,只要按下面介紹的方法,製作一個試試,其效果是一目瞭然的。其製作思路是:採用了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濾鏡,並加上兩個事件以實現當滑鼠移到文字上時強制停止閃爍,當滑鼠移開文字時繼續閃爍。代碼:,這句代碼的作用是:一旦滑鼠移到文字上,將調用程式的“stopflash(this)”函數來停止閃爍; ,這句代碼的作用是:一旦滑鼠移開文字,將調用程式的“init()”函數來使光暈閃爍。本例完成後圖層標記的代碼是這樣的:

  〈div id="bob" style="position:absolute; width:572px; height:35px; z-index:1" class="glow1" 〉

  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〉標記中加上這樣一段代碼:。這句代碼的作用是當網頁載入時,光暈開始閃爍。

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

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



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。