Screenshot of login registration interface

Login and registration conversion ,

Login registration button floating up and down , The interface border and background have different colors and change at different speeds ,

Double click to switch between login and registration , Click to stop the animation ( Code at the bottom ).

Picture restrictions 5M, So it's not very clear

Implementation of small spring frame :

<div class="main"> <div class="content"> <p> It's just a demo, Unable to submit data </p> <span
onclick="fun()">×</span> </div> </div> $(".btn button").click(function(){
document.querySelector(".main").classList.toggle('active'); }) function fun(){
document.querySelector(".main").classList.toggle('active'); }
Main technologies used in the interface :

* HTML CSS jQuery

* css Mainly used animate Animation attributes , Pseudo element hover wait , Used to implement when the mouse enters an element , Different changes , For example, the color becomes lighter and darker .
                

                

                 

                jQuery Mainly used css() Method for dynamic page rendering

        ​​​​​​​        

HTML Partial code :( Original code if required , Please send me a private message , Free source code )
<body> <div class="box"> <div class="container"> <!-- Sign in --> <div
class="login" > <h2> Ascend     record </h2> <form action="#" method="post">
<div class="uap"> <label for="username"><i class="fa-solid
fa-user"></i></label> <input type="text" name="username" id="username"
placeholder="Enter your name"> </div> <div class="uap"> <label
for="password"><i class="fa fa-lock"></i></label> <input type="password"
name="password" id="password" placeholder="Enter you password"> </div> <p
class="forget"><a href="#" > Forgot password ?</a></p> <span class="btn"><button
type="button">LOGIN</button></span> </form> </div> <!-- register --> <div id="regist"
style="display: none;"> <h2> notes     book </h2> <form action="#"
method="get"> <div class="uap"> <label for="username"><i class="fa-solid
fa-user"></i></label> <input type="text" name="username" id="username"
placeholder="Enter your name"> </div> <div class="uap"> <label
for="password"><i class="fa fa-lock"></i></label> <input type="password"
name="password" id="password" placeholder="Enter your password"> </div> <!--
<div class="uap"> <label for="password1"><i class="fa fa-lock"></i></label>
<input type="password" name="password1" id="password" placeholder=" Please confirm the password ">
</div> --> <div class="uap"> <label for="email"><i class="fa-solid
fa-envelope"></i></label> <input type="email" name="emali" id="email"
placeholder="Enter your email"> </div> <span class="btn"><button type="button"
style="margin-top: 20px;">REGIST</button></span> </form> </div> <div
class="zhuce"> <button class="button" ondblclick="zhuce()"
title=" Double click to enter registration "> register </button> <button class="button1" ondblclick="denglu()"
style="display: none;" title=" Double click to log in "> Sign in </button> </div> </div> </div> <div
class="main"> <div class="content"> <p> It's just a demo, Unable to submit data </p> <span
onclick="fun()">×</span> </div> </div> <script
src="./jquery-1.7.2.js"></script> <script> </script> </body>
 css Partial code :( Code too long )
@keyframes movepoint1 { from { top: 90%; } to { top: 20%; } } @keyframes
movepoint2 { from { top: 90%; } to { top: 20%; } } @keyframes borders { 0% {
background: #f368e0; } 10% { background: #ff9f43; } 20% { background: #ee5253;
} 30% { background: #0abde3; } 40% { background: #10ac84; } 50% { background:
#01a3a4; } 60% { background: #8c7ae6; } 80% { background: #fda7df; } 90% {
background: linear-gradient(to top, #d9afd9 0%, #97d9e1 100%); } 100% {
background: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%); } } * { margin:
0; padding: 0; } body { height: 100vh; background-image:
linear-gradient(135deg, #C2FFD8 10%, #465EFB 100%); } .box { width: 660px;
height: 540px; position: absolute; top: 50%; left: 50%; transform:
translate(-50%, -50%); background: #f368e0; display: flex; justify-content:
center; align-items: center; border-radius: 15px; box-shadow: 15px 15px 50px
20px rgba(0, 0, 0, 0.3); } .container { width: 650px; height: 530px;
border-radius: 15px; display: flex; flex-direction: row; overflow: hidden; }
.container .login { width: 70%; background-image: linear-gradient(135deg,
#5EFCE8 10%, #736EFE 100%); padding: 70px; transition: all 1s; } .container
.login h2 { display: inline-block; border-bottom: 3px solid #F9F871;
margin-bottom: 30px; padding-bottom: 5px; } .container .login input { display:
block; margin-bottom: 20px; margin-right: 0px; border: none; outline: none;
width: 260px; height: 50px; font-size: 18px; padding-left: 10px;
background-color: transparent; border-bottom: 2px solid white; color: #57606f; }
Finally, I would like to say that I am mainly studying the back end in University java, But I have a strong interest in the front end , If the code is unreasonable , Or there are better ways to implement the same function , Please correct .

Any questions , Please put it up in the comment area or send me a private letter .

( Original code if required , Please send me a private message , Free source code )

Technology
©2019-2020 Toolsou All rights reserved,
Solve in servlet The Chinese output in is a question mark C String function and character function in language MySQL management 35 A small coup optimization Java performance —— Concise article Seven sorting algorithms (java code ) use Ansible Batch deployment SSH Password free login to remote host according to excel generate create Build table SQL sentence Spring Source code series ( sixteen )Spring merge BeanDefinition Principle of Virtual machine installation Linux course What are the common exception classes ?