会卖萌的登录框最新版

HTML

<div class="mod">
        <form action="" id="login_form" class="login-form">
           <input type="email" id="email" placeholder="邮箱">
           <input type="password" 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

const template = `
        <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>`;
    const isIE9_ = document.all && !window.atob; //判断 IE9- 浏览器
    if (!isIE9_) {
       $("#login_form").prepend(template);
        $("#password").on({
            "focus": function() {
                $("#bracos").addClass("esconder");
                $(".olhos").addClass("fechar");
            },
            "blur": function() {
                $("#bracos").removeClass("esconder");
                $(".olhos").removeClass("fechar");
            }
        })
    }