使用CSS3 and jQuery 实现霓虹灯闪烁效果
在本教程中，我们将教你如何在不使用FLASH，而仅仅是使用CSS3 和jQuery技术，就让你的输入框具有虹灯闪烁的效果。
首先让我们来看看效果图：
源代码下载：http://www.nnfj.net/uploads/soft/100726/1-100H6160320.zip
接下来设置提交按钮的样式属性，使按钮和表格的风格一致。把下面的代码加到CSS样式里。
.submitbutton{
第4步：使用css3设置页面动画效果
添加下面的代码到CSS文件里，设置页面动画效果。
@-webkit-keyframes pulsate {
0% { -webkit-box-shadow: 0px 0px 0px #3cdfdf; border:2px aqua inset }
25% { -webkit-box-shadow: 0px 0px 35px #3cdfdf; border:2px aqua inset }
50% { -webkit-box-shadow: 0px 0px 0px white; border:2px white inset }
75% { -webkit-box-shadow: 0px 0px 35px white; border:2px white inset }
100% { -webkit-box-shadow: 0px 0px 0px #3cdfdf; border:2px aqua inset }
}
.inputfield:focus{
-webkit-animation-name: pulsate;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
-moz-box-shadow: 0px 0px 30px #3cdfdf;
box-shadow: 0px 0px 30px #3cdfdf;
}
效果如下：
第5步：添加jQuery
添加以下的代码到highlight.js.里。
$(document).ready(function(){
var globalParent=null;
var mouse_is_inside=false;
/*The snippet below is activated when an inputfield is focused*/
$('.inputfield').focus(function(){
globalParent=$(this).parent('div');
globalParent.click();
});
/*This following part will be activated when the inputfield loses focus*/
$('.inputfield').blur(function(){
globalParent.click();
});
/*Following part will be activated when the user clicks anywhere inside
the container div of the inputfield*/
$('.field').click(function(){
if(!($(this).is('.dummy'))){
$('.dummy').css('background-color','gray');
$('.dummy label').css('color','white');
$('.dummy').removeClass('dummy');
$(this).css('background-color','black');
$(this).children('label').css('color','#3cdfdf');
$(this).addClass('dummy');
}
});
/*The following code checks time and again whether the mouse is inside the form or not*/
$('form').hover(function(){
mouse_is_inside=true;
},
function(){
mouse_is_inside=false;
}
);
/*If user clicks anywhere outside the form, all highlighting is removed*/
$('body').click(function(){
if(!mouse_is_inside)
{
$('.field').css('background-color','gray');
$('.field label').css('color','white');
$('.dummy').removeClass('dummy');
}
});
});
这是一个简单的jQuery代码，其中，重点设置了输入文本框的DIV设置，并改变其背景为黑色。
效果如下：
上面就是整个霓虹灯效果的实现过程。