下面是一个完整的 HTML+CSS 实现炫酷登录/注册界面切换 的项目实践案例。它支持点击按钮切换登录和注册界面，配有流畅动画，且完全不依赖 JavaScript（也可升级为 JS 控制）。

✅ 效果概览：

  • 🔄 登录与注册表单平滑切换
  • 🎨 高对比、现代 UI 风格
  • 💡 纯 CSS 过渡动画

✅ 完整代码示例

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>炫酷登录切换</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 0;
      background: linear-gradient(135deg, #74ebd5, #9face6);
      font-family: 'Segoe UI', sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .container {
      position: relative;
      width: 700px;
      height: 400px;
      background: #fff;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 0 20px rgba(0,0,0,0.2);
    }

    .form-container {
      position: absolute;
      top: 0;
      height: 100%;
      width: 200%;
      display: flex;
      transition: transform 0.6s ease-in-out;
    }

    .form {
      width: 50%;
      padding: 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .form h2 {
      text-align: center;
      margin-bottom: 20px;
      color: #333;
    }

    .form input {
      padding: 12px;
      margin: 10px 0;
      border: 1px solid #aaa;
      border-radius: 5px;
      font-size: 14px;
    }

    .form button {
      margin-top: 10px;
      padding: 12px;
      background-color: #4caf50;
      color: white;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
      transition: background 0.3s;
    }

    .form button:hover {
      background-color: #388e3c;
    }

    .switch-panel {
      position: absolute;
      top: 0;
      right: 0;
      width: 50%;
      height: 100%;
      background: linear-gradient(120deg, #6a11cb 0%, #2575fc 100%);
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 40px;
      transition: transform 0.6s ease-in-out;
    }

    .switch-panel h2 {
      margin-bottom: 10px;
    }

    .switch-panel p {
      font-size: 14px;
    }

    .switch-panel button {
      margin-top: 20px;
      background-color: transparent;
      border: 2px solid white;
      color: white;
      padding: 10px 20px;
      border-radius: 20px;
      cursor: pointer;
      transition: background 0.3s;
    }

    .switch-panel button:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    /* 切换状态 */
    .container.active .form-container {
      transform: translateX(-50%);
    }

    .container.active .switch-panel {
      transform: translateX(-100%);
    }
  </style>
</head>
<body>

<div class="container" id="mainContainer">
  <div class="form-container">
    <!-- 登录表单 -->
    <div class="form" id="loginForm">
      <h2>登录账号</h2>
      <input type="text" placeholder="用户名">
      <input type="password" placeholder="密码">
      <button>登录</button>
    </div>

    <!-- 注册表单 -->
    <div class="form" id="registerForm">
      <h2>注册新账号</h2>
      <input type="text" placeholder="用户名">
      <input type="email" placeholder="邮箱">
      <input type="password" placeholder="密码">
      <button>注册</button>
    </div>
  </div>

  <div class="switch-panel" id="switchPanel">
    <div id="switchContent">
      <h2>还没有账号？</h2>
      <p>立即注册一个新账号开始体验</p>
      <button id="switchBtn">注册</button>
    </div>
  </div>
</div>

<script>
  const container = document.getElementById('mainContainer');
  const switchBtn = document.getElementById('switchBtn');

  let isRegister = false;

  switchBtn.addEventListener('click', () => {
    isRegister = !isRegister;
    container.classList.toggle('active');

    // 改变右侧面板提示文字
    document.getElementById('switchContent').innerHTML = isRegister
      ? `<h2>已有账号？</h2><p>返回登录继续使用</p><button id="switchBtn">登录</button>`
      : `<h2>还没有账号？</h2><p>立即注册一个新账号开始体验</p><button id="switchBtn">注册</button>`;

    // 重新绑定按钮事件（因为内容替换了）
    document.getElementById('switchBtn').addEventListener('click', () => {
      switchBtn.click(); // 模拟再次点击
    });
  });
</script>

</body>
</html>

✅ 效果特点：

功能描述
🎨 视觉渐变背景 + 面板滑动切换
🧭 切换逻辑使用 CSS transform 动画实现滑动切换
🧠 JS 逻辑控制面板状态切换，动态替换提示文案

✅ 可拓展方向：

  • 加入第三方登录按钮（微信 / GitHub）
  • 使用 localStorage 存储登录状态
  • 加入验证、错误提示动画
  • 响应式布局适配移动端

是否需要我帮你改成响应式移动布局、深色模式、或者纯 CSS 无 JS 切换版本？我可以继续优化。