SOURCE

<div class="container">
    <div class="logo">
        <span>系统登录</span>
    </div>
    <div class="content">
        <div class="item">
            <input type="text" autofocus="autofocus" />
            <span class="label">用户名</span>
        </div>
        <div class="item">
            <input type="text" />
            <span class="label">密码</span>
        </div>
        <div class="item">
            <button>登录</button>
        </div>
    </div>
</div>

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

::selection{
    background: #1e90dfa3;
    color: #fefefe;
}

body{
    min-height:100vh;
    background:#1e90dfe3;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container{
    position: relative;
    background-color: #fff;
    width:500px;
    height:200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 10px 10px 5px #fefefe78;
}

.logo{
    color:#1e90dfa3;
    width:200px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:#fff;
}

.logo span{
    font-size: 32px;
    font-weight: 600;
}

.content{
    height:100%;
    width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.content .item{
    position: relative;
    margin:5px 0;

}

.item .label{
    position: absolute;
    display: inline-block;
    font-size: 8px;
    color: #c3c3c3;
    transition: all .1s linear;
    top:15px;
    left:10px;
    padding:0 5px;
}

.item input{
    border:none;
    border-bottom:1px solid #c3c3c3;
    margin:10px;
    box-shadow: none;
    outline: none;
    color: #c3c3c3;
    padding:5px;
}

.item input:focus ~ .label{
    top:-10px;
    left:5px;
}

.item button{
    padding:5px 10px;
    background-color: #1e90dfe3;
    color: #fff;
    width: 100px;
    border-color:#fefefe;
}