素材牛

jQuery蓝色动态登录背景页面

 所属分类:网站模版-登录注册页模版

 浏览:461次-  下载:7次-  评论:2次-  发布时间:2018-12-24
jQuery蓝色动态登录背景页面兼容IE9
积分说明:注册即送5牛币,每天签到可获得5牛币,第三方账号登陆、注册直接赠送20牛币!    我要充值   更多积分说明»
素材描述:漂亮大气的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;
}

文件目录结构

  • ┝ jquery.min.js
  • ┝ style.css
  • ┝ vector.js

讨论这个素材(2)回答他人问题或分享使用心得会奖励牛币

3541555849
2018年12月27日

注释很详细

回复
维维哥哥
2019年01月23日

注释很详细

回复
horse320
2019年02月12日

颜色如果能深邃点也许会更好

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:7
所需牛币:15 开始下载

牛币获取:可通过签到、评论、充值、发布素材获得 » 牛币充值

会员账号
会员密码
安全验证