CSS3動態登陸界面

在現代網頁中，越來越多的網站采用了動態登陸界面，用戶可以通過界面直接輸入用戶名和密碼登錄。這個樣式看上去非常炫酷，下面我們展示如何使用CSS3來實現。

/*設置登陸框的背景顏色*/
.login{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #F4A460;
}
/*設置登陸框的樣式*/
.login .box{
width: 350px;
height: 400px;
padding: 20px;
border-radius: 15px;
box-shadow: 0px 3px 20px rgba(0,0,0,0.5);
background-color: white;
position: relative;
}
/*設置登錄框的標題*/
.login .box .title{
position: absolute;
top: -50px;
left: 50%;
transform: translateX(-50%);
font-size: 26px;
color: #F4A460;
}
/*設置輸入框樣式*/
.login .box .inputBox{
position: relative;
padding: 10px 0;
}
.login .box .inputBox input{
width: 100%;
padding: 10px 0;
font-size: 16px;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #ccc;
outline: none;
background: transparent;
}
/*設置登錄按鈕的樣式*/
.login .box input[type="submit"]{
background-color: #F4A460;
color: white;
border: none;
outline: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
}
/*設置動畫*/
.login .box .inputBox span{
position: absolute;
left: 0;
font-size: 16px;
padding: 10px 0;
pointer-events: none;
transition: 0.5s;
}
.login .box .inputBox input:focus ~ span,
.login .box .inputBox input:valid ~ span{
transform: translateY(-20px);
font-size: 12px;
color: #F4A460;
}

以上代碼將會實現一個炫酷的動態登陸界面，現在你也可以通過添加不同的樣式來自定義你的登錄頁面了！