文字动态发光特效代码简单实现

最新推荐文章于 2023-01-12 18:30:06 发布

hayley-liu

最新推荐文章于 2023-01-12 18:30:06 发布

阅读量5k

点赞数 2

分类专栏： JS 文章标签： javascript HTML

本文链接：https://blog.csdn.net/Hayley_Liu/article/details/78489829

版权

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

第一种方法：
<html>
    <head>

        <title>文字动态发光特效代码</title>
    </head>
    <body bgcolor="#cccccc" style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=blue,endColorStr=skyblue)">

        <div id="myDiv" style="text-align:center;margin:100px auto;">css的世界是如此的精彩！</div>
        <script>

            function start1() {

                document.getElementById("myDiv").style.color = "red";

                setTimeout("start2()", 100);//延时100毫秒执行下一个

            }

            function start2() {

                document.getElementById("myDiv").style.color = "blue";

                setTimeout("start3()", 100);

            }

            function start3() {

                document.getElementById("myDiv").style.color = "#BFAD09";

                setTimeout("start4()", 100);

            }

            function start4() {

                document.getElementById("myDiv").style.color = "#009688";

                setTimeout("start1()", 100);

            }

            start1();//执行一遍函数start1进入循环

        </script>
    </body>
</html>

第二种方法：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>简单文字变色</title>
</head>
<body>
<script language="javascript">
var colors=new Array("red","orange","green","blue","browm","putple","gray","white");
var ind=0;
function changecolor()
{
	document.fgColor=colors[ind++];
	if (ind==(colors.length)){ind=0}
}
setInterval("changecolor()",500);
window.οnlοad=changecolor;
</script>
<h1 align="center">朋友欢迎您</h1>
</body>
</html>