超酷CSS3发光搜索框表单提交js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是超酷CSS3发光搜索框表单提交js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>超酷CSS3发光搜索框表单提交</title>
<!--html5默认设置-->
<link rel="stylesheet" href="css/normalize.css">
<!--css3必要样式-->
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

</head>
<body>
<section class="webdesigntuts-workshop">
	<form action="" method="post">		    
		<input type="search" placeholder="What are you looking for?">		    	
		<button>Search</button>
	</form>
</section>
</body>
</html>

CSS代码(normalize.css):

html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
audio:not([controls]){display:none;height:0}
[hidden],template{display:none}
a{background:transparent}
a:active,a:hover{outline:0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:bold}
dfn{font-style:italic}
h1{font-size:2em;margin:0.67em 0}
mark{background:#ff0;color:#000}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em}
sub{bottom:-0.25em}
img{border:0}
svg:not(:root){overflow:hidden}
figure{margin:1em 40px}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
pre{overflow:auto}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}
button{overflow:visible}
button,select{text-transform:none}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
input{line-height:normal}
input[type="checkbox"],input[type="radio"]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}
legend{border:0;padding:0}
textarea{overflow:auto}
optgroup{font-weight:bold}
table{border-collapse:collapse;border-spacing:0}
td,th{padding:0}

CSS代码(style.css):

@import url(http://fonts.googleapis.com/css?family=Cabin:400);.webdesigntuts-workshop{background:#151515;height:100%;position:absolute;text-align:center;width:100%;}
.webdesigntuts-workshop:before,.webdesigntuts-workshop:after{content:'';display:block;height:1px;left:50%;margin:0 0 0 -400px;position:absolute;width:800px;}
.webdesigntuts-workshop:before{background:#444;background:-webkit-linear-gradient(left,#151515,#444,#151515);background:-moz-linear-gradient(left,#151515,#444,#151515);background:-o-linear-gradient(left,#151515,#444,#151515);background:-ms-linear-gradient(left,#151515,#444,#151515);background:linear-gradient(left,#151515,#444,#151515);top:192px;}
.webdesigntuts-workshop:after{background:#000;background:-webkit-linear-gradient(left,#151515,#000,#151515);background:-moz-linear-gradient(left,#151515,#000,#151515);background:-o-linear-gradient(left,#151515,#000,#151515);background:-ms-linear-gradient(left,#151515,#000,#151515);background:linear-gradient(left,#151515,#000,#151515);top:191px;}
.webdesigntuts-workshop form{background:#111;background:-webkit-linear-gradient(#1b1b1b,#111);background:-moz-linear-gradient(#1b1b1b,#111);background:-o-linear-gradient(#1b1b1b,#111);background:-ms-linear-gradient(#1b1b1b,#111);background:linear-gradient(#1b1b1b,#111);border:1px solid #000;border-radius:5px;box-shadow:inset 0 0 0 1px #272727;display:inline-block;font-size:0px;margin:150px auto 0;padding:20px;position:relative;z-index:1;}
.webdesigntuts-workshop input{background:#222;background:-webkit-linear-gradient(#333,#222);background:-moz-linear-gradient(#333,#222);background:-o-linear-gradient(#333,#222);background:-ms-linear-gradient(#333,#222);background:linear-gradient(#333,#222);border:1px solid #444;border-radius:5px 0 0 5px;box-shadow:0 2px 0 #000;color:#888;display:block;float:left;font-family:'Cabin',helvetica,arial,sans-serif;font-size:13px;font-weight:400;height:40px;margin:0;padding:0 10px;text-shadow:0 -1px 0 #000;width:200px;}
.ie .webdesigntuts-workshop input{line-height:40px;}
.webdesigntuts-workshop input::-webkit-input-placeholder{color:#888;}
.webdesigntuts-workshop input:-moz-placeholder{color:#888;}
.webdesigntuts-workshop input:focus{-webkit-animation:glow 800ms ease-out infinite alternate;-moz-animation:glow 800ms ease-out infinite alternate;-o-animation:glow 800ms ease-out infinite alternate;-ms-animation:glow 800ms ease-out infinite alternate;animation:glow 800ms ease-out infinite alternate;background:#222922;background:-webkit-linear-gradient(#333933,#222922);background:-moz-linear-gradient(#333933,#222922);background:-o-linear-gradient(#333933,#222922);background:-ms-linear-gradient(#333933,#222922);background:linear-gradient(#333933,#222922);border-color:#393;box-shadow:0 0 5px rgba(0,255,0,.2),inset 0 0 5px rgba(0,255,0,.1),0 2px 0 #000;color:#efe;outline:none;}
.webdesigntuts-workshop input:focus::-webkit-input-placeholder{color:#efe;}
.webdesigntuts-workshop input:focus:-moz-placeholder{color:#efe;}
.webdesigntuts-workshop button{background:#222;background:-webkit-linear-gradient(#333,#222);background:-moz-linear-gradient(#333,#222);background:-o-linear-gradient(#333,#222);background:-ms-linear-gradient(#333,#222);background:linear-gradient(#333,#222);-webkit-box-sizing:content-box;-moz-box-sizing:content-box;-o-box-sizing:content-box;-ms-box-sizing:content-box;box-sizing:content-box;border:1px solid #444;border-left-color:#000;border-radius:0 5px 5px 0;box-shadow:0 2px 0 #000;color:#fff;display:block;float:left;font-family:'Cabin',helvetica,arial,sans-serif;font-size:13px;font-weight:400;height:40px;line-height:40px;margin:0;padding:0;position:relative;text-shadow:0 -1px 0 #000;width:80px;}
.webdesigntuts-workshop button:hover,.webdesigntuts-workshop button:focus{background:#292929;background:-webkit-linear-gradient(#393939,#292929);background:-moz-linear-gradient(#393939,#292929);background:-o-linear-gradient(#393939,#292929);background:-ms-linear-gradient(#393939,#292929);background:linear-gradient(#393939,#292929);color:#5f5;outline:none;}
.webdesigntuts-workshop button:active{background:#292929;background:-webkit-linear-gradient(#393939,#292929);background:-moz-linear-gradient(#393939,#292929);background:-o-linear-gradient(#393939,#292929);background:-ms-linear-gradient(#393939,#292929);background:linear-gradient(#393939,#292929);box-shadow:0 1px 0 #000,inset 1px 0 1px #222;top:1px;}
@-webkit-keyframes glow{0%{border-color:#393;box-shadow:0 0 5px rgba(0,255,0,.2),inset 0 0 5px rgba(0,255,0,.1),0 2px 0 #000;}
100%{border-color:#6f6;box-shadow:0 0 20px rgba(0,255,0,.6),inset 0 0 10px rgba(0,255,0,.4),0 2px 0 #000;}
}
@-moz-keyframes glow{0%{border-color:#393;box-shadow:0 0 5px rgba(0,255,0,.2),inset 0 0 5px rgba(0,255,0,.1),0 2px 0 #000;}
100%{border-color:#6f6;box-shadow:0 0 20px rgba(0,255,0,.6),inset 0 0 10px rgba(0,255,0,.4),0 2px 0 #000;}
}
@-o-keyframes glow{0%{border-color:#393;box-shadow:0 0 5px rgba(0,255,0,.2),inset 0 0 5px rgba(0,255,0,.1),0 2px 0 #000;}
100%{border-color:#6f6;box-shadow:0 0 20px rgba(0,255,0,.6),inset 0 0 10px rgba(0,255,0,.4),0 2px 0 #000;}
}
@-ms-keyframes glow{0%{border-color:#393;box-shadow:0 0 5px rgba(0,255,0,.2),inset 0 0 5px rgba(0,255,0,.1),0 2px 0 #000;}
100%{border-color:#6f6;box-shadow:0 0 20px rgba(0,255,0,.6),inset 0 0 10px rgba(0,255,0,.4),0 2px 0 #000;}
}
@keyframes glow{0%{border-color:#393;box-shadow:0 0 5px rgba(0,255,0,.2),inset 0 0 5px rgba(0,255,0,.1),0 2px 0 #000;}
100%{border-color:#6f6;box-shadow:0 0 20px rgba(0,255,0,.6),inset 0 0 10px rgba(0,255,0,.4),0 2px 0 #000;}
}

附件:下载该文件资源,减少时间成本(增值服务)