带动画效果的登录页面（手撕版）

 

 

 html部分：

<template>
    <!--登录页面-->
    <div class="container">
        <div class="top-jieshao" id="top-jieshao">
            <div class="content-box-tips"  id="content-box-tips">
                <div class="topic-word" v-if="checked===false">刚来这里？</div>
                <div class="detail-word">Luchat is a chatTools ,you can chat with your friends anytime you want</div>
                <div class="reg-button" @click="zhuce()" v-if="checked===false">点击注册</div>
                <div class="reg-button" @click="zhuce()" v-if="checked===true">重新注册</div>
                <div class="jieshao-img-1"><lottie :options="defaultOptions" :height="400" :width="400" @animCreated="handleAnimation" /></div>
            </div>
            <div class="content-box-tips-next"  id="content-box-tips-next">
                <div class="jieshao-img-2"><lottie :options="defaultOptions" :height="400" :width="400" @animCreated="handleAnimation" /></div>
                <div class="topic-word">已经有账号？</div>
                <div class="detail-word">Luchat is a chatTools ,you can chat with your friends anytime you want</div>
                <div class="reg-button" @click="denglu()">点击登录</div>
            </div>
        </div>
        <div class="user-box" id="user-box">
            <div class="loginbox_out" v-if="show===1" id="loginbox_out1">
                <div class="loginbox">
                    <div class="topic">
                        <span>用户登录</span>
                    </div>
                    <div class="inputbox">
                        <img src="./用户名(1).png"/>
                        <input typeof="text" required="required" v-model="userid" placeholder="用户名"/>
                    </div>
                    <div class="inputbox">
                        <img src="./密码（关）(1).png">
                        <input type="password" required="required" v-model="password" placeholder="密码"/>
                    </div>
                    <!--<div class="some-words">-->
                        <!--<span @click="show=false">没有账号？点击注册</span>-->
                    <!--</div>-->
                    <div class="login-button">
                        <div class="login-b" @click="login_check()">
                            <span>登</span>
                            <span>录</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="loginbox_out" v-if="show===2" id="loginbox_out2">
                <div class="loginbox">
                    <div class="topic">
                        <span>用户注册</span>
                    </div>
                    <div class="inputbox">
                        <img src="./邮箱(1).png" />
                        <input typeof="text" required="required" v-model="userid" placeholder="请输入邮箱"/>

                    </div>
                    <div class="inputbox">
                        <img src="./密码（关）(1).png">
                        <input type="password" required="required" v-model="password" placeholder="请输入密码"/>

                    </div>
                    <div class="login-button">
                        <div class="login-b" @click="register()" style="margin-top: 0%">
                            <span style="color: #fff">注</span>
                            <span style="color: #ffffff">册</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="loginbox_out"  v-if="checked">
                <div class="check-box">
                    <div class="tips-checked">请输入验证码</div>
                    <div class="some-number">
                        <div class="number-box"><input v-model="number_1" maxlength="1" id="number_1" @input="auto_input"/></div>
                    </div>
                    <div class="some-number">
                        <div class="number-box"><input v-model="number_2" maxlength="1" id="number_2" @input="auto_input"/></div>
                    </div>
                    <div class="some-number">
                        <div class="number-box"><input v-model="number_3" maxlength="1" id="number_3" @input="auto_input"/></div>
                    </div>
                    <div class="some-number">
                        <div class="number-box"><input v-model="number_4" maxlength="1" id="number_4" @input="auto_input"/></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

css部分：

.container{
        width: 100vw;
        height: 100vh;
        position: relative;
        overflow: hidden;
    }
    /**
        左边注册导向
     */
    .top-jieshao{
        position: absolute;
        width: 55vw;
        height: 110vh;
        background: deepskyblue;
        border-bottom-right-radius: 2000px;
        /*border-top-right-radius: 200px;*/
        display: flex;
        justify-content: center;
        transition: all 1s;
        z-index: 1;
    }
    .content-box-tips{
        left: 50%;
        transform: translateX(-300px);
        position: absolute;
        margin-top: 80px;
        width: 500px;
        height: 150px;
        /*background: red;*/
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: flex-start;
        justify-content: center;
        transition: all 1s;
    }
    .content-box-tips-next{
        top: 25vh;
        right: -120vw;
        transform: translateX(350px);
        position: absolute;
        width: 500px;
        height: 150px;
        /*background: red;*/
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: flex-start;
        justify-content: center;
        transition: all 1s;
    }
    .topic-word{
        width: 100%;
        height: 50px;
        font-size: 22px;
        color: whitesmoke;
        font-weight: bold;
        letter-spacing: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .detail-word{
        width: 100%;
        height: 50px;
        font-size: 18px;
        display: flex;
        justify-content: center;
        color: whitesmoke;
    }
    .reg-button{
        width: 100px;
        /*background: blue;*/
        color: whitesmoke;
        font-size: 19px;
        font-weight: bold;
        letter-spacing: 1px;
        padding: 10px;
        border-radius: 40px;
        border: 2px solid whitesmoke;
        display: flex;
        justify-content: center;
        cursor: pointer;
    }
    .jieshao-img-1{
        margin-top: 50px;
    }
    .jieshao-img-2{
        margin-bottom: 50px;
    }
    .jieshao-img img{
        width: 15vw;
        height: 20vh;
    }
    /*用户输入内容*/
    .user-box{
        width: 380px;
        height: auto;
        position: absolute;
        right: 180px;
        top: 180px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        transform: translateZ(-1px);
        z-index: 0;
    }
    .loginbox_out, .loginbox{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: flex-start;
        justify-content: center;
        /*background: white;*/
        border-radius: 18px;
    }

    /*.loginbox_out{*/
        /*box-shadow: 0px 0 1px 0 ;*/
    /*}*/
    .loginbox{
        padding:50px 5px 50px 5px;

    }
    .topic{
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 22px;
        letter-spacing: 2px;
        font-weight: bold;
        color: #383838;
    }
    .inputbox{
        width: 80%;
        background: rgb(229, 226, 226);
        height: 36px;
        border-radius: 45px;
        padding: 5px 15px 5px 15px;
        display: flex;
        align-items: center;
        margin-top: 30px;
    }
    .inputbox img{
        width: 25px;
        height: 25px;
    }
    .inputbox input{
        width: 100%;
        height: 36px;
        border-radius: 30px;
        padding-left: 20px;
        border: 0;
        outline: none;
        background: rgb(229, 226, 226);
        font-size: 17px;
        letter-spacing: 1px;
    }
    .inputbox input:valid,
    .inputbox input:focus
    {
        background: rgb(216, 213, 213);
    }
    .login-button{
        width: 100%;
        height: 60px;
        margin-top: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
    .login-b{
        width: 80px;

        height: 30px;
        font-size: 19px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        border-radius: 45px;
        font-weight: bold;
        color: whitesmoke;
        background: deepskyblue;
    }
    .login-b span{
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /*验证码表单*/
    .check-box{
        position: relative;
        top: 100px;
        width: 360px;
        height: 200px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        align-content: flex-start;
        justify-content: center;
    }
    .tips-checked{
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 23px;
    }
    .some-number{
        width: 25%;
        height: 80px;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .number-box{
        display: flex;
        justify-content: center;
    }
    .some-number input{
         width: 50%;
         height: 60px;
         border-radius: 20px;
         outline: none;
         font-size: 25px;
         text-align: center;
         border: 2px solid #a0a0a0;
     }
    .some-number input:valid,
    .some-number input:focus
    {
        border: 2px solid #0c0c0c;
    }

js部分（vue）：

methods:{
            sleep(ms, callback) {
                setTimeout(callback, ms)
            },
            zhuce(){
                this.checked=false
                this.show=2
                let e =document.getElementById("top-jieshao")
                let w =document.getElementById("content-box-tips")
                let l =document.getElementById("user-box")
                e.style=""
                // console.log(e.style.width="100px")
                l.style.left="220px"
                l.style.top="150px"
                w.style.left="-120vw"
                e.style.width="100vw"
                e.style.borderTopRightRadius="0"
                e.style.borderBottomRightRadius="0"
                this.sleep(1000, () => {
                    let w2 =document.getElementById("content-box-tips-next")
                    let e =document.getElementById("top-jieshao")
                    console.log(w2)
                    w2.style.right="50%"
                    e.style.width="55vw"
                    e.style.height="110vh"
                    e.style.borderTopLeftRadius="1000px"
                    e.style.borderBottomLeftRadius="-300px"
                    e.style.right="0"
                })
            },
            denglu(){

                this.show=1
                let e =document.getElementById("top-jieshao");
                let w =document.getElementById("content-box-tips");
                let l =document.getElementById("user-box");
                let w2 =document.getElementById("content-box-tips-next")
                console.log(e);
                e.style.width="100vw"
                e.style.borderTopLeftRadius="0"
                this.sleep(1000, () => {
                    e.style.width="55vw"
                    e.style.left="0"
                    e.style.borderBottomRightRadius="2000px"
                    w.style="";
                })

                l.style="";
                w2.style="";
                console.log(e)
                // console.log(e.style.width="100px")
            },
}