最终效果:
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