<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
<style>
body {
height: 100vh;
background: #e8e8e8url("bg.jpg") center no-repeat fixed;
background-size: cover;
backdrop-filter: blur(5px);
display: flex;
justify-content: center;
align-items: center;
padding: 0;
margin: 0;
}
.container {
background-color: #e8e8e8;
border-radius: 0.7rem;
box-shadow: 00.9rem1.7remrgba(0, 0, 0, 0.25),
00.7rem0.7remrgba(0, 0, 0, 0.22);
height: 420px;
max-width: 750px;
overflow: hidden;
position: relative;
width: 100%;
}
.container-form {
height: 100%;
position: absolute;
top: 0;
transition: all 0.6s ease-in-out;
}
.container-signin {
left: 0;
width: 50%;
z-index: 2;
}
.container-signup {
left: 0;
opacity: 0;
width: 50%;
z-index: 1;
}
.form {
background-color: #e8e8e8;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 03rem;
height: 100%;
text-align: center;
}
.form-title {
font-weight: 300;
margin: 0;
margin-bottom: 1.25rem;
}
.link {
color: #333;
font-size: 0.9rem;
margin: 1.5rem0;
text-decoration: none;
}
.input {
width: 100%;
background-color: #fff;
padding: 0.9rem0.9rem;
margin: 0.5rem0;
border: none;
outline: none;
border: 1px solid #f25d8e;
border-radius: 6px;
}
.btn {
background-color: #f25d8e;
border-radius: 5px;
color: #e8e8e8;
border: none;
cursor: pointer;
font-size: 0.8rem;
font-weight: bold;
letter-spacing: 0.1rem;
padding: 0.9rem4rem;
text-transform: uppercase;
transition: transform 80ms ease-in;
}
.form>.btn {
margin-top: 1.5rem;
}
.btn:active {
transform: scale(0.95);
}
.container-overlay {
height: 100%;
left: 50%;
overflow: hidden;
position: absolute;
top: 0;
transition: transform 0.6s ease-in-out;
width: 50%;
z-index: 100;
}
.overlay {
width: 200%;
height: 100%;
position: relative;
left: -100%;
background: url("bg.jpg") no-repeat center fixed;
background-size: cover;
transition: transform 0.6s ease-in-out;
transform: translateX(0);
}
.overlay-panel {
height: 100%;
width: 50%;
position: absolute;
top: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-left {
transform: translateX(-20%);
}
.overlay-right {
right: 0;
transform: translateX(0);
}
.panel-active.overlay-left {
transform: translateX(0);
}
.panel-active.container-overlay {
transform: translateX(-100%);
}
.panel-active.overlay {
transform: translateX(50%);
}
.panel-active.container-signin {
transform: translateX(100%);
}
.panel-active.container-signup {
opacity: 1;
z-index: 5;
transform: translateX(100%);
}
</style>
</head>
<body>
<div class="container">
<div class="container-form container-signup">
<form action="#" class="form" id="form1">
<h2 class="form-title">注册账号</h2>
<input type="text" placeholder="用户名:" class="input" />
<input type="email" placeholder="邮箱:" class="input" />
<input type="password" placeholder="密码:" class="input" />
<button type="button" class="btn">点击注册</button>
</form>
</div>
<div class="container-form container-signin">
<form action="#" class="form" id="form2">
<h2 class="form-title">2024/12/23 欢迎登录</h2>
<input type="email" placeholder="邮箱:" class="input" />
<input type="password" placeholder="密码:" class="input" />
<a href="#" class="link">忘记密码?</a>
<button type="button" class="btn">登录</button>
</form>
</div>
<div class="container-overlay">
<div class="overlay">
<div class="overlay-panel overlay-left">
<button class="btn" id="signIn">
已有账号,点击登录
</button>
</div>
<div class="overlay-panel overlay-right">
<button class="btn" id="signUp">
没有账号,点击注册
</button>
</div>
</div>
</div>
</div>
<script>
const signInBtn = document.getElementById("signIn");
const signUpBtn = document.getElementById("signUp");
const container = document.querySelector(".container");
signInBtn.addEventListener("click", () => {
container.classList.remove("panel-active");
});
signUpBtn.addEventListener("click", () => {
container.classList.add("panel-active");
});
</script>
</body>
</html>
HTML 结构
-
container:主容器,包含注册和登录表单以及覆盖层 -
container-form container-signup:注册表单的容器。 -
form:注册表单,包含用户名、邮箱和密码输入框,以及注册按钮。 -
container-form container-signin:登录表单的容器。 -
form:登录表单,包含邮箱和密码输入框、忘记密码链接,以及登录按钮。 -
container-overlay:用于切换注册和登录状态的覆盖层。 -
overlay:包含两个面板,分别用于显示“已有账号,点击登录”和“没有账号,点击注册”的按钮。
css 样式
-
body:设置背景图、对齐方式和高度。 -
.container:设置容器的背景色、圆角、阴影、尺寸和位置。 -
.container-form:设置表单的高度和位置。 -
.form:设置表单的布局、内边距和文本对齐方式。 -
.input:设置输入框的样式,包括背景色、边框和圆角。 -
.btn:定义按钮的样式,包括背景色、边框、字体和过渡效果。 -
.container-overlay、.overlay、.overlay-panel:用于实现注册和登录表单之间的切换效果。 -
.panel-active:通过添加此类来控制表单的显示和隐藏,使用 CSS 的 transform 属性实现平滑过渡。
JavaScript 部分
-
通过 getElementById 获取登录和注册按钮。 -
为登录按钮添加点击事件,移除 panel-active 类,使注册表单消失并显示登录表单。 -
为注册按钮添加点击事件,添加 panel-active 类,使登录表单消失并显示注册表单。
THE END
暂无评论内容