这是用CSS3制作的文字闪烁
CSS3 的文字闪烁是用@keyframes 创建文字闪烁的动画 ,
然后用animation设置动画属性
<html>
<head>
<meta charset="utf-8">
<title>闪烁的文字</title>
<style type="text/css">
.flicker{
width: 340px;
height: 220px;
margin: 100px auto;
}
.flicker h1{
animation: flicker 2s linear infinite;
}
@keyframes flicker{
0%{color: #0000FF;}
20%{color: #00CCCC;}
40%{color: #9900CC;}
60%{color: #99FFFF;}
80%{color: #CCFF00;}
100%{color: #FF00FF;}
}
</style>
</head>
<body>
<div class="flicker">
<h1>日照香炉生紫烟，</h1>
<h1>遥看瀑布挂前川。</h1>
<h1>飞流直下三千尺，</h1>
<h1>疑是银河落九天。</h1>
</div>
</body>
</html>
这是用JS制作的文字闪烁
<html>
<head>
<meta charset="utf-8">
<title>闪烁的文字</title>
</head>
<body>
<h1>闪烁的文字</h1>
<script type="text/javascript">
function changeColor(){
//定义一条变换颜色的字符串
var color = "#00F|#0CC|#90C|#9FF|#CF0|#F0F|#C00|#0F0|#03C|#60F|#F06";
//用split进行分割
color= color.split("|");
var wen = document.getElementsByTagName("h1");
for(var i=0;i<wen.length;i++){
//设置样式
wen[i].style.color=color[parseInt(Math.random() * color.length)];
}
}
//用setInterval()方法不停地调用函数 间隔0.2s
setInterval("changeColor()",200);
</script>
</body>
</html>