| commit | author | age | ||
| 6d1057 | 1 | |
| I | 2 | |
| 3 | .login-block { | |
| 4 | display: flex; | |
| 5 | flex-direction: column; | |
| 6 | align-items: center; | |
| 7 | margin-top: calc(3%); | |
| 8 | width: 380px; | |
| 9 | height: 480px; | |
| 10 | background: #35cfbb; | |
| 11 | border-radius: 10px; | |
| 12 | box-shadow: 0 0 16px #333; | |
| 13 | opacity: 0.85; | |
| 14 | } | |
| 15 | ||
| 16 | /*密码框输入状态*/ | |
| 17 | .login-animate, | |
| 18 | .password-animate { | |
| 19 | width: 11em; | |
| 20 | height: 11em; | |
| 21 | border-radius: 6em; | |
| 22 | background: #cefefb; | |
| 23 | margin: 20px 0; | |
| 24 | position: relative; | |
| 25 | overflow: hidden; | |
| 26 | } | |
| 27 | ||
| 28 | /*div下产生过度动画的时间*/ | |
| 29 | .login-animate div, | |
| 30 | .password-animate div { | |
| 31 | transition: all 0.5s; | |
| 32 | -o-transition: all 0.5s; | |
| 33 | /* Opera */ | |
| 34 | -moz-transition: all 0.5s; | |
| 35 | /* Firefox 4 */ | |
| 36 | -webkit-transition: all 0.5s; | |
| 37 | /* Safari and Chrome */ | |
| 38 | } | |
| 39 | ||
| 40 | .login-animate .body { | |
| 41 | background-image: url(./img/body.png); | |
| 42 | background-size: 95%; | |
| 43 | background-repeat: no-repeat; | |
| 44 | background-position: center; | |
| 45 | width: 6.9em; | |
| 46 | height: 5.5em; | |
| 47 | position: absolute; | |
| 48 | bottom: -2em; | |
| 49 | left: calc(50% - 3.4em); | |
| 50 | z-index: 0; | |
| 51 | } | |
| 52 | ||
| 53 | .login-animate .head { | |
| 54 | background-image: url(./img/face.png); | |
| 55 | background-size: 100%; | |
| 56 | background-repeat: no-repeat; | |
| 57 | background-position: center; | |
| 58 | width: 7.3em; | |
| 59 | height: 6.3em; | |
| 60 | position: absolute; | |
| 61 | bottom: 1em; | |
| 62 | bottom: 1.15em; | |
| 63 | left: calc(50% - 3.6em); | |
| 64 | z-index: 1; | |
| 65 | -webkit-transform: rotate(0deg); | |
| 66 | -ms-transform: skew(30deg); | |
| 67 | } | |
| 68 | ||
| 69 | .login-animate .left-ear { | |
| 70 | background-image: url(./img/left-ear.png); | |
| 71 | background-size: 85%; | |
| 72 | background-repeat: no-repeat; | |
| 73 | background-position: center; | |
| 74 | width: 3em; | |
| 75 | height: 3.5em; | |
| 76 | position: absolute; | |
| 77 | bottom: 4.8em; | |
| 78 | left: calc(50% - 4.4em); | |
| 79 | } | |
| 80 | ||
| 81 | ||
| 82 | .height-eys-doe { | |
| 83 | background-image: url(./img/eye-doe.png) !important; | |
| 84 | } | |
| 85 | ||
| 86 | .login-animate .right-ear { | |
| 87 | background-image: url(./img/right-ear.png); | |
| 88 | background-size: 86%; | |
| 89 | background-repeat: no-repeat; | |
| 90 | background-position: center; | |
| 91 | width: 3em; | |
| 92 | height: 3.5em; | |
| 93 | position: absolute; | |
| 94 | bottom: 4.55em; | |
| 95 | left: calc(50% + 1.5em); | |
| 96 | } | |
| 97 | ||
| 98 | .login-animate .left-eye { | |
| 99 | background-image: url(./img/eye.png); | |
| 100 | background-size: 86%; | |
| 101 | background-repeat: no-repeat; | |
| 102 | background-position: center; | |
| 103 | width: 1em; | |
| 104 | height: 1em; | |
| 105 | position: absolute; | |
| 106 | bottom: 3.55em; | |
| 107 | left: calc(50% - 2.3em); | |
| 108 | } | |
| 109 | ||
| 110 | .login-animate .right-eye { | |
| 111 | background-image: url(./img/eye.png); | |
| 112 | background-size: 85%; | |
| 113 | background-repeat: no-repeat; | |
| 114 | background-position: center; | |
| 115 | width: 1em; | |
| 116 | height: 1em; | |
| 117 | position: absolute; | |
| 118 | bottom: 3.55em; | |
| 119 | left: calc(50% + 1.25em); | |
| 120 | } | |
| 121 | ||
| 122 | .login-animate .face { | |
| 123 | background-image: url(./img/muzzle.png); | |
| 124 | background-size: 78%; | |
| 125 | background-repeat: no-repeat; | |
| 126 | background-position: center; | |
| 127 | width: 5.0em; | |
| 128 | height: 4em; | |
| 129 | position: absolute; | |
| 130 | bottom: 0em; | |
| 131 | left: calc(50% - 2.5em); | |
| 132 | } | |
| 133 | ||
| 134 | .login-animate .nose { | |
| 135 | background-image: url(./img/nose.png); | |
| 136 | background-size: 95%; | |
| 137 | background-repeat: no-repeat; | |
| 138 | background-position: center; | |
| 139 | width: 1em; | |
| 140 | height: 1em; | |
| 141 | position: absolute; | |
| 142 | top: 0.6em; | |
| 143 | left: calc(50% - 0.5em); | |
| 144 | } | |
| 145 | ||
| 146 | .login-animate .mouth { | |
| 147 | background-image: url(./img/mouth-smile.png); | |
| 148 | background-size: 100%; | |
| 149 | background-repeat: no-repeat; | |
| 150 | background-position: center; | |
| 151 | width: 2em; | |
| 152 | height: 1em; | |
| 153 | position: absolute; | |
| 154 | bottom: 1.0em; | |
| 155 | left: calc(50% - 1em); | |
| 156 | } | |
| 157 | ||
| 158 | .login-animate .left-arm { | |
| 159 | background-image: url(./img/left-arm.png); | |
| 160 | background-size: 85%; | |
| 161 | background-repeat: no-repeat; | |
| 162 | background-position: center; | |
| 163 | width: 3em; | |
| 164 | height: 7em; | |
| 165 | position: absolute; | |
| 166 | bottom: -7.5em; | |
| 167 | left: 2em; | |
| 168 | z-index: 2; | |
| 169 | transition: bottom 0.5s; | |
| 170 | } | |
| 171 | ||
| 172 | .login-animate .right-arm { | |
| 173 | background-image: url(./img/right-arm.png); | |
| 174 | background-size: 85%; | |
| 175 | background-repeat: no-repeat; | |
| 176 | background-position: center; | |
| 177 | width: 3em; | |
| 178 | height: 7em; | |
| 179 | position: absolute; | |
| 180 | bottom: -7.5em; | |
| 181 | left: 6em; | |
| 182 | z-index: 2; | |
| 183 | transition: bottom 0.5s; | |
| 184 | } | |
| 185 | ||
| 186 | .password-animate .mouth.show { | |
| 187 | width: 1em; | |
| 188 | left: calc(50% - 0.5em); | |
| 189 | background-image: url(./img/mouth-circle.png); | |
| 190 | } | |
| 191 | ||
| 192 | .password-animate .left-arm.show, | |
| 193 | .password-animate .right-arm.show { | |
| 4b854c | 194 | bottom: -1.3em !important; |
| 6d1057 | 195 | } |
| I | 196 | |
| 197 | .password-animate .left-arm, | |
| 198 | .password-animate .right-arm { | |
| 199 | bottom: -0.5em; | |
| 200 | } | |
| 201 | ||
| 202 | .username-animate .left-ear { | |
| 203 | left: 1.5em; | |
| 204 | } | |
| 205 | ||
| 206 | .username-animate .right-ear { | |
| 207 | left: 7em; | |
| 208 | bottom: 3.9em; | |
| 209 | } | |
| 210 | ||
| 211 | .username-animate .left-eye { | |
| 212 | left: 0.5em; | |
| 213 | bottom: 3.0em; | |
| 214 | } | |
| 215 | ||
| 216 | /*双眼发光*/ | |
| 217 | .username-animate .left-eye.doe, | |
| 218 | .username-animate .right-eye.doe { | |
| 219 | background-image: url(./img/eye-doe.png); | |
| 220 | } | |
| 221 | ||
| 222 | /*点击输入的时候各部位移动位置*/ | |
| 223 | .username-animate .right-eye { | |
| 224 | left: 4em; | |
| 225 | bottom: 3.0em; | |
| 226 | } | |
| 227 | ||
| 228 | .username-animate .face { | |
| 229 | left: 1em; | |
| 230 | bottom: -0.4em; | |
| 231 | } | |
| 232 | ||
| 233 | .username-animate .nose { | |
| 234 | left: 1.4em; | |
| 235 | top: 0.65em; | |
| 236 | } | |
| 237 | ||
| 238 | .username-animate .mouth { | |
| 239 | bottom: 0.75em; | |
| 240 | background-image: url(./img/mouth-half.png); | |
| 241 | } | |
| 242 | ||
| 243 | .username-animate .mouth.doe { | |
| 244 | background-image: url(./img/mouth-open.png); | |
| 245 | height: 2em; | |
| 246 | bottom: 0.5em; | |
| 247 | } | |
| 248 | ||
| 249 | .login-form { | |
| 250 | width: calc(65%); | |
| 251 | padding: 0 2.5em; | |
| 252 | ||
| 253 | } | |
| 254 | ||
| 255 | .username, | |
| 256 | .password { | |
| 257 | position: relative; | |
| 258 | width: 100%; | |
| 259 | margin: 20px 0; | |
| 260 | border-radius: 5px; | |
| 261 | overflow: hidden; | |
| 262 | box-shadow: 0 0 5px 0 #333; | |
| 263 | } | |
| 264 | ||
| 265 | .username>input, | |
| 266 | .password>input { | |
| 267 | /* width: calc(100% - 20px); */ | |
| 268 | width: calc(100%); | |
| 269 | padding: 0 10px; | |
| 270 | height: 2.5em; | |
| 271 | border: 0; | |
| 272 | border-radius: 5px; | |
| 273 | } | |
| 274 | ||
| 275 | .password>input { | |
| 276 | /* width: calc(100% - 3.3em); */ | |
| 277 | width: calc(100%); | |
| 278 | padding: 0 2.3em 0 1em; | |
| 279 | } | |
| 280 | ||
| 281 | .pwd-eye { | |
| 282 | width: 1.2em; | |
| 283 | height: 1.2em; | |
| 284 | position: absolute; | |
| 285 | top: calc(50% - 0.6em); | |
| 286 | right: 0.5em; | |
| 287 | background-size: 85%; | |
| 288 | background-repeat: no-repeat; | |
| 289 | background-position: center; | |
| 290 | background-image: url('./img/password-show.png'); | |
| 291 | } | |
| 292 | ||
| 293 | .pwd-eye-show { | |
| 294 | background-image: url('./img/password-show.png'); | |
| 295 | } | |
| 296 | ||
| 297 | ||
| 298 | .pwd-eye-hide{ | |
| 299 | background-image: url('./img/password-hide.png'); | |
| 300 | } | |
