用户登录与注册_csdn 账号登录-优快云博客

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户登录与注册</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}

body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}

.container {
width: 100%;
max-width: 800px;
background-color: white;
border-radius: 10px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
overflow: hidden;
display: flex;
}

.form-container {
flex: 1;
padding: 40px;
transition: all 0.6s ease-in-out;
}

.sign-in-container {
background-color: white;
}

.sign-up-container {
background-color: #f8f9fa;
}

h1 {
margin-bottom: 30px;
color: #333;
font-weight: 600;
}

.form-group {
margin-bottom: 20px;
position: relative;
}

input {
width: 100%;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
transition: all 0.3s;
}

input:focus {
border-color: #667eea;
outline: none;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

label {
display: block;
margin-bottom: 8px;
color: #555;
font-size: 14px;
}

button {
background: linear-gradient(to right, #667eea, #764ba2);
color: white;
border: none;
padding: 12px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
width: 100%;
transition: all 0.3s;
}

button:hover {
opacity: 0.9;
transform: translateY(-2px);
}

.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}

.overlay {
background: linear-gradient(to right, #667eea, #764ba2);
color: white;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}

.overlay-panel {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 40px;
height: 100%;
width: 50%;
text-align: center;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}

.overlay-left {
transform: translateX(-20%);
}

.overlay-right {
right: 0;
transform: translateX(0);
}

.ghost {
background-color: transparent;
border: 1px solid white;
margin-top: 20px;
}

.ghost:hover {
background-color: white;
color: #667eea;
}

.footer {
margin-top: 20px;
text-align: center;
font-size: 14px;
color: #666;
}

.footer a {
color: #667eea;
text-decoration: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
.container {
flex-direction: column;
}

.overlay-container {
display: none;
}

.form-container {
padding: 30px;
}
}
</style>
</head>
<body>
<div class="container" id="container">
<div class="form-container sign-up-container">
<form action="#">
<h1>创建账号</h1>
<div class="form-group">
<label for="name">用户名</label>
<input type="text" id="name" placeholder="请输入用户名" required />
</div>
<div class="form-group">
<label for="email">邮箱</label>
<input type="email" id="email" placeholder="请输入邮箱" required />
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" placeholder="请输入密码" required />
</div>
<button type="submit">注册</button>
<div class="footer">
已有账号？<a href="#" id="signIn">立即登录</a>
</div>
</form>
</div>
<div class="form-container sign-in-container">
<form action="#">
<h1>用户登录</h1>
<div class="form-group">
<label for="login-email">邮箱</label>
<input type="email" id="login-email" placeholder="请输入邮箱" required />
</div>
<div class="form-group">
<label for="login-password">密码</label>
<input type="password" id="login-password" placeholder="请输入密码" required />
</div>
<button type="submit">登录</button>
<div class="footer">
没有账号？<a href="#" id="signUp">立即注册</a>
</div>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>欢迎回来！</h1>
<p>请使用您的个人账号登录</p>
<button class="ghost" id="signInOverlay">登录</button>

</div>
<div class="overlay-panel overlay-right">
<h1>您好，朋友！</h1>
<p>立即注册，开始您的旅程</p>
<button class="ghost" id="signUpOverlay">注册</button>
</div>
</div>
</div>
</div>