<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; width: 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; width: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="width: 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>