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! |
<<: Detailed explanation of the use of MySQL Online DDL
>>: VMware ESXi installation and use record (with download)
Recommend
Summary of 6 Linux log viewing methods
As a backend programmer, you deal with Linux in m...
Analysis of the reasons why the index does not take effect when searching in the MySql range
1 Problem Description This article sorts the esta...
Tomcat class loader implementation method and example code
Tomcat defines multiple ClassLoaders internally s...
Detailed explanation on reasonable settings of MySQL sql_mode
Reasonable setting of MySQL sql_mode sql_mode is ...
Using react+redux to implement counter function and problems encountered
Redux is a simple state manager. We will not trac...
How to set the text in the select drop-down menu to scroll left and right
I want to use the marquee tag to set the font scro...
CSS and JS to achieve romantic meteor shower animation
1. Rendering 2. Source code HTML < body > &...
Detailed explanation of the performance monitoring ideas of specified processes in Linux system based on Python
There are many tools, components and programs for...
An article teaches you how to use Vue's watch listener
Table of contents Listener watch Format Set up th...
Detailed explanation of webpack-dev-server core concepts and cases
webpack-dev-server core concepts Webpack's Co...
React's component collaborative use implementation
Table of contents Nesting Parent-child component ...
Basic usage tutorial of MySQL slow query log
Slow query log related parameters MySQL slow quer...
How to change the CentOS server time to Beijing time
1. I purchased a VPS and CentOS system, and found...
How to bind Docker container to external IP and port
Docker allows network services to be provided by ...
MySQL scheduled backup solution (using Linux crontab)
Preface Although some love in this world has a pr...