8.3 带动画效果的登录注册表单

听

8.3 带动画效果的登录注册表单

项目目标

实现一个美观的登录注册表单，包含平滑动画效果以提升用户体验。用户可以在登录和注册之间切换，表单布局适配不同设备。

1. 需求分析

页面功能：
1. 登录表单
2. 注册表单
3. 登录和注册表单之间的切换
交互功能：
- 动画切换表单。
- 表单验证（前端验证基本字段）。
响应式设计：
- 移动端：单列布局。
- 桌面端：左右分区布局，表单居中显示。

2. 代码实现

2.1 HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录注册表单</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="form-container">
      <div class="form-wrapper">
        <div class="form login-form">
          <h2>登录</h2>
          <form>
            <input type="email" placeholder="邮箱" required>
            <input type="password" placeholder="密码" required>
            <button type="submit">登录</button>
          </form>
          <p>还没有账号？<span class="toggle">注册</span></p>
        </div>
        <div class="form register-form hidden">
          <h2>注册</h2>
          <form>
            <input type="text" placeholder="用户名" required>
            <input type="email" placeholder="邮箱" required>
            <input type="password" placeholder="密码" required>
            <button type="submit">注册</button>
          </form>
          <p>已有账号？<span class="toggle">登录</span></p>
        </div>
      </div>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

2.2 CSS 样式

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

body {
  font-family: Arial, sans-serif;
  background: linear-gradient(120deg, #84fab0, #8fd3f4);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: #333;
}

/* Container */
.container {
  width: 90%;
  max-width: 400px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.4s ease;
}

.form-container {
  padding: 20px;
}

.form-wrapper {
  position: relative;
}

.form {
  transition: all 0.4s ease;
}

.hidden {
  display: none;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
}

input {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  width: 100%;
  padding: 10px;
  background: #84fab0;
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}

button:hover {
  background: #62d09d;
}

.toggle {
  color: #84fab0;
  cursor: pointer;
  font-weight: bold;
  text-decoration: underline;
}

/* Responsive Design */
@media (min-width: 768px) {
  .container {
    max-width: 600px;
    display: flex;
    flex-direction: row;
  }
}

2.3 JavaScript 动态交互

document.addEventListener("DOMContentLoaded", () => {
  const loginForm = document.querySelector(".login-form");
  const registerForm = document.querySelector(".register-form");
  const toggles = document.querySelectorAll(".toggle");

  toggles.forEach((toggle) => {
    toggle.addEventListener("click", () => {
      loginForm.classList.toggle("hidden");
      registerForm.classList.toggle("hidden");
    });
  });
});

3. 总结

核心技术：
- CSS 动画效果实现表单切换。
- JavaScript 添加交互逻辑。
扩展功能：
- 增加表单验证并动态提示错误信息。
- 添加后端接口交互以处理登录和注册请求。

通过这些功能实现一个带动画效果的登录注册表单，并提供了进一步扩展的可能性。

#CSS 从入门到实践教程分享于 2025-03-11

上一篇：8.2 动态交互式产品展示页面下一篇：8.4 博客文章排版与布局