Make a nice flip login and registration interface based on html+css

Make a nice flip login and registration interface

Preface

I'm trying to build a network disk recently, and the technology stack I use is probably .net core + MVC + Mysql + Layui. The main purpose is to get familiar with .net core development through this specific project. It is the future of .net!

My idea

After completing part of the back-end construction, I turned my attention to the front-end - login and registration. Since this network disk is a personal project for trying out, I don’t want to use the production method I used before - making the login and registration interfaces separately. I tried to combine these two functions into one page and present it in a way that is not too "Low".

You can also think that I am just lazy and don't want to create another page

So after excluding the previously used method of clicking a button to jump out of the login/registration form, and the rather rigid method of using tabs to switch login/registration, I set my sights on the flip effect.

After seeing the sign up and log in, I thought it might be a good idea to write something about these two hyperlinks.

After the user clicks sign up, the login status switches to registration. After the user clicks log in, the registration status switches to login.

Technically it shouldn't be difficult, but the B-level seems to be a lot higher immediately! ! ! !

The specific effect can be directly pulled to the bottom

Specific implementation

Html

<body>
  <div class="mainbody middle">
    <form class="form-box front">
      <div>
        <h1>Login</h1>
      </div>
      <div>
        <input class="input-normal" type="text" placeholder="UserAccount" />
        <input class="input-normal" type="password" placeholder="PassWord" />
        <button class="btn-submit" type="submit">
          LOGIN
        </button>
      </div>
      <div>
        <p style="margin-top: 40px">If you don't have account. Please</p>
        <p>Click here to <a id="signin">Sign Up</a></p>
      </div>
    </form>
    <!-- Yes, you read it right, there is basically no difference between the upper and lower forms, one is front and one is back -->
    <form class="form-box back">
      <div>
        <h1>Register</h1>
      </div>
      <div>
        <input class="input-normal" type="text" placeholder="UserAccount" />
        <input class="input-normal" type="password" placeholder="PassWord" />
        <button class="btn-submit" type="submit">
          Register
        </button>
      </div>
      <div>
        <p style="margin-top: 40px">Have an account? You can</p>
        <p>Click here to <a id="login">Log in</a></p>
      </div>
    </form>
  </div>
</body>

Css

body {
  /*Color depends on personal preference*/
  background: darkslategrey;
  /*The font depends on personal preference*/
  font-family: sans-serif;
}

/*Mainly set the size of the middle form, just adjust it to what you think looks good*/
.mainbody {
  height: 440px;
  width: 400px;
}

/*Centering effect*/
.middle {
  /*Make the upper left corner correspond to the center of the parent element*/
  top: 50%;
  left: 50%;
  position: absolute;
  /*Shift 50% to the left and up*/
  transform: translate(-50%, -50%);
}

.form-box {
  width: 100%;
  height: 100%;
  margin: auto;
  background: darkcyan;
  /* I think the size of this rounded corner is just right*/
  border-radius: 40px;
}

.input-normal {
  width: 220px;
  height: 38px;
  margin: 30px auto;
  padding: 0;
  text-align: center;
  border-radius: 20px;
  outline: none;
  display: block;
  transition: 0.3s;
  border: 1px solid #e6e6e6;
}

.btn-submit {
  width: 100px;
  height: 36px;
  margin: auto;
  font-size: 18px;
  text-align: center;
  color: white;
  border-radius: 20px;
  display: block;
  background: darkslategrey;
  transition: 0.3s;
}

.front {
  transform: rotateY(0deg);
}

/* Rotate the back 180 degrees, with the back facing the user. I choose the y axis here*/
.back {
  transform: rotateY(-180deg);
}

.front,
.back {
  position: absolute;
  /* Then set it to be invisible when the back is facing the user */
  backface-visibility: hidden;
  /* I think linear is smoother*/
  transition: 0.3s linear;
}

/* Rotate front 180 degrees */
.middle-flip .front {
  transform: rotateY(180deg);
}
/* Rotate back 180 degrees */
.middle-flip .back {
  transform: rotateY(0deg);
}

/* I adjusted it a bit, and it looks good to me. You can change it to something better looking*/
p {
  margin: 15px auto;
  padding: 0;
  font-size: 16px;
  color: white;
  display: block;
  text-align: center;
}
a {
  color: aqua;
  cursor: pointer;
}
js

// Click sigup to trigger the flip style $("#sigup").click(function() {
  $(".middle").toggleClass("middle-flip");
});
// Click login to trigger the flip style $("#login").click(function() {
  $(".middle").toggleClass("middle-flip");
});

Effect

It seems to be ok.

You can consider adding perspective after the word "transfrom" to enhance the three-dimensional effect.

I use perspective(600px)

No matter what you think, I think this effect is still quite green.

Summarize

The above is what I introduced to you about making a beautiful flip login and registration interface based on html+css. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!

<<: Detailed explanation of the use of MySQL Online DDL

>>: VMware ESXi installation and use record (with download)

MySQL Practical Experience of Using Insert Statement

Make a nice flip login and registration interface based on html+css

MySQL Practical Experience of Using Insert Statement

A detailed introduction to the Linux directory structure

Native JS implements a very good-looking counter

HTML+CSS makes div tag add delete icon in the upper right corner sample code

MySQL 5.7.23 winx64 installation and configuration method graphic tutorial under win10

Vue implements small form validation function

Detailed explanation of MySQL transactions and MySQL logs

CentOS 6 uses Docker to deploy Zookeeper operation example

A brief discussion on spaces and blank lines in HTML code

Example of JSON output in HTML format (test interface)

Recommend

Analysis of uniapp entry-level nvue climbing pit record

Basic usage of find_in_set function in mysql

js to achieve sliding carousel effect

Example of using CSS to achieve semi-transparent background and opaque text

MySQL case when group by example

Implementation of mysql backup strategy (full backup + incremental backup)

Detailed explanation of how to connect Java to Mysql version 8.0.18

Solution to the problem that the border style of the <td></td> tag cannot be displayed in the browser

Vue implements multi-grid input box on mobile terminal

A Brief Analysis of Patroni in Docker Containers

JavaScript to achieve product magnifying glass effect

Workerman writes the example code of mysql connection pool

Ubuntu 18.04 obtains root permissions and logs in as root user

Native JavaScript message board

Detailed explanation and extension of ref and reactive in Vue3