带有交互动画特效的webapp登录输入密码
一个比较有创意的登录页面，当你focus密码框即将输入密码的时候，卡通人物会捂住自己的眼睛，blur的时候他就会放开手，非常可爱
<!-- HTML代码片段中请勿添加<body>标签 //-->
<form id="login-form" class="login-form">
<div class="cartoon">
<div id="handLeft" class="hand-left">
<div class="hand"></div>
</div>
<div id="handRight" class="hand-right">
<div class="hand"></div>
</div>
</div>
<div class="it-text-list it-box">
<div class="it-label">账号</div>
<div class="it-input">
<input type="text" placeholder="请输入注册手机号" name="phoneNum" id="phoneNum">
</div>
</div>
<div class="it-text-list it-text-bottom it-box">
<div class="it-label">密码</div>
<div class="it-input">
<input type="password" placeholder="请输入密码" name="password" id="password">
</div>
</div>
</form>
<div class="cn-buttons">
<div class="button bt-red">登录</div>
</div>
<div class="cn-buttons">
<div class="button bt-white">注册</div>
</div>
<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
/*CSS源代码*/
body { font: 16px/1.5 'STHeiti-Light', 'STXihei', 'HelveticaNeue', 'Helvetica', 'Simsun', Sans-serif; background: #F1F0F6; color: #333; -webkit-text-size-adjust: none; width: 100%; height: 100%; min-width: 320px; min-height: 480px; padding: 0px 0 10px 0 }
.it-box { display: -webkit-box; background-color: #FFF; font-size: 16px; position: relative }
.it-text-list { width: 100%; height: 42px; background-color: #FFF; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #E0E0E0), to(#E0E0E0)); background-repeat: repeat-x; background-position: left top; background-size: 100% 1px; text-align: right }
.it-text-bottom { width: 100%; height: 42px; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #E0E0E0), to(#E0E0E0)), -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #E0E0E0), to(#E0E0E0)); background-repeat: repeat-x; background-position: left top, left bottom; background-size: 100% 1px; text-align: right }
.it-text-list .it-label { margin-left: 18px; min-width: 30px; margin-right: 10px; height: 42px; text-align: left; line-height: 42px }
.it-text-list .it-line { margin-left: 18px; min-width: 20px; height: 42px; text-align: left; line-height: 42px; -webkit-box-flex: 1; }
.it-text-list .it-input { position: relative; -webkit-box-flex: 1.0; margin-right: 18px; height: 40px; line-height: 40px; padding: 1px 0 }
.it-text-list .it-input input, .it-text-list .it-input .input { position: absolute; top: 1px;bottom:0; right: 0; text-align: right; border: 0; width: 100%; background-color: #FFF }
.cn-buttons { padding: 0 18px 0 18px; height: 43px;margin:10px 0; }
.cn-buttons .button { display: block; margin: auto; height: 41px; border-radius: 3px; text-align: center; line-height: 41px; font-size: 16px; }
.cn-buttons .button a { display: inline-block; width: 100%; height: 100%; color: inherit }
.cn-buttons .bt-red { background-color: #DF3031; color: #FFF; border: 1px solid #DF3031 }
.cn-buttons .bt-white { background-color: #FFF; border: 1px solid #CCC }
.login-form { position: relative; display: block; margin: 180px 18px 30px; border-radius: 10px; box-shadow: 0 3px 5px #DDD; background: #FFF }
.login-form .it-text-list { background-image: none; }
.login-form .it-text-bottom { background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #E0E0E0), to(#E0E0E0)) }
.login-form .cartoon { position: absolute; top: -110px; left: 50%; margin-left: -77px; width: 155px; height: 110px; background: url("http://xfw8.sinaapp.com/webapp/static/mobile/image/cartoon-head.png") no-repeat center center; background-size: 155px; }
.login-form .cartoon .hand-left { position: absolute; left: -10px; bottom: -50px; width: 37px; height: 50px; background: url("http://xfw8.sinaapp.com/webapp/static/mobile/image/cartoon-hand-left.png") no-repeat center center; background-size: 37px; }
.login-form .cartoon .hand-right { position: absolute; right: -10px; bottom: -50px; width: 37px; height: 50px; background: url("http://xfw8.sinaapp.com/webapp/static/mobile/image/cartoon-hand-right.png") no-repeat center center; background-size: 37px; }
.login-form .cartoon .hand { position: absolute; z-index: 1; top: -10px; right: 0; width: 25px; height: 15px; background: #FCC4A9; border-radius: 100%; }
.login-form .cartoon .hand-right .hand { right: auto; left: 0; }
/*Javascript代码片段*/
$(".it-input input[type=password]").on("focus", function () {
$(".hand").hide();
$("#handLeft").animate({bottom: 0, left: 10});
$("#handRight").animate({bottom: 0, right: 10});
}).on("blur", function () {
$("#handLeft").animate({bottom: -50, left: -10});
$("#handRight").animate({bottom: -50, right: -10}, function () {
$(".hand").show();
});
});
.