.login{position:relative;background-position:center;background-size:cover}
#login h1 a{border-radius:50px;box-shadow:0 0 10px 5px #e4eaef;background-size:100%;background-position:center;margin:0 auto;width:80px;outline:none;height:80px;transition:all 0.2s}
#login{position:absolute;left:50%;margin-left:-200px;padding:0;top:50%;margin-top:-300px;background:#fff;width:400px;border-radius:4px}
#login h1{padding:30px 0}
#login h1 a:hover{box-shadow:0 0 10px 5px #bfd9ef}
#login form{box-shadow:none;margin-top:0;padding:10px 30px 2px;border:0}
#login form input{padding:7px 10px;margin-top:8px;font-size:16px;border-radius:4px;height:40px}
#login form input:focus{border-color:#419df5;box-shadow:0 0 2px #7bb8f3}
#login form .forgetmenot{padding-bottom:20px;padding-top:7px}
#login form .forgetmenot input[type=checkbox],#login form .forgetmenot input[type=radio]{width:20px;height:20px;margin-top:0}
#login form .submit{float:none}
#login form .submit input[type=submit]{width:100%;background:#419df5;border-color:#419df5;line-height:40px;padding:0;text-shadow:none;box-shadow:none}
#login #nav,#login #backtoblog{padding-left:30px}
@media screen and (max-width:767px){#login{left:5%;margin-left:0;width:90%}
}
.login #login_error{width:76%;margin:0 auto}
.login .button.wp-hide-pw .dashicons{top:.8rem}
/*登录框表单*/
.login form, .login .message {
background: #fff;
background: rgba(255, 255, 255, 0.3);
border-radius: 3px;
border: 1px solid #fff;
border: 1px solid rgba(255, 255, 255, 0.4);
-webkit-animation: fadeIn 1s linear;
animation: fadeIn 1s linear;
}

/*登录框输入框*/
.login label {
color: #000;
}
.login .message {
color: #000;
}
#user_login{
font-size: 18px;
line-height: 32px;
}

/* 返回博客与忘记密码链接 */
#backtoblog a, #nav a {
display: inline-block;
-webkit-animation: rtol 1s linear;
animation: rtol 1s linear;
}

/*掉落的动画效果*/
@-webkit-keyframes dropIn {
0% {
-webkit-transform: translate3d(0, -100px, 0)
}
100% {
-webkit-transform: translate3d(0, 0, 0)
}
}
@keyframes dropIn {
0% {
transform: translate3d(0, -100px, 0)
}
100% {
transform: translate3d(0, 0, 0)
}
}
/*逐渐出现的动画效果*/
@-webkit-keyframes fadeIn {
from {
opacity: 0;
-webkit-transform: scale(.8) translateY(20px)
}
to {
opacity: 1;
-webkit-transform: scale(1) translateY(0)
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: scale(.8) translateY(20px)
}
to {
opacity: 1;
transform: scale(1) translateY(0)
}
}

/*从右往左的动画效果*/
@-webkit-keyframes rtol {
from {
-webkit-transform: translate(80px, 0)
}
to {
-webkit-transform: translate(0, 0)
}
}
@keyframes rtol {
from {
transform: translate(80px, 0)
}
to {
transform: translate(0, 0)
}
}