使用CSS3 and jQuery 实现霓虹灯闪烁效果
2010-07-26 16:25
603 查看
使用CSS3 and jQuery 实现霓虹灯闪烁效果
使用CSS3 and jQuery 实现霓虹灯闪烁效果在本教程中，我们将教你如何在不使用FLASH，而仅仅是使用CSS3 和jQuery技术，就让你的输入框具有虹灯闪烁的效果。
首先让我们来看看效果图：
源代码下载：http://www.nnfj.net/uploads/soft/100726/1-100H6160320.zip
实现方法：
第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>
<!--div class="clear"></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
9f86
{
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设置，并改变其背景为黑色。
效果如下：
上面就是整个霓虹灯效果的实现过程。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用 CSS3 实现超炫的 Loading（加载）动画效果
- CSS3实战开发:使用CSS3实现photoshop的过滤效果
- 使用IE滤镜实现css3中rgba让背景色透明的效果
- 使用 CSS3 实现超炫的 Loading（加载）动画效果
- 使用CSS3实现翻书效果（二）
- 使用 CSS3 实现超炫的 Loading（加载）动画效果
- 使用css3来实现边框圆角效果
- 使用 CSS3 实现超炫的 Loading（加载）动画效果
- css3元素简单的闪烁效果实现(html5 jquery)
- android学习笔记6：使用Framelayout实现霓虹灯效果
- android脚步---使用framelayout实现霓虹灯效果
- 使用 CSS3 实现 3D 图片滑块效果
- 使用 CSS3 实现超炫的 Loading（加载）动画效果以及cs3的在线制作工具
- echarts使用笔记之实现让折线的拐点闪烁的效果
- 超慢速移动动画使用CSS3实现流畅效果
- 使用CSS3线性渐变实现图片闪光划过效果
- 使用CSS3线性渐变实现图片闪光划过效果
- H5使用canvas实现星星闪烁效果
- 使用 CSS3 可以实现的五种很酷很炫的效果
- 使用SVG + CSS实现动态霓虹灯文字效果