用户登录与注册模板

用户登录与注册模板html代码

预览：

代码：

index.html

<!-- index.html -->
<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="/templets/login/style.css">
  <style type="text/css">
    .small{
      color: #ff0000;
    }
  </style>
</head>
<body>
<div class="container right-panel-active">
      <!-- 登录 -->
      <div class="container__form container--signup">
        <form action="/user/login.php?check=login" class="form" method="post">
          <h2 class="form__title">登录</h2>
          <input type="text" placeholder="请输入用户名" class="input"  name="username" id="lu" />
          <small class="small" id="lutext"></small>
          <input type="password" placeholder="请输入密码" class="input" name="password" id="lp"/>
          <small class="small" id="lptext"></small>
          <img src="/static/captcha.php?" alt="Captcha" onclick="this.src='/static/captcha.php?id='+Math.random()" id="captcha">
          <input type="text" placeholder="请输入验证码" name="captcha" class="input" id="lc">
          <small class="small" id="lctext"></small>
          <a href="/user/login.php?f=reset" class="link">忘记密码了?</a>
          <button class="btn" type="submit" onclick="logincheck()" name="submitlogin">登录</button>
        </form>
      </div>
      <!-- 注册 -->
      <div class="container__form container--signin">
        <form action="/user/login.php?check=reg" method="post" class="form" id="form2">
          <h2 class="form__title">注册</h2>
          <input type="text" placeholder="请输入用户名" class="input"  name="username" id="ru" />
          <small class="small" id="rutext"></small>
          <input type="password" placeholder="请输入密码" class="input" name="password" id="rp"/>
          <small class="small" id="rptext"></small>
          <img src="/static/captcha.php?" alt="Captcha" onclick="this.src='/static/captcha.php?id='+Math.random()" id="captcha">
          <input type="text" placeholder="请输入验证码" name="captcha" class="input" id="rc">
          <small class="small" id="rctext"></small>
          <button class="btn" type="submit" onclick="regcheck()">注册</button>
        </form>
      </div>
      <!-- Overlay -->
      <div class="container__overlay">
        <div class="overlay">
          <div class="overlay__panel overlay--left">
            <button class="btn" id="signIn">没有账号?注册一个!</button>
          </div>
          <div class="overlay__panel overlay--right">
            <button class="btn" id="signUp">已有账号?点击登录!</button>
          </div>
        </div>
      </div>
    </div>
  <script  src="/templets/login/script.js"></script>
</body>
</html>

style.css

:root {
  /* COLORS */
  --white: #e9e9e9;
  --gray: #333;
  --blue: #0367a6;
  --lightblue: #008997;
  /* RADII */
  --button-radius: 0.7rem;
  /* SIZES */
  --max-width: 758px;
  --max-height: 420px;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
body {
  align-items: center;
  background-color: var(--white);
  background: url("images/background_oeuhe7.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: grid;
  height: 100vh;
  place-items: center;
}
.form__title {
  font-weight: 300;
  margin: 0;
  margin-bottom: 1.25rem;
}
.link {
  color: var(--gray);
  font-size: 0.9rem;
  margin: 10px 0;
  text-decoration: none;
}
.container {
  background-color: var(--white);
  border-radius: var(--button-radius);
  box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
    0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
  height: var(--max-height);
  max-width: var(--max-width);
  overflow: hidden;
  position: relative;
  width: 100%;
}
.container__form {
  height: 100%;
  position: absolute;
  top: 0;
  transition: all 0.6s ease-in-out;
}
.container--signin {
  left: 0;
  width: 50%;
  z-index: 2;
}
.container.right-panel-active .container--signin {
  transform: translateX(100%);
}
.container--signup {
  left: 0;
  opacity: 0;
  width: 50%;
  z-index: 1;
}
.container.right-panel-active .container--signup {
  -webkit-animation: show 0.6s;
          animation: show 0.6s;
  opacity: 1;
  transform: translateX(100%);
  z-index: 5;
}
.container__overlay {
  height: 100%;
  left: 50%;
  overflow: hidden;
  position: absolute;
  top: 0;
  transition: transform 0.6s ease-in-out;
  width: 50%;
  z-index: 100;
}
.container.right-panel-active .container__overlay {
  transform: translateX(-100%);
}
.overlay {
  background-color: var(--lightblue);
  background: url("images/background_oeuhe7.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  left: -100%;
  position: relative;
  transform: translateX(0);
  transition: transform 0.6s ease-in-out;
  width: 200%;
}
.container.right-panel-active .overlay {
  transform: translateX(50%);
}
.overlay__panel {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  position: absolute;
  text-align: center;
  top: 0;
  transform: translateX(0);
  transition: transform 0.6s ease-in-out;
  width: 50%;
}
.overlay--left {
  transform: translateX(-20%);
}
.container.right-panel-active .overlay--left {
  transform: translateX(0);
}
.overlay--right {
  right: 0;
  transform: translateX(0);
}
.container.right-panel-active .overlay--right {
  transform: translateX(20%);
}
.btn {
  background-color: var(--blue);
  background-image: linear-gradient(90deg, var(--blue) 0%, var(--lightblue) 74%);
  border-radius: 20px;
  border: 1px solid var(--blue);
  color: var(--white);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  padding: 0.9rem 4rem;
  text-transform: uppercase;
  transition: transform 80ms ease-in;
}
.form > .btn {
  margin-top: 1.5rem;
}
.btn:active {
  transform: scale(0.95);
}
.btn:focus {
  outline: none;
}
.form {
  background-color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 3rem;
  height: 100%;
  text-align: center;
}
.input {
  background-color: #fff;
  border: none;
  padding: 0.9rem 0.9rem;
  margin: 0.5rem 0;
  width: 100%;
}
@-webkit-keyframes show {
  0%,
  49.99% {
    opacity: 0;
    z-index: 1;
  }
  50%,
  100% {
    opacity: 1;
    z-index: 5;
  }
}
@keyframes show {
  0%,
  49.99% {
    opacity: 0;
    z-index: 1;
  }
  50%,
  100% {
    opacity: 1;
    z-index: 5;
  }
}

script.js

const signInBtn = document.getElementById("signIn");
const signUpBtn = document.getElementById("signUp");
const fistForm = document.getElementById("form1");
const secondForm = document.getElementById("form2");
const container = document.querySelector(".container");
signInBtn.addEventListener("click", () => {
  container.classList.remove("right-panel-active");
});
signUpBtn.addEventListener("click", () => {
  container.classList.add("right-panel-active");
});

若下载地址失效请在下方留言或联系客服

下载权限

查看

K

免费下载

评论并刷新后下载

登录后下载

查看演示

{{attr.name}}：

您当前的等级为

登录后免费下载登录小黑屋反思中，不准下载！评论后刷新页面下载评论支付以后下载请先登录您今天的下载次数（次）用完了，请明天再来支付积分以后下载立即支付支付以后下载立即支付您当前的用户组不允许下载升级会员

您已获得下载权限您可以每天下载资源次，今日剩余次

声明：本站部分文章来源于网络，如有危害到您的合法权益请联系客服

{{userData.name}}已认证

style.css

script.js

JS距离2022过年倒计时代码

localhost和127.0.0.1的区别有哪些

法律声明

在线举报