JS登录和注册表单动画切换特效
时间: 2024-03-25 12:36:18 浏览: 9
可以使用CSS和JavaScript实现表单动画切换特效,以下是一个简单的实现方法:
HTML代码:
```html
<div class="container">
<form id="login-form" class="form">
<h2>Login</h2>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="submit">Login</button>
<p>Don't have an account? <a href="#" onclick="toggleForm()">Register now</a></p>
</form>
<form id="register-form" class="form hidden">
<h2>Register</h2>
<input type="text" placeholder="Username">
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<button type="submit">Register</button>
<p>Already have an account? <a href="#" onclick="toggleForm()">Login now</a></p>
</form>
</div>
```
CSS代码:
```css
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f2f2f2;
}
.form {
width: 350px;
padding: 30px;
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
border-radius: 5px;
text-align: center;
}
.form h2 {
margin-bottom: 20px;
}
.form input {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}
.form button {
display: block;
width: 100%;
padding: 10px;
margin-top: 20px;
border: none;
border-radius: 5px;
background-color: #2196F3;
color: #fff;
cursor: pointer;
}
.form p {
margin-top: 20px;
}
.form a {
color: #2196F3;
}
```
JavaScript代码:
```javascript
const loginForm = document.getElementById('login-form');
const registerForm = document.getElementById('register-form');
function toggleForm() {
loginForm.classList.toggle('hidden');
registerForm.classList.toggle('hidden');
}
registerForm.addEventListener('submit', function(e) {
e.preventDefault();
// 处理注册逻辑
});
loginForm.addEventListener('submit', function(e) {
e.preventDefault();
// 处理登录逻辑
});
```
通过CSS的`hidden`类实现表单的隐藏和显示,通过JavaScript的`toggleForm()`函数切换表单,通过表单的`submit`事件处理登录和注册逻辑。可以根据需求自定义CSS样式和JavaScript逻辑。