用Jquery+CSS做动态发光字Keiling_J

最终效果:

Jquery 代码如下:

$(document).ready(function(){
   setInterval(function(){
   // 选择可见图层:
   var versions = $('.textVersion:visible');
   if(versions.length<2){
   // 如果只有一层是可见的就把它显示出来:
     $('.textVersion').fadeIn(1000);
   }
   else{
      // 隐藏
      versions.eq(0).fadeOut(1000);
   }
   },1000);
});

CSS代码如下:

*{
        /*reset原子级类*/
    margin:0;
    padding:0;
}

body{
    font-size:14px;
    color:#ccc;
    background-color:#141414;
    font-family:Arial, Helvetica, sans-serif;
}

#neonText span{
    /*控制发光子显示位置的层,这里把用ps做好的png图片设置为改成的背景 并控制显示位置*/
    width:700px;
    height:150px;
    position:absolute;
    left:0;
    top:0;
    background:url('text.png') no-repeat left top;    
}

span#version1{
    z-index:100;
}

span#version2{
    background-position:left bottom;
    z-index:99;
}


#neonText{
    height:150px;
    margin:40px 20px 0;
    position:relative;
    width:650px;
    text-indent:-9999px;
}

a, a:visited {
    color:#0196e3;
    text-decoration:none;
    outline:none;
}

a:hover{
    text-decoration:underline;
}

Html代码:

<h1 id="neonText">
    <span class="textVersion" id="version1"></span>
        <span class="textVersion" id="version2"></span>
</h1>

图片:

---By Keiling_J 2013,5,11