HTML+CSS+JS登录注册页面（媒体查询自适应版）

最新推荐文章于 2024-06-23 23:54:51 发布

铃铃阙晨

最新推荐文章于 2024-06-23 23:54:51 发布

阅读量2.3k

点赞数 4

文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_68008943/article/details/134607044

版权

⛳页面展示

⛳代码

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sign in & Sign up</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <Main>
    <div class="box">
      <div class="inner-box">
        <!-- 表单 -->
        <div class="forms-wrap">
          <!-- sign-in -->
          <form action="index.html" outocomplexe="false" class="sign-in-form">
            <div class="logo">
              <img
                src="data:image/jpeg;base64,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"
                alt="logo">
              <h4>前端学习</h4>
            </div>
            <div class="heading">
              <h2>欢迎回来</h2>
              <h6>Not registerd yet?</h6>
              <a href="#" class="toggle">Sign up</a>
            </div>
            <!-- 表单 -->
            <div class="actual-form">
              <div class="input-wrap">
                <input type="text" minlength="4" autocomolete="off" required class="input-field" />
                <label>Name</label>
              </div>
              <div class="input-wrap">
                <input type="password" autocomplete="off" required class="input-field" />
                <label for="padd">Password</label>
              </div>
              <input type="submit" value="Sign in" class="sign-btn" />
              <p class="text">忘记密码？
                <a href="#">获取帮助</a>
              </p>
            </div>
          </form>
          <!-- sign-up -->
          <form action="index.html" outocomplexe="false" class="sign-up-form">
            <div class="logo">
              <img src="" alt="logo">
              <h4>前端学习</h4>
            </div>
            <div class="heading">
              <h2>注册</h2>
              <h6>Already have an account?</h6>
              <a href="#" class="toggle">Sign in</a>
            </div>
            <!-- 表单 -->
            <div class="actual-form">
              <div class="input-wrap">
                <input type="email" autocomolete="off" required class="input-field" />
                <label>Email</label>
              </div>
              <div class="input-wrap">
                <input type="password" autocomplete="off" required class="input-field" />
                <label for="padd">Password</label>
              </div>
              <input type="submit" value="Sign Up" class="sign-btn" />
              <p class="text">注册前，我已经阅读并同意
                <a href="#">隐私协议</a>
              </p>
            </div>
          </form>
        </div>

        <!-- 轮播 -->、
        <div class="carousel">
          <div class="images-wrapper">
            <img
              src="https://tse4-mm.cn.bing.net/th/id/OIP-C.j6ZhJs9q-DnUwpfYB26VKgHaHa?w=174&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7"
              alt="" class="image img-1 show">
            <img
              src="https://tse4-mm.cn.bing.net/th/id/OIP-C.eHtqL4iIilNlomM2dYFOxAHaHa?w=190&h=187&c=7&r=0&o=5&dpr=1.5&pid=1.7"
              alt="" class="image img-2">
            <img
              src="https://tse3-mm.cn.bing.net/th/id/OIP-C.t4poSevHWg8SW418L8XVxgHaFv?w=228&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7"
              alt="" class="image img-3">
          </div>
          <div class="text-slider">
            <div class="text-wrap">
              <div class="text-group">
                <h2>开始你的学习流程</h2>
                <h2>准备创造奇迹吧</h2>
                <h2>学习是一切创造力的开始</h2>
              </div>
            </div>
            <div class="bullets">
              <span class="active" data-value="1"></span>
              <span data-value="2"></span>
              <span data-value="3"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Main>
  <script src="app.js"></script>
</body>

</html>

CSS

*,
*::after,
*::before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


main {
  width: 100%;
  overflow: hidden;
  min-height: 100vh;
  padding: 2rem;
  background-color: #ff8c6b;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  width: 100%;
  overflow: hidden;
  max-width: 1020px;
  height: 640px;
  background-color: #FFF;
  position: relative;
  border-radius: 3.3rem;
  box-shadow: 0 60px 40px -30px rgb(0, 0, 0, .27);
}

.inner-box {
  position: absolute;
  width: calc(100% - 4.1rem);
  height: calc(100% - 4.1rem);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.forms-wrap {
  position: absolute;
  height: 100%;
  width: 45%;
  left: 0;
  top: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  transition: 0.8s ease-in-out;
}

form {
  max-width: 260px;
  width: 100%;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  grid-column: 1/2;
  grid-row: 1/2;
  transition: opacity 0.02s 0.4s;
}

form.sign-up-form {
  opacity: 0;
  pointer-events: none;
}


.logo {
  display: flex;
}

.logo img {
  height: 27px;
  margin-right: .3rem;
}

.logo h4 {
  font-size: 1.1rem;
  letter-spacing: -0.5px;
  color: #151111;
}

.heading h2 {
  font-size: 2.1rem;
  font-weight: 600;
  color: #151111;
}

.heading h6 {
  font-size: 0.75rem;
  font-weight: 400;
  color: #babababa;
  display: inline;
}

.toggle {
  color: #151111;
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 500;
  transition: .3s;
}

.toggle:hover {
  color: #8371fd
}

.input-wrap {
  position: relative;
  height: 37px;
  margin-bottom: 2rem;
}

.input-field {
  position: absolute;
  width: 100%;
  height: 100%;
  background: none;
  border: none;
  outline: none;
  border-bottom: 1px solid #bbb;
  padding: 0;
  font-size: 0.95rem;
  color: #151111;
  transition: 0.4s;
}

label {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95rem;
  color: #bbb;
  pointer-events: none;
  transition: 0.4s;
}

.input-field.active {
  border-bottom-color: #151111;
}

.input-field.active+label {
  font-size: 0.75rem;
  top: -2px;
}

.sign-btn {
  display: inline-block;
  width: 100%;
  height: 43px;
  background-color: #151111;
  color: #FFF;
  border: none;
  cursor: pointer;
  border-radius: 0.8rem;
  font-size: 0.8rem;
  margin-bottom: 2rem;
  transition: 0.3s;
}

.sign-btn:hover {
  background-color: #8371fd;
}

.text {
  color: #bbb;
  font-size: 0.7rem;
}

.text a {
  color: #bbb;
  transition: 0.3s;
}

.text a:hover {
  color: #8371fd;
}

main.sign-up-mode form.sign-in-form {
  opacity: 0;
  pointer-events: none;
}

main.sign-up-mode form.sign-up-form {
  opacity: 1;
  pointer-events: all;
}

main.sign-up-mode .forms-wrap {
  left: 55%;
}

main.sign-up-mode .carousel {
  left: 0%;
}

.carousel {
  background-color: #ffe0d2;
  border-radius: 2rem;
  padding: 2rem;
  overflow: hidden;
  position: absolute;
  height: 100%;
  width: 55%;
  left: 45%;
  top: 0;
  background-color: #ffe0d2;
  border-radius: 2rem;
  display: grid;
  transition: 0.8s ease-in-out;
  overflow: hidden;
  position: relative;
  grid-template-rows: auto 1fr;
}

.images-wrapper {
  display: grid;
  grid-template-columns: 2fr;
  grid-template-rows: 1fr;
}

.image {
  width: 100%;
  height: 400px;
  grid-column: 1/2;
  grid-row: 1/2;
  opacity: 0;
  transition: opacity 0.3s, transform 0.5s;
}

.img-1 {
  transform: translate(0, -50px);
}

.img-2 {
  transform: scale(0.4, 0.5);
}

.img-3 {
  transform: scale(0.3) rotate(-20deg);
}

.image.show {
  opacity: 1;
  transform: none;
}

.text-slider {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.text-wrap {
  max-height: 2.2rem;
  overflow: hidden;
  margin-bottom: 2.5rem;
}

.text-group {
  display: flex;
  flex-direction: column;
  text-align: center;
  transform: translateY(0);
  transition: 0.5s;
}

.text-group h2 {
  line-height: 2.2rem;
  font-weight: 600;
  font-size: 1.6rem;
}

.bullets {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bullets span {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0.2rem;
  background-color: #aaa;
  margin: 0 0.25rem;
  cursor: pointer;
  transition: .3s;
}

.bullets span.active {
  width: 1.1rem;
  background-color: #151111;
  border-radius: 1rem;
}

@media (max-width:850px) {
  .box {
    height: auto;
    max-width: 550px;
    overflow: hidden;
  }

  .inner-box {
    position: static;
    transform: none;
    width: revert;
    height: revert;
    padding: 2px;
  }

  .forms-wrap {
    position: revert;
    width: 100%;
    height: 100%;
  }

  form {
    max-width: revert;
    padding: 1.5rem 2.5rem 2rem;
    transition: transform 0.8s ease-in-out, opacity 0.45s linear;
  }

  .heading {
    margin: 2rem 0;
  }

  form.sign-up-form {
    transform: translateX(100%);
  }

  main.sign-up-mode form.sign-in-form {
    transform: translateX(-100%);
  }

  main.sign-up-mode form.sign-up-form {
    transform: translateX(0%);
  }

  .carousel {
    position: revert;
    height: auto;
    width: 100%;
    padding: 3rem 2rem;
    display: flex;
  }

  .images-wrapper {
    display: none;
  }

  .text-slider {
    width: 100%;
  }
}

@media (max-width:530px) {
  main {
    padding: 1rem;
  }

  .box {
    border-radius: 2rem;
  }

  .inner-box {
    padding: 1rem;
  }

  .carousel {
    padding: 1.5rem 1rem;
  }

  .text-wrap {
    margin-bottom: 1rem;
  }

  .text-group h2 {
    font-size: 1.2rem;
  }

  form {
    padding: 1rem 2rem 1.5rem;
  }
}

JS

const inputs = document.querySelectorAll('.input-field');
const toggle_btn = document.querySelectorAll('.toggle');
const main = document.querySelector('main');
const bullets = document.querySelectorAll('.bullets span');
const images = document.querySelectorAll('.image');

inputs.forEach(inp => {
  inp.addEventListener('focus', () => {
    inp.classList.add('active');
  })
  inp.addEventListener('blur', () => {
    if (inp.value != '') return;
    inp.classList.remove('active');
  })
})

toggle_btn.forEach(btn => {
  btn.addEventListener('click', () => {
    main.classList.toggle('sign-up-mode')
  })
})

function moveSlider() {
  let index = this.dataset.value;
  let currentImg = document.querySelector(`.img-${index}`);
  images.forEach(img => {
    img.classList.remove('show');
  })
  currentImg.classList.add('show')
  const textSlider = document.querySelector('.text-group');
  textSlider.style.transform = `translateY(${-(index - 1) * 2.2}rem)`

  bullets.forEach(bullet => {
    bullet.classList.remove('active');
  })
  this.classList.add('active')
}

bullets.forEach(bullet => {

  bullet.addEventListener('click', moveSlider);
})