怎么用css和js让页面文字出现不停闪烁的效果？（示例）

藏色散人 原创: 2018-08-11 17:48:11 3814浏览

本篇文章主要介绍怎么让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>

效果如下图：