首頁  >  文章  >  web前端  >  怎麼用css和js讓頁面文字出現不停閃爍的效果? (例)

怎麼用css和js讓頁面文字出現不停閃爍的效果? (例)

藏色散人
藏色散人原創
2018-08-11 17:48:114340瀏覽

本篇文章主要介紹怎麼讓js實現文字閃爍效果。在瀏覽網頁時,偶爾會被閃動特效的文字吸引了目光。這樣更能突顯網站的重點,同時帶來用戶點擊的高流量。其實我們用純用css程式碼時很難實現文字不停閃動的效果,必須結合js來操作。

這裡要介紹一個非常簡單的js實作文字閃爍的特效方法,也就是文字依照指定顏色逐次閃爍顯示。

js實作文字閃爍的具體程式碼範例如下:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>js文字闪烁效果</title>
    <meta charset="UTF-8">
    <style type="text/css">
    </style>
</head>
<body>
<script language="javascript">
    function changeColor(){
        var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray";
        color=color.split("|");
        document.getElementById("blink").style.color=color[parseInt(Math.random() * color.length)];
    }
    setInterval("changeColor()",200);
</script>
<div align="center">
    <span id="blink">js实现文字闪烁示例</span>
</div>
</div>
</body>
</html>

效果如下圖:

怎麼用css和js讓頁面文字出現不停閃爍的效果? (例)

註:text-decoration 屬性規定加入到文字的修飾。

text-decoration的值blink。 IE、Chrome 或 Safari 皆不支援 "blink" 屬性值,也就是現在的主流的瀏覽器都是不支援該屬性值的,只支援火狐瀏覽器。所以想要實作 文字閃爍效果必須要結合js來實現。

以上是怎麼用css和js讓頁面文字出現不停閃爍的效果? (例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn