会卖萌的登录表单

by gothic

HTML

<div class="mod">
        <form action="" id="login_form" class="login-form">
            <div class="avatar">
             <div class="cabeca">
                 <div class="orelha-esq orelha"></div>
                 <div class="orelha-dir orelha"></div>
                 <div class="olho-esq olhos">
                     <div class="palpebra"></div>
                 </div>
                 <div class="olho-dir olhos">
                     <div class="palpebra"></div>
                 </div>
                 <div class="narina-esq narinas"></div>
                 <div class="narina-dir narinas"></div>
                 <div class="dente-esq dentes"></div>
                 <div class="dente-dir dentes"></div>
             </div>
             <div class="bracos" id="bracos">
                 <div class="mao-esq mao">
                     <div class="unha"></div>
                 </div>
                 <div class="mao-dir mao">
                     <div class="unha"></div>
                 </div>
             </div>
         </div>
         <input type="email" placeholder="邮箱" >
         <input type="text" id="password" placeholder="密码">
     </form>
 </div>

CSS

.mod {
            position: relative;
            padding: 50px;
        }
        .login-form {
            position: relative;
            width: 300px;
            padding-top: 25px;
            margin: 100px auto;
        }
        .login-form input {
            width: 300px;
            height: 40px;
            margin-bottom: 10px;
            border-radius: 4px;
            border: 1px solid #ccc;
            text-indent: 10px;

        }
        .avatar {
            width: 100%;
            /*background-color: #FFF;*/
            position: absolute;
            top: -100px;
            -webkit-user-select: none;  /* 1 */
            -moz-user-select: none;  /* 1 */
            -ms-user-select: none;  /* 1 */
            -o-user-select: none;  /* 1 */
            user-select: none;  /* 1 */
        }

        /* 头*/
        .cabeca {
            background-color: #E35C49;
            height: 100px;
            width: 130px;
            margin: 0 auto;
            border-radius: 50% 50% 0 0;
            position: relative;
        }

        .orelha, .olhos, .narinas, .dentes { position: absolute; }

        /* 耳朵 */
        .orelha {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background-color: #E25441;
            top: 0;
            /*  z-index: -1;*/
            transform: translateY(-25%);
        }

        .orelha-esq {
            left: 10px;
            box-shadow: inset 3px 5px 0 #E35C49;
        }

        .orelha-dir {
            right: 10px;
            box-shadow: inset -3px 5px 0 #E35C49;
        }

        /* 眼睛*/
        .olhos {
            width: 35px;
            height: 35px;
            background-color: #FFF;
            border-radius: 50%;
            top: 30px;
            overflow: hidden;

            box-shadow: inset 0 1px 2px rgba(0,0,0,0.8);

            transition: all 0.05s ease;
        }

        .olhos .palpebra {
            background-color: #E25441;
           ...

JavaScript

// By Go7hic 
var isIE9_ = document.all && !window.atob; //判断 IE9- 浏览器

    if (!isIE9_) {
        var pass = document.querySelector("#password");
        pass.addEventListener('focus', function(e) {
            document.querySelector("#bracos").className += " esconder";
            document.querySelector(".olhos").className += " fechar";

        }, false)
        pass.addEventListener('blur', function(e) {

            document.querySelector("#bracos").className = document.querySelector("#bracos").className.replace( /(?:^|\s)esconder(?!\S)/g , '' )
            document.querySelector(".olhos").className = document.querySelector(".olhos").className.replace( /(?:^|\s)fechar(?!\S)/g , '' )
        }, false)
    }