CSS3登录表单-超酷外发光火焰效果

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery+CSS3超炫外发光效果的登录表单</title>
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
body{font-weight: lighter;margin-top: 1.0em;background-color: #000;font-family: Helvetica, Arial, FreeSans, san-serif;color: #555;}
#container{margin: 0 auto;width: 700px;}
h1{font-size: 3.8em;color: #edece8;margin-bottom: 3px;text-shadow: 0 1px 0px rgba(0,0,0, .2)}
h1 .small{font-size: 0.3em;font-weight: lighter;color: #444;}
h1 a{color: #666;text-decoration: none}
h2{font-size: 1.5em;color: #555;text-shadow: 0 1px 0px rgba(0,0,0, .2)}
h3{text-align: center;color: #555;text-shadow: 0 1px 0px rgba(0,0,0, .2)}
a{color: #777;}
.description{font-size: 1.0em;margin-bottom: 30px;margin-top: 30px;color: #666;text-shadow: 0 1px 0px rgba(0,0,0, .2)}
pre{color: #fff;padding: 15px;}
hr{border: 0;width: 80%;border-bottom: 1px solid #aaa}
.footer{padding-top: 30px;font-weight: lighter;}
.border,.rain{height: 170px;width: 320px;}
.rain{padding: 10px 12px 12px 10px;-moz-box-shadow: 10px 10px 10px rgba(0,0,0,1) inset, -9px -9px 8px rgba(0,0,0,1) inset;-webkit-box-shadow: 8px 8px 8px rgba(0,0,0,1) inset, -9px -9px 8px rgba(0,0,0,1) inset;box-shadow: 8px 8px 8px rgba(0,0,0,1) inset, -9px -9px 8px rgba(0,0,0,1) inset;margin: 100px 0 200px 0;}
.border{padding: 1px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
.border,.rain,.border.start,.rain.start{background-repeat: repeat-x, repeat-x, repeat-x, repeat-x;background-position: 0 0, 0 0, 0 0, 0 0;background-image: -moz-linear-gradient(left, #09BA5E 0%, #00C7CE 15%, #3472CF 26%, #00C7CE 48%, #0CCF91 91%, #09BA5E 100%);background-image: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(0,0,0,.3)), color-stop(23%,rgba(0,0,0,.1)), color-stop(40%,rgba(255,231,87,.1)), color-stop(61%,rgba(255,231,87,.2)), color-stop(70%,rgba(255,231,87,.1)), color-stop(80%,rgba(0,0,0,.1)), color-stop(100%,rgba(0,0,0,.25)));background-color: #39f;/* Just do something for IE-suck*/filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00BA1B', endColorstr='#00BA1B',GradientType=1 );}
.border.end,.rain.end{-moz-transition-property: background-position;-moz-transition-duration: 30s;-moz-transition-timing-function: linear;-webkit-transition-property: background-position;-webkit-transition-duration: 30s;-webkit-transition-timing-function: linear;-o-transition-property: background-position;-o-transition-duration: 30s;-o-transition-timing-function: linear;transition-property: background-position;transition-duration: 30s;transition-timing-function: linear;background-position: -5400px 0, -4600px 0, -3800px 0, -3000px 0;}
@-webkit-keyframes colors{0%{background-color: #39f;}
15%{background-color: #F246C9;}
30%{background-color: #4453F2;}
45%{background-color: #44F262;}
60%{background-color: #F257D4;}
75%{background-color: #EDF255;}
90%{background-color: #F20006;}
100%{background-color: #39f;}
} .border,.rain{-webkit-animation-direction: normal;-webkit-animation-duration: 20s;-webkit-animation-iteration-count: infinite;-webkit-animation-name: colors;-webkit-animation-timing-function: ease;}
.border.unfocus{background: #333 !important;-moz-box-shadow: 0px 0px 15px rgba(255,255,255,.2);-webkit-box-shadow: 0px 0px 15px rgba(255,255,255,.2);box-shadow: 0px 0px 15px rgba(255,255,255,.2);-webkit-animation-name: none;}
.rain.unfocus{background: #000 !important;-webkit-animation-name: none;}
form{background: #212121;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;height: 100%;width: 100%;background: -moz-radial-gradient(50% 46% 90deg,circle closest-corner, #252525, #090909);background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 150, from(#252525), to(#090909));}
form label{display: block;padding: 10px 10px 5px 15px;font-size: 11px;color: #777;}
form input{display: block;margin: 5px 10px 10px 15px;width: 85%;background: #111;-moz-box-shadow: 0px 0px 4px #000 inset;-webkit-box-shadow: 0px 0px 4px #000 inset;box-shadow: 0px 0px 4px #000 inset;outline: 1px solid #333;border: 1px solid #000;padding: 5px;color: #444;font-size: 16px;}
form input: focus{outline: 1px solid #555;color: #FFF;}
input[type="submit"]{color: #999;padding: 5px 10px;float: right;margin: 20px 0;border: 1px solid #000;font-weight: lighter;-moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;background: #45484d;background: -moz-linear-gradient(top, #222 0%, #111 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222), color-stop(100%,#111));filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#22222', endColorstr='#111111',GradientType=0 );-moz-box-shadow: 0px 1px 1px #000, 0px 1px 0px rgba(255,255,255,.3) inset;-webkit-box-shadow: 0px 1px 1px #000, 0px 1px 0px rgba(255,255,255,.3) inset;box-shadow: 0px 1px 1px #000,0px 1px 0px rgba(255,255,255,.3) inset;text-shadow: 0 1px 1px #000;}
</style>
<script>
$(function(){
	var $form_inputs =   $('form input');
	var $rainbow_and_border = $('.rain, .border');
	$form_inputs.bind('focus', function(){
		$rainbow_and_border.addClass('end').removeClass('unfocus start');
	});
	$form_inputs.bind('blur', function(){
	$rainbow_and_border.addClass('unfocus start').removeClass('end');
	});
	$form_inputs.first().delay(800).queue(function() {
	$(this).focus();
	});
});
</script>
</head>
<body>
<div id="container">
<div class="description">
支持的浏览器: Safari, Chrome<br/>
Alternate animation: Firefox 4<br/>
</div>
<div class="rain">
	<div class="border start">
		<form>
		<label for="email">Email</label>
		<input name="email" type="text" placeholder="Email"/>
		<label for="pass">Password</label>
		<input name="pass" type="password" placeholder="Password"/>
		</form>
	</div>
	<input type="submit" value="LOG IN"/>
</div>
</div>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

CSS3登录表单-超酷外发光火焰效果

分类

表单按钮

描述

一款基于CSS3和jquery的登录表单特效，创意也是很不错的，采用外发光的火焰效果，鼠标点击登录框的时候，整个表单的外框发出蓝光，而且带有闪耀效果，我觉得非常非常漂亮，只可惜IE8现在还不支持CSS3,IE8一大悲催！！