在網(wǎng)頁設(shè)計(jì)中，表單是非常常見的組件。登錄和注冊(cè)表單是最常使用的表單。現(xiàn)在，人們對(duì)于網(wǎng)站的ui設(shè)計(jì)也越來越注重。動(dòng)畫成為了現(xiàn)代網(wǎng)站設(shè)計(jì)和開發(fā)的一種流行趨勢(shì)。下面我們就來看一下如何通過html代碼實(shí)現(xiàn)一個(gè)登錄注冊(cè)表單動(dòng)畫頁面。
<html>
<head>
<title>登錄/注冊(cè)動(dòng)畫頁面</title>
<style>
/* 元素位置設(shè)置 */
#login-box {
position: relative;
height: 400px;
width: 400px;
background-color: #fff;
border: 1px solid #ccc;
margin: 0 auto;
padding: 20px;
overflow: hidden;
}
#login-box input {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
}
#submit-btn {
display: block;
width: 100%;
height: 40px;
background-color: #007fff;
color: #fff;
border: none;
cursor: pointer;
}
#overlay {
position: absolute;
height: 100%;
width: 50%;
background-color: #007fff;
top: 0;
left: -50%;
transition: all 0.5s ease-in-out;
}
/* 登錄狀態(tài)下的元素動(dòng)畫設(shè)定 */
#login:checked ~ #overlay {
left: 0;
}
#register:checked ~ #overlay {
left: 50%;
}
</style>
</head>
<body>
<h1>登錄/注冊(cè)動(dòng)畫頁面</h1>
<div>
<input type="radio" id="login" name="control-panel">
<label for="login">登錄</label>
<input type="radio" id="register" name="control-panel">
<label for="register">注冊(cè)</label>
</div>
<div id="login-box">
<input type="text" placeholder="用戶名">
<input type="password" placeholder="密碼">
<button id="submit-btn">提交</button>
<div id="overlay"></div>
</div>
</body>
</html>以上是整個(gè)動(dòng)畫頁面的代碼，其中元素位置設(shè)置主要在樣式中進(jìn)行。我們可以看到，我們?cè)诘卿涀?cè)部分使用了radio作為控制器，當(dāng)點(diǎn)擊登錄時(shí)，將"#overlay"向左移動(dòng)；點(diǎn)擊注冊(cè)時(shí)，將"#overlay"向右移動(dòng)。在"#overlay"的樣式中，我們使用了transition屬性使其運(yùn)動(dòng)過程有一定的過渡效果。