js如何实现文字闪烁特效？（图文+视频）-css知识-PHP中文网

首页

每日编程

css知识

js如何实现文字闪烁特效？（图文+视频）

藏色散人

Oct 18, 2018 am 09:38 AM

本篇文章主要给大家介绍如何用js实现文字闪烁特效。

我们在前端页面设计过程中，添加一些动态特效显然能够使网站内容更加丰富，并且也更加美观，能够吸引用户瞩目。

对于前端新手来说，使用js实现一些特效或许有一定难度，但其实也是非常简单的。

下面我们就通过简单的代码示例，给大家介绍js实现文字闪动的特效方法。【更多js特效，可访问js特效代码下载栏目查看】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js实现文字闪烁特效</title>
</head>
<body>
<div id="blink">PHP中文网</div>
</body>
<script language="javascript">
    function changeColor() {
        var color = [&#39;#F96&#39;,&#39;#cc6&#39;];
        // parseInt 将字符串类型转换为整型  random 获取0-1之间的随机数   color.length color数组的长度
 document.getElementById("blink").style.color = color[parseInt(Math.random() * color.length)];
    }
    // 执行定义好的changeColor方法，200毫秒执行一下
 setInterval("changeColor()", 200);
</script>
<style>
    * {
        color: #CC6
 }
</style>
</html>

登录后复制

最终效果如下图：

未标题-2.gif