<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>本模板来自江枫自创，严禁抄袭</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
html, body {
height: 100%;
overflow-x: hidden;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #f0f5ff, #e6f0ff);
padding: 15px;
position: relative;
}
.container {
position: relative;
width: 100%;
max-width: 800px;
min-height: 480px;
perspective: 800px;
}
/* 登录注册卡片 */
.card {
position: relative;
width: 100%;
height: auto;
min-height: 480px;
background: white;
border-radius: 12px;
box-shadow:
0 15px 40px rgba(0, 0, 0, 0.1),
0 0 20px rgba(106, 17, 203, 0.05);
display: flex;
overflow: hidden;
transform: translateZ(20px);
transition: transform 0.4s ease;
}
/* 登录部分 - 固定左侧 */
.login-section {
width: 50%;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
z-index: 2;
position: relative;
}
.login-title {
font-size: 1.8rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 12px;
}
.login-subtitle {
color: #7a859e;
margin-bottom: 30px;
font-size: 0.95rem;
font-weight: 400;
}
/* 输入框组 */
.input-group {
margin-bottom: 20px;
position: relative;
}
.input-icon {
position: absolute;
left: 14px;
top: 14px;
color: #6a11cb;
font-size: 18px;
}
.form-input {
width: 100%;
padding: 14px 15px 14px 45px;
border: 1px solid #e3e8f7;
border-radius: 8px;
font-size: 15px;
transition: all 0.3s ease;
background: #f8f9ff;
}
.form-input:focus {
outline: none;
border-color: #6a11cb;
box-shadow: 0 0 0 2px rgba(106, 17, 203, 0.1);
}
/* 登录按钮 */
.btn {
width: 100%;
padding: 15px;
border: none;
border-radius: 8px;
background: linear-gradient(45deg, #6a11cb, #2575fc);
color: white;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 12px;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(106, 17, 203, 0.2);
}
/* 挡板部分 - 覆盖注册区域 */
.flap-section {
position: absolute;
right: 0;
top: 0;
width: 50%;
height: 100%;
background: linear-gradient(to top, #6a11cb, #2575fc);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 30px;
color: white;
text-align: center;
transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.1);
transform: translateX(0);
z-index: 10;
}
/* 挡板滑动效果 */
.flap-section.slide-left {
transform: translateX(-100%);
}
/* 挡板内容 */
.flap-content {
max-width: 260px;
position: relative;
}
.flap-title {
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 20px;
}
.flap-text {
font-size: 1rem;
line-height: 1.5;
margin-bottom: 30px;
opacity: 0.9;
}
.action-btn {
background: white;
color: #6a11cb;
border: none;
padding: 14px 36px;
border-radius: 40px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.action-btn:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
/* 注册部分 (被挡板覆盖) */
.register-section {
width: 50%;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
background: white;
}
.signin-link {
position: absolute;
top: 25px;
right: 25px;
color: #6a11cb;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
z-index: 11;
opacity: 0;
transition: opacity 0.3s ease;
font-size: 14px;
}
.signin-link.show {
opacity: 1;
}
.signin-link i {
transition: transform 0.3s;
}
.signin-link:hover i {
transform: translateX(-3px);
}
/* 渐变过渡层 */
.transition-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(106,17,203,0.7) 0%, rgba(37,117,252,0.7) 100%);
z-index: 20;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
}
.transition-overlay.active {
opacity: 1;
pointer-events: all;
}
.overlay-text {
color: white;
font-size: 1.8rem;
font-weight: 600;
}
/* 响应式设计 */
@media (max-width: 850px) {
.container {
max-width: 95%;
}
.login-section,
.register-section {
padding: 30px;
}
.login-title, .flap-title {
font-size: 1.6rem;
}
.flap-section {
padding: 25px;
}
}
@media (max-width: 768px) {
body {
display: block;
padding: 10px;
overflow-y: auto;
height: auto;
}
.container {
width: 100%;
max-width: 100%;
min-height: auto;
perspective: none;
margin: 20px auto;
}
.card {
flex-direction: column;
min-height: auto;
height: auto;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
.login-section,
.flap-section,
.register-section {
width: 100%;
min-height: auto;
height: auto;
position: relative;
}
.login-section,
.register-section {
padding: 30px 25px;
}
.flap-section {
height: 220px;
padding: 25px;
position: relative;
}
.signin-link {
top: 15px;
right: 15px;
font-size: 13px;
}
/* 垂直布局下调整挡板位置 */
.flap-section.slide-left {
transform: translateY(-100%);
}
/* 登录和注册部分高度优化 */
.login-section {
min-height: 380px;
}
.register-section {
min-height: 500px;
}
/* 移动端表单大小优化 */
.form-input {
padding: 12px 15px 12px 42px;
font-size: 14px;
}
.btn {
padding: 13px;
font-size: 15px;
}
}
@media (max-width: 480px) {
.login-section, .register-section {
padding: 25px 20px;
}
.login-title, .flap-title {
font-size: 1.5rem;
}
.login-subtitle, .flap-text {
font-size: 0.9rem;
margin-bottom: 25px;
}
.flap-section {
height: 200px;
padding: 20px;
}
.action-btn {
padding: 12px 30px;
font-size: 15px;
}
.input-icon {
left: 12px;
top: 12px;
font-size: 16px;
}
.login-section {
min-height: 350px;
}
.register-section {
min-height: 460px;
}
}
/* 背景圆点 */
.bg-dot {
position: fixed;
border-radius: 50%;
z-index: -1;
background: rgba(106, 17, 203, 0.05);
}
.dot-1 {
width: 280px;
height: 280px;
top: 10%;
left: 5%;
animation: float 12s ease-in-out infinite;
}
.dot-2 {
width: 220px;
height: 220px;
bottom: 10%;
right: 5%;
animation: float 15s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(-15px, -20px); }
}
/* 滚动提示 */
.scroll-hint {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(106, 17, 203, 0.15);
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
color: white;
opacity: 0.9;
display: none;
z-index: 100;
animation: bounce 2s infinite;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-8px);}
60% {transform: translateY(-4px);}
}
@media (max-width: 768px) {
.scroll-hint {
display: block;
}
}
/* 返回顶部按钮 */
.back-to-top {
position: fixed;
bottom: 60px;
right: 20px;
background: rgba(106, 17, 203, 0.15);
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s;
cursor: pointer;
z-index: 99;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.back-to-top.show {
opacity: 0.9;
}
</style>
</head>
<body>
<!-- 背景圆点 -->
<div class="bg-dot dot-1"></div>
<div class="bg-dot dot-2"></div>
<!-- 滚动提示 -->
<div class="scroll-hint">
<i class="fas fa-arrow-down"></i> 向下滚动查看全部内容
</div>
<!-- 返回顶部按钮 -->
<div class="back-to-top" id="backToTop">
<i class="fas fa-arrow-up"></i>
</div>
<div class="container">
<!-- 渐变过渡层 -->
<div class="transition-overlay">
<div class="overlay-text">去登录</div>
</div>
<!-- 主卡片 -->
<div class="card">
<!-- 登录部分 (左侧) -->
<div class="login-section">
<h1 class="login-title">欢迎登录</h1>
<p class="login-subtitle">请使用您的账号继续</p>
<form id="loginForm">
<div class="input-group">
<i class="input-icon fas fa-user"></i>
<input type="text" class="form-input" placeholder="用户名或邮箱" required>
</div>
<div class="input-group">
<i class="input-icon fas fa-lock"></i>
<input type="password" class="form-input" placeholder="密码" required>
</div>
<button type="submit" class="btn">登录账号</button>
</form>
<p style="text-align: center; margin-top: 20px; color: #7a859e; font-size: 14px;">
没有账号? <a href="#" style="color: #6a11cb; font-weight: 500;" id="registerHint">立即注册</a>
</p>
</div>
<!-- 注册部分 (右侧) -->
<div class="register-section">
<!-- 返回登录链接 -->
<a href="#" class="signin-link" id="goToLogin">
<i class="fas fa-arrow-left"></i> 返回登录
</a>
<h1 class="login-title">创建账号</h1>
<p class="login-subtitle">注册获得完整功能</p>
<form id="signupForm">
<div class="input-group">
<i class="input-icon fas fa-user"></i>
<input type="text" class="form-input" placeholder="用户名" required>
</div>
<div class="input-group">
<i class="input-icon fas fa-envelope"></i>
<input type="email" class="form-input" placeholder="邮箱地址" required>
</div>
<div class="input-group">
<i class="input-icon fas fa-lock"></i>
<input type="password" class="form-input" placeholder="密码" required>
</div>
<div class="input-group">
<i class="input-icon fas fa-lock"></i>
<input type="password" class="form-input" placeholder="确认密码" required>
</div>
<button type="submit" class="btn">创建账号</button>
</form>
<p style="text-align: center; margin-top: 20px; color: #7a859e; font-size: 14px;">
已有账号? <a href="#" style="color: #6a11cb; font-weight: 500;" id="loginHint">立即登录</a>
</p>
</div>
<!-- 挡板部分 (默认覆盖注册区域) -->
<div class="flap-section" id="flapSection">
<div class="flap-content">
<h2 class="flap-title" id="flapTitle">欢迎登录</h2>
<p class="flap-text" id="flapText">输入您的个人信息开始使用平台</p>
<button class="action-btn" id="actionBtn">去注册</button>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 获取元素
const flapSection = document.getElementById('flapSection');
const actionBtn = document.getElementById('actionBtn');
const goToLogin = document.getElementById('goToLogin');
const flapTitle = document.getElementById('flapTitle');
const flapText = document.getElementById('flapText');
const transitionOverlay = document.querySelector('.transition-overlay');
const overlayText = document.querySelector('.overlay-text');
const backToTopBtn = document.getElementById('backToTop');
const registerHint = document.getElementById('registerHint');
const loginHint = document.getElementById('loginHint');
let isRegisterMode = false;
// 显示注册表单事件
function showRegisterForm() {
if(isRegisterMode) return;
// 激活过渡层并设置为"去登录"
transitionOverlay.classList.add('active');
overlayText.textContent = "去登录";
// 开始滑动动画
setTimeout(() => {
// 根据屏幕尺寸应用不同的滑动动画
if(window.innerWidth > 768) {
flapSection.classList.add('slide-left');
} else {
flapSection.style.transform = 'translateY(-100%)';
}
// 更新挡板文字
setTimeout(() => {
flapTitle.textContent = "去登录";
flapText.textContent = "返回登录界面继续操作";
actionBtn.textContent = "去登录";
// 显示返回登录链接
goToLogin.classList.add('show');
isRegisterMode = true;
// 隐藏过渡层
setTimeout(() => {
transitionOverlay.classList.remove('active');
}, 300);
// 在移动端滚动到表单区域
if(window.innerWidth <= 768) {
setTimeout(() => {
document.querySelector('.register-section').scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}, 500);
}
}, 300);
}, 50);
}
// 返回登录事件
function backToLogin() {
if(!isRegisterMode) return;
// 激活过渡层并设置为"去注册"
transitionOverlay.classList.add('active');
overlayText.textContent = "去注册";
// 开始滑动动画
setTimeout(() => {
// 根据屏幕尺寸应用不同的滑动动画
if(window.innerWidth > 768) {
flapSection.classList.remove('slide-left');
} else {
flapSection.style.transform = 'translateY(0)';
}
// 更新挡板文字
setTimeout(() => {
flapTitle.textContent = "欢迎登录";
flapText.textContent = "输入您的个人信息开始使用平台";
actionBtn.textContent = "去注册";
// 隐藏返回登录链接
goToLogin.classList.remove('show');
isRegisterMode = false;
// 隐藏过渡层
setTimeout(() => {
transitionOverlay.classList.remove('active');
}, 300);
// 在移动端滚动到顶部
if(window.innerWidth <= 768) {
setTimeout(() => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}, 500);
}
}, 300);
}, 50);
}
// 添加事件监听
actionBtn.addEventListener('click', function(e) {
e.preventDefault();
if(isRegisterMode) {
backToLogin();
} else {
showRegisterForm();
}
});
goToLogin.addEventListener('click', function(e) {
e.preventDefault();
backToLogin();
});
registerHint.addEventListener('click', function(e) {
e.preventDefault();
showRegisterForm();
});
loginHint.addEventListener('click', function(e) {
e.preventDefault();
backToLogin();
});
// 表单提交事件处理
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
alert('登录成功！');
});
document.getElementById('signupForm').addEventListener('submit', function(e) {
e.preventDefault();
alert('账号创建成功！');
});
// 返回顶部按钮逻辑
backToTopBtn.addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// 滚动时显示/隐藏返回顶部按钮
window.addEventListener('scroll', function() {
if(window.scrollY > 300) {
backToTopBtn.classList.add('show');
} else {
backToTopBtn.classList.remove('show');
}
});
// 移动端输入框聚焦时自动滚动到可视区域
const inputs = document.querySelectorAll('.form-input');
inputs.forEach(input => {
input.addEventListener('focus', function() {
if(window.innerWidth <= 768) {
this.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
});
});
// 优化移动端加载后的滚动位置
setTimeout(() => {
if(window.innerWidth <= 768) {
window.scrollTo(0, 0);
}
}, 100);
});
</script>
</body>
</html>
index.html