|
|
.login-block {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
margin-top: calc(3%);
|
width: 380px;
|
height: 480px;
|
background: #35cfbb;
|
border-radius: 10px;
|
box-shadow: 0 0 16px #333;
|
opacity: 0.85;
|
}
|
|
/*密码框输入状态*/
|
.login-animate,
|
.password-animate {
|
width: 11em;
|
height: 11em;
|
border-radius: 6em;
|
background: #cefefb;
|
margin: 20px 0;
|
position: relative;
|
overflow: hidden;
|
}
|
|
/*div下产生过度动画的时间*/
|
.login-animate div,
|
.password-animate div {
|
transition: all 0.5s;
|
-o-transition: all 0.5s;
|
/* Opera */
|
-moz-transition: all 0.5s;
|
/* Firefox 4 */
|
-webkit-transition: all 0.5s;
|
/* Safari and Chrome */
|
}
|
|
.login-animate .body {
|
background-image: url(./img/body.png);
|
background-size: 95%;
|
background-repeat: no-repeat;
|
background-position: center;
|
width: 6.9em;
|
height: 5.5em;
|
position: absolute;
|
bottom: -2em;
|
left: calc(50% - 3.4em);
|
z-index: 0;
|
}
|
|
.login-animate .head {
|
background-image: url(./img/face.png);
|
background-size: 100%;
|
background-repeat: no-repeat;
|
background-position: center;
|
width: 7.3em;
|
height: 6.3em;
|
position: absolute;
|
bottom: 1em;
|
bottom: 1.15em;
|
left: calc(50% - 3.6em);
|
z-index: 1;
|
-webkit-transform: rotate(0deg);
|
-ms-transform: skew(30deg);
|
}
|
|
.login-animate .left-ear {
|
background-image: url(./img/left-ear.png);
|
background-size: 85%;
|
background-repeat: no-repeat;
|
background-position: center;
|
width: 3em;
|
height: 3.5em;
|
position: absolute;
|
bottom: 4.8em;
|
left: calc(50% - 4.4em);
|
}
|
|
|
.height-eys-doe {
|
background-image: url(./img/eye-doe.png) !important;
|
}
|
|
.login-animate .right-ear {
|
background-image: url(./img/right-ear.png);
|
background-size: 86%;
|
background-repeat: no-repeat;
|
background-position: center;
|
width: 3em;
|
height: 3.5em;
|
position: absolute;
|
bottom: 4.55em;
|
left: calc(50% + 1.5em);
|
}
|
|
.login-animate .left-eye {
|
background-image: url(./img/eye.png);
|
background-size: 86%;
|
background-repeat: no-repeat;
|
background-position: center;
|
width: 1em;
|
height: 1em;
|
position: absolute;
|
bottom: 3.55em;
|
left: calc(50% - 2.3em);
|
}
|
|
.login-animate .right-eye {
|
background-image: url(./img/eye.png);
|
background-size: 85%;
|
background-repeat: no-repeat;
|
background-position: center;
|
width: 1em;
|
height: 1em;
|
position: absolute;
|
bottom: 3.55em;
|
left: calc(50% + 1.25em);
|
}
|
|
.login-animate .face {
|
background-image: url(./img/muzzle.png);
|
background-size: 78%;
|
background-repeat: no-repeat;
|
background-position: center;
|
width: 5.0em;
|
height: 4em;
|
position: absolute;
|
bottom: 0em;
|
left: calc(50% - 2.5em);
|
}
|
|
.login-animate .nose {
|
background-image: url(./img/nose.png);
|
background-size: 95%;
|
background-repeat: no-repeat;
|
background-position: center;
|
width: 1em;
|
height: 1em;
|
position: absolute;
|
top: 0.6em;
|
left: calc(50% - 0.5em);
|
}
|
|
.login-animate .mouth {
|
background-image: url(./img/mouth-smile.png);
|
background-size: 100%;
|
background-repeat: no-repeat;
|
background-position: center;
|
width: 2em;
|
height: 1em;
|
position: absolute;
|
bottom: 1.0em;
|
left: calc(50% - 1em);
|
}
|
|
.login-animate .left-arm {
|
background-image: url(./img/left-arm.png);
|
background-size: 85%;
|
background-repeat: no-repeat;
|
background-position: center;
|
width: 3em;
|
height: 7em;
|
position: absolute;
|
bottom: -7.5em;
|
left: 2em;
|
z-index: 2;
|
transition: bottom 0.5s;
|
}
|
|
.login-animate .right-arm {
|
background-image: url(./img/right-arm.png);
|
background-size: 85%;
|
background-repeat: no-repeat;
|
background-position: center;
|
width: 3em;
|
height: 7em;
|
position: absolute;
|
bottom: -7.5em;
|
left: 6em;
|
z-index: 2;
|
transition: bottom 0.5s;
|
}
|
|
.password-animate .mouth.show {
|
width: 1em;
|
left: calc(50% - 0.5em);
|
background-image: url(./img/mouth-circle.png);
|
}
|
|
.password-animate .left-arm.show,
|
.password-animate .right-arm.show {
|
bottom: -1.3em !important;
|
}
|
|
.password-animate .left-arm,
|
.password-animate .right-arm {
|
bottom: -0.5em;
|
}
|
|
.username-animate .left-ear {
|
left: 1.5em;
|
}
|
|
.username-animate .right-ear {
|
left: 7em;
|
bottom: 3.9em;
|
}
|
|
.username-animate .left-eye {
|
left: 0.5em;
|
bottom: 3.0em;
|
}
|
|
/*双眼发光*/
|
.username-animate .left-eye.doe,
|
.username-animate .right-eye.doe {
|
background-image: url(./img/eye-doe.png);
|
}
|
|
/*点击输入的时候各部位移动位置*/
|
.username-animate .right-eye {
|
left: 4em;
|
bottom: 3.0em;
|
}
|
|
.username-animate .face {
|
left: 1em;
|
bottom: -0.4em;
|
}
|
|
.username-animate .nose {
|
left: 1.4em;
|
top: 0.65em;
|
}
|
|
.username-animate .mouth {
|
bottom: 0.75em;
|
background-image: url(./img/mouth-half.png);
|
}
|
|
.username-animate .mouth.doe {
|
background-image: url(./img/mouth-open.png);
|
height: 2em;
|
bottom: 0.5em;
|
}
|
|
.login-form {
|
width: calc(65%);
|
padding: 0 2.5em;
|
|
}
|
|
.username,
|
.password {
|
position: relative;
|
width: 100%;
|
margin: 20px 0;
|
border-radius: 5px;
|
overflow: hidden;
|
box-shadow: 0 0 5px 0 #333;
|
}
|
|
.username>input,
|
.password>input {
|
/* width: calc(100% - 20px); */
|
width: calc(100%);
|
padding: 0 10px;
|
height: 2.5em;
|
border: 0;
|
border-radius: 5px;
|
}
|
|
.password>input {
|
/* width: calc(100% - 3.3em); */
|
width: calc(100%);
|
padding: 0 2.3em 0 1em;
|
}
|
|
.pwd-eye {
|
width: 1.2em;
|
height: 1.2em;
|
position: absolute;
|
top: calc(50% - 0.6em);
|
right: 0.5em;
|
background-size: 85%;
|
background-repeat: no-repeat;
|
background-position: center;
|
background-image: url('./img/password-show.png');
|
}
|
|
.pwd-eye-show {
|
background-image: url('./img/password-show.png');
|
}
|
|
|
.pwd-eye-hide{
|
background-image: url('./img/password-hide.png');
|
}
|
