网页开发一：设计登录页
展示页面：
主源码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="IE=edge"><link rel="stylesheet" href="./style1.css"><title>Document</title>
</head>
<body><h2>Sign in / Sign up</h2><div class="container" id="container"><div class="form-container sign-up-container"><form action=""><h1>Create Account</h1><div class="social-container"><a href="#"><i class="fab fa-facebook-f"></i></a><a href="#"><i class="fab fa-google-plug-g"></i></a><a href="#"><i class="fab fa-linkedin-in"></i></a></div><span>or use your email for registration</span><input type="text" placeholder="Name"><input type="email" placeholder="Email"><input type="password" placeholder="Password"><button>Sign Up</button></form></div><div class="form-container sign-in-container"><form action=""><h1>Sign in</h1><div class="social-container"><a href="#"><i class="fab fa-facebook-f"></i></a><a href="#"><i class="fab fa-google-plug-g"></i></a><a href="#"><i class="fab fa-linkedin-in"></i></a></div><span>or use your account<span><input type="email" placeholder="Email"><input type="password" placeholder="Password"><a href="#"> Forget youre password?</a><button>Sign in</button></form></div><div class="overlay-container"><div class="overlay"><div class="overlay-panel overlay-left"><h1>Welcome Back</h1><p>To keep connected with you please login your personal information!</p><button class="ghost" id="signIn">Sign In</button></div><div class="overlay-panel overlay-right"><h1>Hello,friend!</h1><p>Enter your personal details and start journey with us</p><button class="ghost" id="signUp">Sign Up</button></div></div></div></div><footer><p>Create with <i class="fa fa-heart"></i>by<a href="#"></a></p></footer><script src="./s1.js"></script>
</body>
</html>@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;1,100&display=swap');
* {box-sizing: border-box;
}
body {background: #f6f5f7;display: flex;justify-content: center;align-items: center;flex-direction: column;font-family: 'Montserrat', sans-serif;height: 100vh;margin: -20px 0 50px;
}
h1 {font-weight: bold;margin: 0;
}
h2 {text-align: center;
}
p {font-size: 14px;font-weight: 100;line-height: 20px;letter-spacing: 0.5px;margin: 20px 0 30px;
}
span {font-size: 12px;
}
a {color: #333;font-size: 14px;text-decoration: none;margin: 15px 0;
}
button {border-radius: 20px;border: 1px solid #ff4b2b;background-color: #ff4b2b;color: #ffffff;font-size: 12px;font-weight: bold;padding: 12px 45px;letter-spacing: 1px;text-transform: uppercase;transition: transform 80ms ease-in;
}
button:active {transform: scale(0.95);
}
button:focus {outline: none;
}
button.ghost {background-color: transparent;border-color: #ffffff;
}
form {background-color: #ffffff;display: flex;align-items: center;justify-content: center;flex-direction: column;padding: 0 50px;height: 100%;text-align: center;
}
input {background-color: #eee;border: none;padding: 12px 15px;margin: 8px 0;width: 100%;
}
.container {background-color: #fff;border-radius: 10px;box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);position: relative;overflow: hidden;width: 768px;max-width: 100%;min-height: 480px;
}
.form-container{position: absolute;top: 0;height: 100%;transition: all 0.6s ease-in-out;
}
.sign-in-container{left: 0;width: 50%;z-index: 2;
}
.container.right-panel-active .sign-in-container{transform: translateX(100%);
}
.sign-up-container{left: 0;width: 50%;opacity: 0;
z-index: 1;
}
.container.right-panel-active .sign-up-container{transform: translateX(100%);opacity: 1;z-index: 5;animation: show 0.6s;
}
@keyframes show {0%,49.99%{opacity: 0;z-index: 1;}50%,100%{opacity: 1;z-index: 5;}
}
.overlay-container{position: absolute;top: 0;left: 50%;width: 50%;height: 100%;overflow: hidden;transition: transform 0.6s ease-in-out;z-index: 100;
}
.container.right-panel-active .overlay-container{transform: translateX(-100%);
}
.overlay{background: #ff4b2b;background: -webkit-linear-gradient(to right,#ff4b2b,#ff416c);background: linear-gradient(to right,#ff4b2b,#ff416c);background-repeat: no-repeat;background-size: cover;background-position: 0 0;color: #ffffff;position: relative;left: -100%;height: 100%;width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.container.right-panel-active .overlay{transform: translateX(50%);
}
.overlay-panel{position: absolute;display: flex;align-items: center;justify-content: center;flex-direction: column;text-align: center;top: 0;height: 100%;width: 50%;transform: translateX(0);transition: transform 0.6s ease-in-out;
}
.overlay-left{transform: translateX(-20%);
}
.container.right-panel-active .overlay-left{transform: translateX(0);
}
.overlay-right{right: 0;transform: translateX(0);
}
.container.right-panel-active .overlay-right{transform: translateX(20%);
}
.social-container{margin: 20px 0;
}
.social-container a{border: 1px solid #dddddd;border-radius: 50%;display: inline-flex;justify-content: center;align-items: center;margin: 0 5px ;height: 40px ;width: 40px ;
}
footer{background-color: #222;color: #fff;font-size: 14px ;bottom: 0;position: fixed;left: 0;right: 0;text-align: center;z-index: 999;
}
footer p{margin: 10px 0;}
footer i{color: red;
}
footer a{color: #3c97bf;text-decoration: none;
}const sighUpButton=Document.getElementById('sighUp')
const sighInButton=Document.getElementById('sighIn')
const container=Document.getElementById('container')sighUpButton.addEventListener('click',()=>{container.classList.add("right-panel-active")
})
sighInButton.addEventListener('click',()=>{container.classList.remove("right-panel-active")
})参照：一点点JS：优雅得登录注册界面，学会了领导直夸不错（这期加了配音）_哔哩哔哩_bilibili