| commit | author | age | ||
| 6d1057 | 1 | <template> |
| I | 2 | |
| 3 | <div class="login-block"> | |
| 4 | <div class="login-animate "> | |
| 5 | <div class="left-ear"></div> | |
| 6 | <div class="right-ear"></div> | |
| 7 | <div class="head"> | |
| 8 | <div class="left-eye"></div> | |
| 9 | <div class="right-eye"></div> | |
| 10 | <div class="face"> | |
| 11 | <div class="nose"></div> | |
| 12 | <div class="mouth"></div> | |
| 13 | </div> | |
| 14 | </div> | |
| 15 | <div class="body"></div> | |
| 16 | <div class="left-arm"></div> | |
| 17 | <div class="right-arm"></div> | |
| 18 | </div> | |
| 19 | ||
| 20 | <div class="login-form"> | |
| 21 | <div class="username"> | |
| 22 | <input type="text" name="username" autocomplete="off"> | |
| 23 | </div> | |
| 24 | <div class="password "> | |
| 25 | <input type="password" name="password"> | |
| 26 | <div class="pwd-eye" data-flag="hide"></div> | |
| 27 | </div> | |
| 28 | <div class="login"> | |
| 29 | <button id="focus" @click="myLogin">SIGN IN</button> | |
| 30 | </div> | |
| 31 | </div> | |
| 32 | </div> | |
| 33 | ||
| 34 | </template> | |
| 35 | ||
| 36 | <script> | |
| 37 | import $ from 'jquery' | |
| 38 | export default { | |
| 39 | components: {}, | |
| 40 | props: {}, | |
| 41 | data() { | |
| 42 | return {} | |
| 43 | }, | |
| 44 | mounted() { | |
| 45 | $(".pwd-eye").hide(); | |
| 46 | $(".pwd-eye").click(function() { | |
| 47 | var flag = $(this).attr('data-flag'); | |
| 48 | ||
| 49 | $(this).attr('data-flag', flag == 'show' ? 'hide' : 'show'); | |
| 50 | if (flag == 'show') { | |
| 51 | $(this).addClass('pwd-eye-show'); | |
| 52 | $(this).removeClass('pwd-eye-hide'); | |
| 53 | } else { | |
| 54 | $(this).removeClass('pwd-eye-show'); | |
| 55 | $(this).addClass('pwd-eye-hide'); | |
| 56 | } | |
| 57 | ||
| 58 | $('input[name="password"]').attr('type', flag == 'show' ? 'password' : 'text'); | |
| 59 | ||
| 60 | if (flag != 'show' && $('input[name="password"]').val() != '') { | |
| 61 | $('.left-arm').addClass('show'); | |
| 62 | $('.mouth').addClass('show'); | |
| 63 | $('.right-arm').addClass('show'); | |
| 64 | } else { | |
| 65 | $('.left-arm').removeClass('show'); | |
| 66 | $('.mouth').removeClass('show'); | |
| 67 | $('.right-arm').removeClass('show'); | |
| 68 | } | |
| 69 | }); | |
| 70 | ||
| 71 | $('input[name="username"]').focus(function() { | |
| 72 | $(".login-animate").addClass('username-animate'); | |
| 73 | $(".login-animate").removeClass('password-animate'); | |
| 74 | var length = $(this).val().length; | |
| 75 | getposition(length); | |
| 76 | }); | |
| 77 | ||
| 78 | $('input[name="username"]').bind('input', function() { | |
| 79 | var length = $(this).val().length; | |
| 80 | getposition(length); | |
| 81 | }); | |
| 82 | ||
| 83 | function getposition(length) { | |
| 84 | //计算当前输入字节长度 | |
| 85 | var face = parseFloat(1.5 / 36 * length); | |
| 86 | var nose = parseFloat(1 / 36 * length); | |
| 87 | var mouth = parseFloat(1 / 36 * length); | |
| 88 | var left_eye = parseFloat(2 / 36 * length); | |
| 89 | var right_eye = parseFloat(2 / 36 * length); | |
| 90 | var left_ear = parseFloat(1 / 36 * length); | |
| 91 | var right_ear = parseFloat(2 / 36 * length); | |
| 92 | ||
| 93 | //头部旋转 | |
| 94 | if (length >= 0 && length <= 25) { | |
| 95 | $('.head').css('-webkit-transform', "rotate(" + (10 - length / 2) + "deg)"); | |
| 96 | } | |
| 97 | ||
| 98 | //左边为初始值 | |
| 99 | $('.face').css('left', 0.8 + (face > 0.5 ? 0.5 : face) + 'em'); | |
| 100 | $('.nose').css('left', 1.4 + (nose > 0.6 ? 0.6 : nose) + 'em'); | |
| 101 | $('.mouth doe').css('left', 0.8 + (mouth > 0.8 ? 0.8 : mouth) + 'em'); | |
| 102 | ||
| 103 | $('.left-eye').css('left', 0.9 + (left_eye > 0.8 ? 0.8 : left_eye) + 'em'); | |
| 104 | $('.right-eye').css('left', 4.3 + (right_eye > 0.7 ? 0.7 : right_eye) + 'em'); | |
| 105 | ||
| 106 | $('.left-ear').css('left', 1.9 - (left_ear > 0.5 ? 0.5 : left_ear) + 'em'); | |
| 107 | $('.right-ear').css('left', 7.2 - (right_ear > 0.5 ? 0.5 : right_ear) + 'em'); | |
| 108 | $('.right-ear').css('bottom', 3.9 + (right_ear > 0.7 ? 0.7 : right_ear) + 'em'); | |
| 109 | ||
| 110 | if (length >= 2) { | |
| 111 | $('.left-eye').addClass('doe'); | |
| 112 | $('.right-eye').addClass('doe'); | |
| 113 | $('.mouth').addClass('doe'); | |
| 114 | } else { | |
| 115 | $('.left-eye').removeClass('doe'); | |
| 116 | $('.right-eye').removeClass('doe'); | |
| 117 | $('.mouth').removeClass('doe'); | |
| 118 | } | |
| 119 | } | |
| 120 | ||
| 121 | ||
| 122 | //失去焦点 | |
| 123 | $('input[name="username"]').blur(function() { | |
| 124 | var length = $(this).val().length; | |
| 125 | ||
| 126 | if (length > 2) { | |
| 127 | $(".left-eye").addClass('height-eys-doe'); | |
| 128 | $(".right-eye").addClass('height-eys-doe'); | |
| 129 | } else { | |
| 130 | $(".left-eye").removeClass('height-eys-doe'); | |
| 131 | $(".right-eye").removeClass('height-eys-doe'); | |
| 132 | } | |
| 133 | ||
| 134 | $(".login-animate").removeClass('username-animate'); | |
| 135 | $(".login-animate").removeClass('password-animate'); | |
| 136 | ||
| 137 | $('.head').css('-webkit-transform', "rotate(0deg)"); //回正头部 | |
| 138 | ||
| 139 | ||
| 140 | $('.face').attr('style', ''); | |
| 141 | $('.nose').attr('style', ''); | |
| 142 | $('.left-eye').attr('style', ''); | |
| 143 | $('.right-eye').attr('style', ''); | |
| 144 | $('.left-ear').attr('style', ''); | |
| 145 | $('.right-ear').attr('style', ''); | |
| 146 | ||
| 147 | //如果账号和密码都不为空,呈嘴巴张开,眼睛发光 && $('input[name="password"]').val().length > 0 | |
| 148 | if ($('input[name="username"]').val().length > 0) { | |
| 149 | // $(".login-animate").addClass('username-animate'); | |
| 150 | // $(".left-eye").addClass('doe'); | |
| 151 | } | |
| 152 | ||
| 153 | }); | |
| 154 | ||
| 155 | $('input[name="password"]').focus(function() { | |
| 156 | $(".pwd-eye").show(); | |
| 157 | $(".login-animate").removeClass('username-animate'); | |
| 158 | $(".login-animate").addClass('password-animate'); | |
| 159 | }); | |
| 160 | ||
| 161 | $('input[name="password"]').blur(function() { | |
| 162 | if ($(this).val() == '') { | |
| 163 | $(".pwd-eye").hide(); | |
| 164 | $(".login-animate").removeClass('username-animate'); | |
| 165 | $(".login-animate").removeClass('password-animate'); | |
| 166 | } | |
| 167 | }); | |
| 168 | }, | |
| 169 | methods: { | |
| 170 | myLogin() { | |
| 171 | this.$message.info("口令错误啦..") | |
| 172 | } | |
| 173 | } | |
| 174 | } | |
| 175 | </script> | |
| 176 | ||
| 177 | <style scoped=""> | |
| 178 | @import url("../../assets/main.css"); | |
| 179 | ||
| 180 | button:active { | |
| 181 | transform: scale(1.23); | |
| 182 | } | |
| 183 | ||
| 184 | button:focus { | |
| 185 | outline: none; | |
| 186 | } | |
| 187 | ||
| 188 | button.ghost { | |
| 189 | background: transparent; | |
| 190 | border-color: #fff; | |
| 191 | } | |
| 192 | ||
| 193 | button { | |
| 194 | border-radius: 20px; | |
| 195 | border: 1px solid #fff; | |
| 196 | /*background: #3dceba;*/ | |
| 197 | background: #00b69d; | |
| 198 | color: #fff; | |
| 199 | font-size: 12px; | |
| 200 | font-weight: bold; | |
| 201 | padding: 12px 45px; | |
| 202 | letter-spacing: 1px; | |
| 203 | text-transform: uppercase; | |
| 204 | transition: transform 80ms ease-in; | |
| 205 | cursor: pointer; | |
| 206 | /*margin-left: calc(25%); | |
| 207 | position: relative;*/ | |
| 208 | } | |
| 209 | ||
| 210 | .login { | |
| 211 | -webkit-animation: free_download 1s linear alternate infinite; | |
| 212 | animation: free_download 1s linear alternate infinite; | |
| 213 | padding: 0px 15px 0px; | |
| 214 | } | |
| 215 | ||
| 216 | @-webkit-keyframes free_download { | |
| 217 | 0% { | |
| 218 | -webkit-transform: scale(0.9); | |
| 219 | } | |
| 220 | ||
| 221 | 100% { | |
| 222 | -webkit-transform: scale(1); | |
| 223 | } | |
| 224 | } | |
| 225 | ||
| 226 | @keyframes free_download { | |
| 227 | 0% { | |
| 228 | transform: scale(0.9); | |
| 229 | } | |
| 230 | ||
| 231 | 100% { | |
| 232 | transform: scale(1); | |
| 233 | } | |
| 234 | } | |
| 235 | </style> | |
