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;
}

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

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » jquery动态登录背景加css3动画

发表回复