登录注册页面（有源码，十分的银杏哦）

最新推荐文章于 2024-07-11 15:40:25 发布

悟解了

最新推荐文章于 2024-07-11 15:40:25 发布

阅读量512

点赞数 13

分类专栏：页面分享文章标签： html5 css 前端 javascript

本文链接：https://blog.csdn.net/liyankang/article/details/135656497

版权

页面分享专栏收录该内容

4 篇文章 0 订阅

订阅专栏

特色：

一个页面，两个功能，动态展示，简约大气。

话不多说，看展示。

还在等什么，赶快抄起来吧：https://download.csdn.net/download/liyankang/88754646

没有积分的小伙伴，原代码我放在下面哦，快快白嫖起来吧。

HTML文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="index.css">
    <!-- 确保你已经加载了jQuery库，因为你的代码依赖于它 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title></title>
  </head>

  <body>

    <div class="container">
      <div class="welcome">
        <div class="pinkbox">
          <div class="signup nodisplay">
            <h1>register</h1>
            <form autocomplete="off">
              <input type="text" placeholder="username">
              <input type="email" placeholder="email">
              <input type="password" placeholder="password">
              <input type="password" placeholder="confirm password">
              <button class="button submit">create account </button>
            </form>
          </div>
          <div class="signin">
            <h1>sign in</h1>
            <form class="more-padding" autocomplete="off">
              <input type="text" placeholder="username">
              <input type="password" placeholder="password">
              <div class="checkbox">
                <input type="checkbox" id="remember" /><label for="remember">remember me</label>
              </div>

              <button class="button submit">login</button>
            </form>
          </div>
        </div>
        <div class="leftbox">
          <h2 class="title"><span>BLOOM</span>&<br>BOUQUET</h2>
          <p class="desc">pick your perfect <span>bouquet</span></p>
          <img class="flower smaller" src="https://image.ibb.co/d5X6pn/1357d638624297b.jpg" alt="1357d638624297b"
            border="0">
          <p class="account">have an account?</p>
          <button class="button" id="signin">login</button>
        </div>
        <div class="rightbox">
          <h2 class="title"><span>BLOOM</span>&<br>BOUQUET</h2>
          <p class="desc"> pick your perfect <span>bouquet</span></p>
          <img class="flower" src="https://preview.ibb.co/jvu2Un/0057c1c1bab51a0.jpg" />
          <p class="account">don't have an account?</p>
          <button class="button" id="signup">sign up</button>
        </div>
      </div>
    </div>

    </div>


  </body>
</html>
<script src="index.js"></script>

CSS文件

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400|Lora");

body {
  background: #CBC0D3;
}

/* div box styling */
.container {
  margin: auto;
  width: 650px;
  height: 550px;
  position: relative;
}

.welcome {
  background: #f6f6f6;
  width: 650px;
  height: 415px;
  position: absolute;
  top: 25%;
  border-radius: 5px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
}

.pinkbox {
  position: absolute;
  top: -10%;
  left: 5%;
  background: #EAC7CC;
  width: 320px;
  height: 500px;
  border-radius: 5px;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  transition: all 0.5s ease-in-out;
  z-index: 2;
}

.nodisplay {
  display: none;
  transition: all 0.5s ease;
}

.leftbox,
.rightbox {
  position: absolute;
  width: 50%;
  transition: 1s all ease;
}

.leftbox {
  left: -2%;
}

.rightbox {
  right: -2%;
}

/* font & button styling */
h1 {
  font-family: "Open Sans", sans-serif;
  text-align: center;
  margin-top: 95px;
  text-transform: uppercase;
  color: #f6f6f6;
  font-size: 2em;
  letter-spacing: 8px;
}

.title {
  font-family: "Lora", serif;
  color: #8E9AAF;
  font-size: 1.8em;
  line-height: 1.1em;
  letter-spacing: 3px;
  text-align: center;
  font-weight: 300;
  margin-top: 20%;
}

.desc {
  margin-top: -8px;
}

.account {
  margin-top: 45%;
  font-size: 10px;
}

p {
  font-family: "Open Sans", sans-serif;
  font-size: 0.7em;
  letter-spacing: 2px;
  color: #8E9AAF;
  text-align: center;
}

span {
  color: #EAC7CC;
}

.flower {
  position: absolute;
  width: 120px;
  height: 120px;
  top: 46%;
  left: 29%;
  opacity: 0.7;
}

.smaller {
  width: 90px;
  height: 100px;
  top: 48%;
  left: 38%;
  opacity: 0.9;
}

button {
  padding: 12px;
  font-family: "Open Sans", sans-serif;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 11px;
  border-radius: 10px;
  margin: auto;
  outline: none;
  display: block;
}

button:hover {
  background: #EAC7CC;
  color: #f6f6f6;
  transition: background-color 1s ease-out;
}

.button {
  margin-top: 3%;
  background: #f6f6f6;
  color: #ce7d88;
  border: solid 1px #EAC7CC;
}

/* form styling */
form {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 7px;
}

.more-padding {
  padding-top: 35px;
}

.more-padding input {
  padding: 12px;
}

.more-padding .submit {
  margin-top: 45px;
}

.submit {
  margin-top: 25px;
  padding: 12px;
  border-color: #ce7d88;
}

.submit:hover {
  background: #CBC0D3;
  border-color: #bfb1c9;
}

input {
  background: #EAC7CC;
  width: 65%;
  color: #ce7d88;
  border: none;
  border-bottom: 1px solid rgba(246, 246, 246, 0.5);
  padding: 9px;
  margin: 7px;
}

input::placeholder {
  color: #f6f6f6;
  letter-spacing: 2px;
  font-size: 1.3em;
  font-weight: 100;
}

input:focus {
  color: #ce7d88;
  outline: none;
  border-bottom: 1.2px solid rgba(206, 125, 136, 0.7);
  font-size: 1em;
  transition: 0.8s all ease;
}

input:focus::placeholder {
  opacity: 0;
}

label {
  font-family: "Open Sans", sans-serif;
  color: #ce7d88;
  font-size: 0.8em;
  letter-spacing: 1px;
}

.checkbox {
  display: inline;
  white-space: nowrap;
  position: relative;
  left: -62px;
  top: 5px;
}

input[type=checkbox] {
  width: 7px;
  background: #ce7d88;
}

.checkbox input[type=checkbox]:checked+label {
  color: #ce7d88;
  transition: 0.5s all ease;
}

JS文件

$('#signup').click(function() {
  $('.pinkbox').css('transform', 'translateX(80%)');
  $('.signin').addClass('nodisplay');
  $('.signup').removeClass('nodisplay');
});

$('#signin').click(function() {
  $('.pinkbox').css('transform', 'translateX(0%)');
  $('.signup').addClass('nodisplay');
  $('.signin').removeClass('nodisplay');
});