SOURCE

  <div class="cont">
        <div class="form sign-in">
            <h2>欢迎回来,</h2>
            <form action="<%=basePath%>login" method="post" class="form">
                <label>
                    <span style="font-size:16px;">用户名</span>
                    <input type="text" name="username" autocomplete="off" style="height:40px;font-family:KaiTi;font-size:16px;"  />
                </label>
            </br>
                <label>
                    <span style="font-size:16px;">密码</span>
                    <input type="password" name="password" autocomplete="off" style="height:40px" />
                </label>
                <label>
                    <span style="float:left;margin-left:70px;">
                    <input type="radio" name="sex" value="designer" >设计师
                    </span>
                    <span style="float:right;margin-right:70px;"><input type="radio" name="sex" value="customer">顾客
                    </span>
                </label>
            </br>
                <input  class="form__btn" type="submit" value="登录" style="height:40px;font-family:KaiTi;font-size:18px;" />
    </form>

            <!--button type="button" class="fb-btn">Connect with <span>facebook</span></button-->
        </div>

        <div class="sub-cont">
            <div class="img">
                <div class="img__text m--up">
                    <h2>还未注册?</h2>
                    <p>如果你还未注册，立即注册发现新大陆！</p>
                </div>
                <div class="img__text m--in">
                    <h2>已有账号?</h2>
                    <p>如果你已经注册了,立即登录发现新美好 !</p>
                </div>
                <div class="img__btn">
                    <span class="m--up">注册</span>
                    <span class="m--in">登录</span>
                </div>
            </div>
            <div class="form sign-up">
                <h2>欢迎加入,</h2>
                <form action="${pageContext.request.contextPath}/register" method="post" onsubmit="return checkForm();">
                <label>
                    <span style="font-size:16px;font-family:KaiTi;">用户名</span>
                    <input type="text" name="username" autocomplete="off" style="height:40px;font-family:KaiTi;font-size:16px;"  onkeyup="checkUsername();"/>
                    <span id="usernameMsg"></span>
                </label>
                </br>
                <label>
                    <span style="font-size:16px;font-family:KaiTi;">密码</span>
                    <input type="password" name="password" autocomplete="off" style="height:40px" onkeyup="checkPassword();"  />
                    <span id="passwordMsg"></span>
                </label>
                    </br>
                <label>
                    <span style="font-size:16px;font-family:KaiTi;">联系电话</span>
                    <input type="text"  name="telephone"  autocomplete="off"  style="height:40px"  onkeyup="checkTelephone();" />
                    <span id="telephoneMsg"></span>
                </label>
                     <label>
                    <span style="float:left;margin-left:70px;">
                    <input type="radio" name="sex" value="designer" >设计师
                    </span>
                    <span style="float:right;margin-right:70px;"><input type="radio" name="sex" value="customer">顾客
                    </span>
                </label>
                    </br>
                        <input class="form__btn" type="submit"  value="注册" style="height:40px;font-family:KaiTi;font-size:18px;" />

                <!--button type="button" class="fb-btn">Join with <span>facebook</span></button-->
                </form>
            </div>
        </div>

    </div>
<script >
    document.querySelector('.img__btn').addEventListener('click', function () {
        document.querySelector('.cont').classList.toggle('s--signup');
    });

</script>

/*注册登录*/

*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: KaiTi;
    /*background: #ededed;*/
    background:white;

}

input, button {
    border: none;
    outline: none;
    background: white;

}

.cont {
    box-shadow: 0 15px 30px 1px rgba(128, 128, 128, 0.31);
    background: rgba(255, 255, 255, 0.90);
    margin:50px auto;
    overflow: hidden;
    position: relative;
   /* width: 900px;
    height: 550px;*/
    height:550px;
    width:900px;

    /*background: #fff;*/
    z-index:99;
  /*  border:1px solid black;*/
    border-radius:10px;
    /*  border-radius:20%;*/
    /* box-shadow:5px 5px 5px #f6f6f6,5px -5px 5px #f6f6f6,-5px 5px 5px #f6f6f6,-5px -5px 5px #f6f6f6;
 */}

.form {
    position: relative;
    width: 640px;
    height: 100%;
    -webkit-transition: -webkit-transform 1.2s ease-in-out;
    transition: -webkit-transform 1.2s ease-in-out;
    transition: transform 1.2s ease-in-out;
    transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
    padding: 50px 30px 0;
}

.sub-cont {
    overflow: hidden;
    position: absolute;
    left: 640px;
    top: 0;
    width: 900px;
    height: 100%;
    padding-left: 260px;
    background: #fff;
    -webkit-transition: -webkit-transform 1.2s ease-in-out;
    transition: -webkit-transform 1.2s ease-in-out;
    transition: transform 1.2s ease-in-out;
    transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
}
.cont.s--signup .sub-cont {
    -webkit-transform: translate3d(-640px, 0, 0);
    transform: translate3d(-640px, 0, 0);
}

button {
    display: block;
    margin: 0 auto;
    width: 260px;
    height: 36px;
    border-radius: 30px;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}

.img {
    overflow: hidden;
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
    width: 260px;
    height: 100%;
    padding-top: 360px;
}
.img:before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 900px;
    height: 100%;
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/sections-3.jpg");



    background-size: cover;
    -webkit-transition: -webkit-transform 1.2s ease-in-out;
    transition: -webkit-transform 1.2s ease-in-out;
    transition: transform 1.2s ease-in-out;
    transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
}
.img:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);


}
.cont.s--signup .img:before {
    -webkit-transform: translate3d(640px, 0, 0);
    transform: translate3d(640px, 0, 0);
}
.img__text {
    z-index: 2;
    position: absolute;
    left: 0;
    top: 50px;
    width: 100%;
    padding: 0 20px;
    text-align: center;
    color: #fff;
    -webkit-transition: -webkit-transform 1.2s ease-in-out;
    transition: -webkit-transform 1.2s ease-in-out;
    transition: transform 1.2s ease-in-out;
    transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
}
.img__text h2 {
    margin-bottom: 10px;
    font-weight: normal;
}
.img__text p {
    font-size: 14px;
    line-height: 1.5;
}
.cont.s--signup .img__text.m--up {
    -webkit-transform: translateX(520px);
    transform: translateX(520px);
}
.img__text.m--in {
    -webkit-transform: translateX(-520px);
    transform: translateX(-520px);
}
.cont.s--signup .img__text.m--in {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
.img__btn {
    overflow: hidden;
    z-index: 2;
    position: relative;
    width: 100px;
    height: 36px;
    margin: 0 auto;
    background: transparent;
    color: #fff;
    text-transform: uppercase;
    font-size: 15px;
    cursor: pointer;
}
.img__btn:after {
    content: '';
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    border-radius: 30px;
}
.img__btn span {
    position: absolute;
    left: 0;
    top: 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
    -webkit-transition: -webkit-transform 1.2s;
    transition: -webkit-transform 1.2s;
    transition: transform 1.2s;
    transition: transform 1.2s, -webkit-transform 1.2s;
}
.img__btn span.m--in {
    -webkit-transform: translateY(-72px);
    transform: translateY(-72px);
}
.cont.s--signup .img__btn span.m--in {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
.cont.s--signup .img__btn span.m--up {
    -webkit-transform: translateY(72px);
    transform: translateY(72px);
}

h2 {
    width: 100%;
    font-size: 26px;
    text-align: center;
}

label {
    display: block;
    width: 260px;
    margin: 25px auto 0;
    text-align: center;
}
label span {
    font-size: 12px;
    /*  color: #cfcfcf;*/
    color:black;
    text-transform: uppercase;
}

input {
    display: block;
    width: 100%;
    margin-top: 5px;
    padding-bottom: 5px;
    font-size: 16px;
    /*border-bottom: 1px solid rgba(0, 0, 0, 0.4);*/
    /*border-bottom: 1px solid black;*/
    text-align: center;
    border:1px solid black;
    border-radius:20px;
}


.form__btn{
    background:black;
    color:white;
    width:270px;
    margin-left:155px;
    margin-top:50px;
    border-radius:30px;
}


.sign-in {
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.cont.s--signup .sign-in {
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-transition-duration: 1.2s;
    transition-duration: 1.2s;
    -webkit-transform: translate3d(640px, 0, 0);
    transform: translate3d(640px, 0, 0);
}

.sign-up {
    -webkit-transform: translate3d(-900px, 0, 0);
    transform: translate3d(-900px, 0, 0);
}
.cont.s--signup .sign-up {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}