首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >用户登录与注册模板

用户登录与注册模板

作者头像
小狐狸说事
发布2023-01-11 10:47:41
8.6K3
发布2023-01-11 10:47:41
举报
文章被收录于专栏:小狐狸说事小狐狸说事

用户登录与注册模板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");
});
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • style.css
  • script.js
相关产品与服务
验证码
腾讯云新一代行为验证码(Captcha),基于十道安全栅栏, 为网页、App、小程序开发者打造立体、全面的人机验证。最大程度保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下业务安全的同时,提供更精细化的用户体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档