jquery动态登录背景加css3动画

jquery动态登录背景加css3动画

jquery动态背景加css3动画

Victor("container", "output"); //登陆背景函数调用
$("#entry_name").focus();
$(document).keydown(function(event) {
    if (event.keyCode == 13) {
        $("#entry_btn").click();
    }
});

通过动画实现登录框的显示与提示

.containerT {
   width:400px;
   height:300PX;
   text-align: center;
   position: absolute;
   top:50%;
   left:50%;
   margin:-150px 0 0 -200px;
   border-radius: 3px;
}
.containerT h1 {
   font-size:18px;
   font-family: "Microsoft YaHei", Arial, sans-serif;
   -webkit-transition-duration: 1s;
   transition-duration: 1s;
   -webkit-transition-timing-function: ease-in-put;
   transition-timing-function: ease-in-put;
   font-weight:500;
}
form {
   padding: 20px 0;
   position: relative;
   z-index: 2;
}
form input {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   outline: 0;
   border: 1px solid rgba(255, 255, 255, 0.4);
   background-color: rgba(255, 255, 255, 0.2);
   width: 200px;
   border-radius: 3px;
   padding: 8px 15px;
   margin: 0 auto 10px auto;
   display: block;
   text-align: center;
   font-size:15px;
   color: white;
   -webkit-transition-duration: 0.25s;
   transition-duration: 0.25s;
   font-weight: 300;
}
form input:hover {
   background-color: rgba(255, 255, 255, 0.4);
}
form input:focus {
   background-color: white;
   width:230px;
   color: #333;
}
form button {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   outline: 0;
   background-color: white;
   border: 0;
   padding: 10px 15px;
   color: #333;
   border-radius: 3px;
   width: 200px;
   cursor: pointer;
   font-family: "Microsoft YaHei", Arial, sans-serif;
   font-size: 16px;
   font-weight: 700;
   -webkit-transition-duration: 0.25s;
   transition-duration: 0.25s;
}
form button:hover {
   background-color: #f5f7f9;
}

找的更少,做的更多!码云笔记只为您提供最好的!

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » jquery动态登录背景加css3动画

发表评论

提供最优质的资源集合

立即查看 了解详情