如何让你的登录页炫酷一点

angrybird2332025-03-06FrontendCSS

前言

在前端开发中，如何让登录页更加炫酷一点，增加用户体验，是每个前端开发人员需要考虑的问题，本文将介绍一种简单的方法。

具体原理

通过使用 CSS3 的 transform 属性，我们可以将登录页的元素进行旋转，从而实现一种更酷的登录页。

创建登录(前)、注册(后)两个表单,默认登录表单rotateY(0deg)旋转0度，注册表单rotateY(180deg)旋转180度
设置css3 transform属性，外层盒子设置perspective：1000px; 设置景深1000px; 设置form-container;最后设置表单旋转到背面之后不可见

  .container{
    perspective: 1000px;
  }
  .form-container{
    transform-style: preserve-3d;
    transition: transform 0.6s;
  }
  .form {
    backface-visibility: hidden;
  }

分别为去注册、去登录按钮设置点击事件，并为container添加或去除show-register类名,此时执行transform: rotateY(180deg)旋转180度过度动画

.show-register .form-container {
  transform: rotateY(180deg);
}

  const showRegister = document.querySelector('#show-register');
  const showLogin = document.querySelector('#show-login');
  showRegister.addEventListener('click', () => {
    document.querySelector('.container').classList.add('show-register');
  });
  showLogin.addEventListener('click', () => {
    document.querySelector('.container').classList.remove('show-register');
  });

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login/Registration Form</title>
  <style>
    body,
    html {
      height: 100%;
      min-width: 375px;
      margin: 0;
      background: #041845;
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .container {
      perspective: 1000px;
    }

    .form-container {
      width: 300px;
      height: 340px;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.6s;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .form {
      background: #fff;
      box-shadow: 0 2px 10px rgba(255, 255, 255, 0.2), 0 -2px 10px rgba(255, 255, 255, 0.2);
      border-radius: 10px;
      padding: 20px;
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
    }

    .form form {
      display: flex;
      justify-content: center;
      flex-direction: column;
    }

    .login-form {
      transform: rotateY(0deg);
    }

    .register-form {
      transform: rotateY(180deg);
    }

    form input {
      height: 36px;
      line-height: 36px;
      margin: 5px 0;
      padding: 0 10px;
      border-radius: 8px;
      border: 1px solid #ddd;
      outline: none;
    }

    .login-btn,
    .register-btn {
      background: #21418c;
      color: #fff;
      border: none;
      padding: 10px 20px;
      cursor: pointer;
      margin-top: 20px;
      width: 100%;
      border-radius: 8px;
    }

    .login-btn:hover,
    .register-btn:hover {
      background: #041845;
      outline: none;
      border: none;
    }

    .switch-btn {
      border: 1px solid #aaa;
      border-radius: 4px;
      padding: 5px 10px;
      cursor: pointer;
      background: #f0f0f0;
      margin-top: 20px;
      float: right;
    }

    .show-register .form-container {
      transform: rotateY(180deg);
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="form-container">
      <div class="form login-form">
        <h2>登录</h2>
        <form>
          <input type="text" placeholder="用户名" required>
          <input type="password" placeholder="密码" required>
          <button type="submit" class="login-btn">登录</button>
        </form>
        <button class="switch-btn" id="show-register">去注册</button>
      </div>
      <div class="form register-form">
        <h2>注册</h2>
        <form>
          <input type="text" placeholder="用户名" required>
          <input type="password" placeholder="密码" required>
          <input type="password" placeholder="确认密码" required>
          <button type="submit" class="register-btn">注册</button>
        </form>
        <button class="switch-btn" id="show-login">去登录</button>
      </div>
    </div>
  </div>
</body>

</html>
<script>

  const showRegister = document.querySelector('#show-register');
  const showLogin = document.querySelector('#show-login');
  showRegister.addEventListener('click', () => {
    document.querySelector('.container').classList.add('show-register');
  });
  showLogin.addEventListener('click', () => {
    document.querySelector('.container').classList.remove('show-register');
  });

</script>

如何让你的登录页炫酷一点

前言

具体原理

完整代码

运行结果展示

ON THIS PAGE