使用CSS3 and jQuery 实现霓虹灯闪烁效果

在本教程中，我们将教你如何在不使用FLASH，而仅仅是使用CSS3 和jQuery技术，就让你的输入框具有虹灯闪烁的效果。

首先让我们来看看效果图：

实现方法：

第1步：1、编码前的准备工作

确定您下载的jQuery是最新版本（在撰写本文时版本1.4.2），

<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">

</script>

以上是jQuery新版本,读者也可以自行下载最新的版本

第2步：创建窗体布局的XHTML

以下将创建名为index.html的XHTML布局。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" class="no-js">

<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>Form Tutorial</title>

<link rel="stylesheet" type="text/css" href="style.css">

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="highlight.js"></script>

</head>

<body>

<div id="page-wrap">

<form id="myform" method="post" action="#">

<div>

<div class="field">

<label for="personname" >Name</label>

<input class="inputfield textfield" name="personname" type="text" />

</div>

<div class="field">

<label for="email" >E-mail</label>

<input class="inputfield textfield" name="email" type="text" />

</div>

<div class="field">

<label for="website" >Website</label>

<input class="inputfield textfield" name="website" type="text" />

</div>

<div class="field area">

<label for="details" >Details</label>

<textarea class="inputfield textarea1" name="details" ></textarea>

</div>

</div>



<input class="submitbutton" type="submit" value="Submit" />

</form>

</div>

</body>

</html>

第3步：创建基本的CSS样式

下面将创建XHTML页面的CSS样式，样式的代码保存在style.css里，代码如下：

*{

margin:0;

padding:0;

}

textarea, input{

outline:none;

}

body{

background:#3D3D3D;

}

#page-wrap{

width:350px;

min-height:500px;

height:auto;

margin:0 auto;

position:relative;

padding-top:50px;

font:15px Arial;

}

#myform{

width:375px;

-moz-border-radius: 8px; /* FF1+ */

-webkit-border-radius: 8px; /* Saf3+, Chrome */

border-radius: 8px; /* Opera 10.5, IE 9 */

margin:0 auto;

position:relative;

}

#myform label{

top:10px;

position:relative;

color:white;

}

.field{

background:gray;

padding:15px 15px 0 10px;

height:50px;

width:350px;

}

#myform div:first-child{

-moz-border-radius-topleft: 8px;

-moz-border-radius-topright: 8px;

-webkit-border-top-left-radius: 8px;

-webkit-border-top-right-radius: 8px;

border-top-left-radius: 8px;

border-top-right-radius: 8px;

}

#myform div:last-child{

-moz-border-radius-bottomleft: 8px;

-moz-border-radius-bottomright: 8px;

-webkit-border-bottom-left-radius: 8px;

-webkit-border-bottom-right-radius: 8px;

border-bottom-left-radius: 8px;

border-bottom-right-radius: 8px;

}

.area{

padding:15px 15px 0 10px;

min-height:195px;

}

.inputfield{

padding:0 10px 0 10px;

float:right;

width:200px;

font:15px Arial;

border:2px aqua inset;

-moz-border-radius: 8px; /* FF1+ */

-webkit-border-radius: 8px; /* Saf3+, Chrome */

border-radius: 8px; /* Opera 10.5, IE 9 */

}

.textfield{

height:25px;

padding-top:5px;

}

.textarea1{

padding-top:10px;

padding-bottom:10px;

height:150px;

max-height:200px;

max-width:250px;

}

在这里，因为受到输入框阴影属性的影响，所以如何设置CSS3边界属性变得非常重要。对于文本区域轮廓属性设置为0，并输入字段，用来删除浏览器默认的焦点属性，

接下来设置提交按钮的样式属性，使按钮和表格的风格一致。把下面的代码加到CSS样式里。

.submitbutton{

border: 0px;

float:right;

width:75px;

height:40px;

font:20px Arial;

position:relative;

top:20px;

right:10px;

-moz-border-radius: 8px;

-webkit-border-radius: 8px;

border-radius: 8px;

-moz-box-shadow: 0px 0px 30px #3cdfdf;

-webkit-box-shadow: 0px 0px 30px #3cdfdf;

box-shadow: 0px 0px 30px #3cdfdf;

background-image: -moz-linear-gradient(top, white, #3cdfdf); /* FF3.6 */

background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, white),color-stop(1, #3cdfdf)); /* Saf4+, Chrome */

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='white', EndColorStr='#3cdfdf'); /* IE6,IE7 */

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='white', EndColorStr='#3cdfdf')"; /* IE8 */

}

.submitbutton:hover{

background: #3cdfdf;

color:white;

}

以上的CSS代码我们给提交按钮的背景图片设置了线性渐变效果，我们只是改变了整个背景色为＃3cdfdf（旱厕蓝色）和文本颜色为白色。

提交按钮就有点霓虹灯的效果。

第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设置，并改变其背景为黑色。

1-100HQ13559.zip

(责任编辑：admin)

Client端异步Callback实现的原理	jQuery+ASP.NET的AJAX文件上传
使用CSS3 and jQuery 实现霓虹灯闪烁效果	Ajax简介及几种常见框架的使用说明
使用Ajax和Jquery实现GridView的展开、合并	使用AjaxPro实现无刷新加法计算
Atlas在UpdatePanel里面上传附件	jQuery实现横向纵向菜单
ajax下RegisterClientScriptBlock使用	AjaxPro在.NET中的应用
Jquery之Ajax运用_学习运用篇	ajax的简单应用
AjaxPro.2.dll使用中出现页面未定义错误的解决办法	基于jQuery的AJAX和JSON实现纯html数据模板
ASP.NET AJAX学习系列(8)：自定义异常处理	jQuery在asp.net中实现图片自动滚动
在ASP.NET AJAX中防止用户多次提交页面	JQ获取服务器端控件值小结

ASP.NET学习网|ASP.NET教程|ASP.NET MVC|ASP.NET 源码|VS2010教程|ASP.NET视频教程

热门标签

使用CSS3 and jQuery 实现霓虹灯闪烁效果

Tags：jQuery CSS