带有交互动画特效的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(); }); });
.