在網頁設計中，表單是非常常見的組件。登錄和注冊表單是最常使用的表單。現在，人們對于網站的ui設計也越來越注重。動畫成為了現代網站設計和開發的一種流行趨勢。下面我們就來看一下如何通過html代碼實現一個登錄注冊表單動畫頁面。
<html>
<head>
<title>登錄/注冊動畫頁面</title>
<style>
/* 元素位置設置 */
#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;
}
/* 登錄狀態下的元素動畫設定 */
#login:checked ~ #overlay {
left: 0;
}
#register:checked ~ #overlay {
left: 50%;
}
</style>
</head>
<body>
<h1>登錄/注冊動畫頁面</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">注冊</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>以上是整個動畫頁面的代碼，其中元素位置設置主要在樣式中進行。我們可以看到，我們在登錄注冊部分使用了radio作為控制器，當點擊登錄時，將"#overlay"向左移動；點擊注冊時，將"#overlay"向右移動。在"#overlay"的樣式中，我們使用了transition屬性使其運動過程有一定的過渡效果。
上一篇vue標簽不顯示