<html>
<head>
<meta charset="utf-8">
<title>CSS3发光字</title>
<style>
*{ padding:0margin:0font-size:14px }
body{ background: #f3f5f5 }
.d{ width:100%text-align:centermargin:20px auto }
.a , .n{ text-decoration: nonefont-size:6emfont-family:"微软雅黑" }
.a{ color:blue }
.a:link{ color:blue }
.n{ color:#FFFtext-shadow: 0 0 10px #000,0 0 25px #000 }
.def , .h:hover{ animation: run 2.4s infinite-webkit-animation: run 2.4s infinite-moz-animation: run 2.4s infinite
-ms-animation: run 2.4s infinite-o-animation: run 2.4s infinite }
@-webkit-keyframes run{
0%,100%{ color:#ffftext-shadow:0 0 10px blue,0 0 10px blue }
50%{ text-shadow:0 0 10px blue,0 0 40px blue }
}
@-moz-keyframes run{
0%,100%{ color:#ffftext-shadow:0 0 10px blue,0 0 10px blue }
50%{ text-shadow:0 0 10px blue,0 0 40px blue }
}
@-o-keyframes run{
0%,100%{ color:#ffftext-shadow:0 0 10px blue,0 0 10px blue }
50%{ text-shadow:0 0 10px blue,0 0 40px blue }
}
@-ms-keyframes run{
0%,100%{ color:#ffftext-shadow:0 0 10px blue,0 0 10px blue }
50%{ text-shadow:0 0 10px blue,0 0 40px blue }
}
@keyframes run{
0%,100%{ color:#ffftext-shadow:0 0 10px blue,0 0 10px blue }
50%{ text-shadow:0 0 10px blue,0 0 40px blue }
}
</style>
</head>
<body>
<hr>
字体不带动效：
<div class="d">
<a href="javascript:void(0)" class="n">如何使用CSS3制作特效发光字</a>
</div>
<hr>
字体自带动效：
<div class="d">
<a href="javascript:void(0)" class="a def">不记得你的名字，但记得你的死期。</a>
</div>
<hr>
字体悬浮动效：
<div class="d">
<a href="javascript:void(0)" class="a h">剑之所至，心之所往。</a>
</div>
<hr>
</body>
</html>
脚本说明：把如下代码加入<body>区域中:
<script language="JavaScript">
<!-- Begin
text = "怎么用CSS做出跟QQ空间发光字一样的效果"//显示的文字
color1 = "blue"//文字的颜色
color2 = "red"//转换的颜色
fontsize = "6"//字体大小
speed = 100//转换速度 (1000 = 1 秒)
i = 0
if (navigator.appName == "Netscape") {
document.write("<layer id=a visibility=show></layer><br><br><br>")
}
else {
document.write("<div id=a></div>")
}
function changeCharColor() {
if (navigator.appName == "Netscape") {
document.a.document.write("<center><font face=arial size =" + fontsize + "><font color=" + color1 +
">")
for (var j = 0j <text.lengthj++) {
if(j == i) {
document.a.document.write("<font face=arial color=" + color2 + ">" + Text.charAt(i) + "</font>")
}
else {
document.a.document.write(text.charAt(j))
}
}
document.a.document.write('</font></font></center>')
document.a.document.close()
}
if (navigator.appName == "Microsoft Internet Explorer") {
str = "<center><font face=arial size=" + fontsize + "><font color=" + color1 + ">"
for (var j = 0j <text.lengthj++) {
if( j == i) {
str += "<font face=arial color=" + color2 + ">" + text.charAt(i) + "</font>"
}
else {
str += text.charAt(j)
}
}
str += "</font></font></center>"
a.innerHTML = str
}
(i == text.length) ? i=0 : i++
}
setInterval("changeCharColor()", speed)
// End -->
</script>
你运行下，看是不是实现这个效果的
