这是一个登陆注册在同一个页面滑动选择的页面
技术：html、css、javascript
简单页面实现（为了方便，已将代码放在同一文件引用）：
1.1、效果图
1.2、完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>登录/注册</title>
</head>
<style>
/* root根伪类 --为自定义css 属性 方便我们重复使用同一个属性 自定义属性用var() 进行调用 */
:root {
/* 背景颜色 */
--white: #e9e9e9;
--gray: #333;
--blue: #0367a6;
--lightblue: #008997;
/* 外边框圆角属性 */
--button-radius: 0.7rem;
--max-width: 758px;
--max-height: 420px;
/* 字体样式 */
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
body {
align-items: center;
background-color: var(--white);
background: url(https://pic1.zhimg.com/v2-95c83933bb8d33685321a2bd5579edf8_r.jpg?source=1940ef5c);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: grid;
height: 100vh;
place-items: center;
}
.from_title {
font-weight: 300;
margin: 0;
margin-bottom: 1.25rem;
}
.link {
color: var(--gray);
font-size: 0.9rem;
margin: 1.5rem 0;
text-decoration: none;
}
.container {
background-color: var(--white);
border-radius: var(--button-radius);
box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25);
height: var(--max-height);
max-width: var(--max-width);
overflow: hidden;
position: relative;
width: 100%;
}
.container_from {
height: 100%;
position: absolute;
top: 0;
transition: all 0.6s ease-in-out;
}
.container--signin {
left: 0;
width: 50%;
z-index: 2;
}
.container.right-panel-active .container--signin {
transform: translateX(100%);
}
.container--signup {
left: 0;
opacity: 0;
width: 50%;
z-index: 1;
}
.container.right-panel-active .container--signup {
animation: show 0.6s;
opacity: 1;
transform: translateX(100%);
z-index: 5;
}
.container_overlay {
height: 100%;
left: 50%;
overflow: hidden;
position: absolute;
top: 0;
transition: transform 0.6s ease-in-out;
width: 50%;
z-index: 100;
}
.container.right-panel-active .container_overlay {
transform: translateX(-100%);
}
.overlay {
background-color: var(--lightblue);
background: url(https://pic1.zhimg.com/v2-95c83933bb8d33685321a2bd5579edf8_r.jpg?source=1940ef5c);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
left: -100%;
position: relative;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
width: 200%;
}
.container.right-panel-active .overlay {
transform: translateX(50%);
}
.overlay_panel {
align-items: center;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
position: absolute;
text-align: center;
top: 0;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
width: 50%;
}
.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%);
}
.btn {
background-color: var(--blue);
background-image: linear-gradient(
90deg,
var(--blue) 0%,
var(--lightblue),
74%
);
border-radius: 20px;
border: 1px solid var(--blue);
color: var(--white);
cursor: pointer;
font-size: 0.8rem;
font-weight: bold;
letter-spacing: 0.1rem;
padding: 0.9rem 4rem;
text-transform: uppercase;
transition: transform 80ms ease-in;
}
.form > .btn {
margin-top: 1.5rem;
}
.btn:active {
transform: scale(0.95);
}
.btn:focus {
outline: none;
}
.from {
background-color: var(--white);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 3rem;
height: 100%;
text-align: center;
}
.input {
background-color: #fff;
border: none;
padding: 0.9rem 0.9rem;
margin: 0.5rem 0;
width: 100%;
}
@keyframes show {
0%,
49.99% {
opacity: 0;
z-index: 1;
}
50%,
100% {
opacity: 1;
z-index: 5;
}
}
</style>
<body>
<!-- 整体布局 -->
<div class="container right-panel-active">
<!-- 注册框 -->
<div class="container_from container--signup">
<form action="#" class="from" id="from1">
<h2 class="from_title">注册账号</h2>
<input type="text" placeholder="User" class="input" />
<input type="email" placeholder="Email" class="input" />
<input type="password" placeholder="Password" class="input" />
<button class="btn" type="button">点击注册</button>
</form>
</div>
<!-- 登录框 -->
<div class="container_from container--signin">
<form action="#" class="from" id="from2">
<h2 class="from_title">欢迎登录</h2>
<input type="email" placeholder="Email" class="input" />
<input type="password" placeholder="Password" class="input" />
<a href="#" class="link">忘记密码？</a>
<button class="btn" type="button">登录</button>
</form>
</div>
<div class="container_overlay">
<div class="overlay">
<div class="overlay_panel overlay--left">
<button type="button" class="btn" id="signin">
已有帐号，直接登陆
</button>
</div>
<div class="overlay_panel overlay--right">
<button type="button" class="btn" id="signup">
没有账号，点击注册
</button>
</div>
</div>
</div>
</div>
</body>
<script>
const signinBtn = document.getElementById("signin");
const signupBtn = document.getElementById("signup");
const firstForm = document.getElementById("from1");
const secondForm = document.getElementById("from2");
const container = document.querySelector(".container");
signinBtn.addEventListener("click", () => {
container.classList.remove("right-panel-active");
});
signupBtn.addEventListener("click", () => {
container.classList.add("right-panel-active");
});
firstForm.addEventListener("submit", (e) => e.preventDefault());
secondForm.addEventListener("submit", (e) => e.preventDefault());
</script>
</html>
2.1、效果图：
2.2、完整代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>滑动切换的注册登录界面</title>
</head>
<style>
* {
/* 初始化 */
margin: 0;
padding: 0;
}
body {
/* 100%窗口高度 */
height: 100vh;
/* 弹性布局 水平+垂直居中 */
display: flex;
justify-content: center;
align-items: center;
/* 渐变背景 */
background: linear-gradient(200deg, #f3e7e9, #e3eeff);
}
.container {
background-color: #fff;
width: 650px;
height: 415px;
border-radius: 5px;
/* 阴影 */
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
/* 相对定位 */
position: relative;
}
.form-box {
/* 绝对定位 */
position: absolute;
top: -10%;
left: 5%;
background-color: #d3b7d8;
width: 320px;
height: 500px;
border-radius: 5px;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
/* 动画过渡 加速后减速 */
transition: 0.5s ease-in-out;
}
.register-box,
.login-box {
/* 弹性布局 垂直排列 */
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.hidden {
display: none;
transition: 0.5s;
}
h1 {
text-align: center;
margin-bottom: 25px;
/* 大写 */
text-transform: uppercase;
color: #fff;
/* 字间距 */
letter-spacing: 5px;
}
input {
background-color: transparent;
width: 70%;
color: #fff;
border: none;
/* 下边框样式 */
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
padding: 10px 0;
text-indent: 10px;
margin: 8px 0;
font-size: 14px;
letter-spacing: 2px;
}
input::placeholder {
color: #fff;
}
input:focus {
color: #a262ad;
outline: none;
border-bottom: 1px solid #a262ad80;
transition: 0.5s;
}
input:focus::placeholder {
opacity: 0;
}
.form-box button {
width: 70%;
margin-top: 35px;
background-color: #f6f6f6;
outline: none;
border-radius: 8px;
padding: 13px;
color: #a262ad;
letter-spacing: 2px;
border: none;
cursor: pointer;
}
.form-box button:hover {
background-color: #a262ad;
color: #f6f6f6;
transition: background-color 0.5s ease;
}
.con-box {
width: 50%;
/* 弹性布局 垂直排列 居中 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* 绝对定位 居中 */
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.con-box.left {
left: -2%;
}
.con-box.right {
right: -2%;
}
.con-box h2 {
color: #8e9aaf;
font-size: 25px;
font-weight: bold;
letter-spacing: 3px;
text-align: center;
margin-bottom: 4px;
}
.con-box p {
font-size: 12px;
letter-spacing: 2px;
color: #8e9aaf;
text-align: center;
}
.con-box span {
color: #d3b7d8;
}
.con-box img {
width: 150px;
height: 150px;
opacity: 0.9;
margin: 40px 0;
}
.con-box button {
margin-top: 3%;
background-color: #fff;
color: #a262ad;
border: 1px solid #d3b7d8;
padding: 6px 10px;
border-radius: 5px;
letter-spacing: 1px;
outline: none;
cursor: pointer;
}
.con-box button:hover {
background-color: #d3b7d8;
color: #fff;
}
</style>
<body>
<div class="container">
<div class="form-box">
<!-- 注册 -->
<form class="register-box hidden">
<h1>register</h1>
<input type="text" name="username" placeholder="用户名" />
<input type="password" name="password" placeholder="密码" />
<button>注册</button>
</form>
<!-- 登录 -->
<!-- <div class="login-box"> -->
<form action="" class="login-box">
<h1>login</h1>
<input type="text" name="username" placeholder="用户名" />
<input type="password" name="password" placeholder="密码" />
<button>登录</button>
</form>
<!-- </div> -->
</div>
<div class="con-box left">
<img src="th.jpg" alt="" />
<p>已有账号</p>
<button id="login">去登录</button>
</div>
<div class="con-box right">
<img src="th.jpg" alt="" />
<p>没有账号？</p>
<button id="register">去注册</button>
</div>
</div>
<script>
// 要操作到的元素
let login = document.getElementById("login");
let register = document.getElementById("register");
let form_box = document.getElementsByClassName("form-box")[0];
let register_box = document.getElementsByClassName("register-box")[0];
let login_box = document.getElementsByClassName("login-box")[0];
// 去注册按钮点击事件
register.addEventListener("click", () => {
form_box.style.transform = "translateX(80%)";
login_box.classList.add("hidden");
register_box.classList.remove("hidden");
});
// 去登录按钮点击事件
login.addEventListener("click", () => {
form_box.style.transform = "translateX(0%)";
register_box.classList.add("hidden");
login_box.classList.remove("hidden");
});
</script>
</body>
</html>
