<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{margin:0;padding:0;}
body{
background: url("bg.jpg");
background-size: cover;
}
input{
outline: none;
300px;
height: 24px;
border: 1px solid #0bbdff;
text-indent: .5em;
-webkit-box-shadow: 0 0 0px 40px #fff inset;
-o-box-shadow: 0 0 0px 40px #fff inset;
-ms-box-shadow: 0 0 0px 40px #fff inset;
-moz-box-shadow: 0 0 0px 40px #fff inset;
box-shadow: 0 0 0px 40px #fff inset;
}
html,body{
margin:0;
padding:0;
text-align:center;
font-size:12px;}
.login-box{
border: 1px solid #fff;
400px;
background: #fff;
opacity: .7;
padding: 80px 10px;
line-height: 20px;
margin-left:auto;
margin-right:auto;
margin-top: 50px;
}
#btn{
cursor: pointer;
}
</style>
</head>
<body>
<div class="login-box" >
<form action="#" method="post">
<dl class="login-pannel">
<dd>
昵称：<input type="text" name="name" id="name" /><br><br>
</dd>
<dd>
密码：<input type="password" name="pwd" id="pwd"/><br><br>
</dd>
<dd >
<input type="button" id="btn" value="登录" style=" 340px"/>
</dd>
</dl>
</form>
</div>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(function(){
var user=document.getElementById('name');
var pwd=document.getElementById('pwd');
$("#btn").click(function(){
flash('.login-box',5,10,100);
});
});
/*
*
* 控件震动动画
* obj控件
* time震动时间长——短循环长度
* wh震动幅度px
* fx动画速度s
*/
function flash(obj,time,wh,fx)
{
$(function(){
var $panel = $(obj);
var offset = $panel.offset()-$panel.width();
var x= offset.left;
var y= offset.top;
for(var i=1; i <= time; i++){
if(i%2==0)
{
$panel.animate({left:'+'+wh+'px'},fx);
}else
{
$panel.animate({left:'-'+wh+'px'},fx);
}
}
$panel.animate({left:0},fx);
$panel.offset({ top: y, left: x });
})
}
</script>