这段代码综合运用了 HTML、CSS 和 JavaScript 技术，创建了一个具有现代感和交互性的登录注册页面。使用了渐变背景、粒子动画、毛玻璃效果等现代设计元素，以及响应式布局和动态交互逻辑，提升了用户体验和视觉吸引力。
演示效果
HTML&CSS
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nexus Admin | 科技感后台管理系统</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;
}
body {
background: linear-gradient(135deg, #0f172a, #1e293b);
color: #e2e8f0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
padding: 20px;
}
/* 粒子背景效果 */
.particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.particle {
position: absolute;
border-radius: 50%;
background: rgba(99, 102, 241, 0.5);
box-shadow: 0010pxrgba(99, 102, 241, 0.8);
animation: float 15s infinite linear;
}
/* 主容器 */
.container {
position: relative;
z-index: 10;
width: 90%;
max-width: 450px;
min-height: 90vh;
display: flex;
flex-direction: column;
justify-content: center;
}
/* 卡片样式 */
.card {
background: rgba(15, 23, 42, 0.7);
backdrop-filter: blur(10px);
border-radius: 20px;
border: 1px solid rgba(99, 102, 241, 0.3);
box-shadow:
010px30pxrgba(0, 0, 0, 0.3),
0020pxrgba(99, 102, 241, 0.1);
padding: 2.5rem;
position: relative;
overflow: hidden;
transition: all 0.4s ease;
display: flex;
flex-direction: column;
}
/* 顶部装饰线 */
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #8b5cf6, #6366f1, #0ea5e9);
box-shadow: 0010pxrgba(139, 92, 246, 0.7);
}
.logo {
text-align: center;
margin-bottom: 2rem;
}
.logoh1 {
font-size: 2.2rem;
background: linear-gradient(90deg, #8b5cf6, #6366f1, #0ea5e9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 800;
letter-spacing: 1px;
margin-bottom: 0.5rem;
}
.logop {
color: #94a3b8;
font-size: 0.9rem;
letter-spacing: 0.5px;
}
/* 表单切换 */
.tabs {
display: flex;
margin-bottom: 1.5rem;
border-bottom: 1px solid rgba(99, 102, 241, 0.2);
}
.tab {
flex: 1;
text-align: center;
padding: 1rem0;
cursor: pointer;
position: relative;
font-weight: 600;
color: #94a3b8;
transition: all 0.3s ease;
}
.tab.active {
color: #e2e8f0;
}
.tab.active::after {
content: '';
position: absolute;
bottom: -1px;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 3px;
background: linear-gradient(90deg, #8b5cf6, #6366f1);
border-radius: 3px;
}
/* 表单样式 */
.form-container {
position: relative;
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.form {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transform: translateX(30px);
pointer-events: none;
transition: all 0.5s ease;
display: flex;
flex-direction: column;
}
.form.active {
opacity: 1;
transform: translateX(0);
pointer-events: all;
position: relative;
}
.form-content {
flex: 1;
display: flex;
flex-direction: column;
}
.input-group {
margin-bottom: 1.5rem;
position: relative;
}
.input-grouplabel {
display: block;
margin-bottom: 0.5rem;
font-size: 0.9rem;
color: #cbd5e1;
}
.input-icon {
position: absolute;
left: 15px;
top: 42px;
color: #6366f1;
}
.input-groupinput {
width: 100%;
padding: 14px14px14px45px;
background: rgba(30, 41, 59, 0.7);
border: 1px solid rgba(99, 102, 241, 0.3);
border-radius: 10px;
color: #e2e8f0;
font-size: 1rem;
transition: all 0.3s ease;
}
.input-groupinput:focus {
outline: none;
border-color: #6366f1;
box-shadow: 0003pxrgba(99, 102, 241, 0.2);
}
.input-groupinput:hover {
border-color: #818cf8;
}
.options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
font-size: 0.9rem;
}
.remember {
display: flex;
align-items: center;
}
.rememberinput {
margin-right: 8px;
accent-color: #6366f1;
}
.forgot-password {
color: #818cf8;
text-decoration: none;
transition: all 0.3s ease;
}
.forgot-password:hover {
color: #6366f1;
text-decoration: underline;
}
.btn {
width: 100%;
padding: 14px;
background: linear-gradient(90deg, #8b5cf6, #6366f1);
border: none;
border-radius: 10px;
color: white;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
letter-spacing: 0.5px;
box-shadow: 04px15pxrgba(99, 102, 241, 0.3);
margin-top: auto;
}
.btn:hover {
background: linear-gradient(90deg, #7c3aed, #4f46e5);
transform: translateY(-2px);
box-shadow: 06px20pxrgba(99, 102, 241, 0.4);
}
.btn:active {
transform: translateY(0);
}
.divider {
text-align: center;
margin: 1.5rem0;
position: relative;
color: #94a3b8;
font-size: 0.9rem;
}
.divider::before,
.divider::after {
content: '';
position: absolute;
top: 50%;
width: 40%;
height: 1px;
background: rgba(99, 102, 241, 0.2);
}
.divider::before {
left: 0;
}
.divider::after {
right: 0;
}
.social-login {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.social-btn {
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background: rgba(30, 41, 59, 0.7);
border: 1px solid rgba(99, 102, 241, 0.3);
color: #94a3b8;
cursor: pointer;
transition: all 0.3s ease;
}
.social-btn:hover {
background: rgba(99, 102, 241, 0.1);
color: #e2e8f0;
transform: translateY(-3px);
border-color: #6366f1;
}
.signup-link {
text-align: center;
margin-top: 1.5rem;
font-size: 0.9rem;
color: #94a3b8;
}
.signup-linka {
color: #818cf8;
text-decoration: none;
margin-left: 5px;
font-weight: 600;
transition: all 0.3s ease;
}
.signup-linka:hover {
color: #6366f1;
text-decoration: underline;
}
/* 响应式设计 */
@media (max-width:480px) {
.container {
padding: 0;
width: 95%;
min-height: 95vh;
}
.card {
padding: 1.5rem;
}
.logoh1 {
font-size: 1.8rem;
}
.options {
flex-direction: column;
align-items: flex-start;
gap: 0.8rem;
}
.forgot-password {
margin-left: auto;
}
.social-login {
gap: 0.8rem;
}
}
/* 动画效果 */
@keyframes float {
0% {
transform: translateY(0) translateX(0) rotate(0deg);
opacity: 0.2;
}
100% {
transform: translateY(-100vh) translateX(100px) rotate(360deg);
opacity: 0;
}
}
@keyframes pulse {
0% {
box-shadow: 0000rgba(99, 102, 241, 0.4);
}
70% {
box-shadow: 00010pxrgba(99, 102, 241, 0);
}
100% {
box-shadow: 0000rgba(99, 102, 241, 0);
}
}
.pulse {
animation: pulse 2s infinite;
}
.footer {
text-align: center;
margin-top: 1.5rem;
font-size: 0.8rem;
color: #64748b;
}
</style>
</head>
<body>
<!-- 粒子背景 -->
<div class="particles" id="particles"></div>
<div class="container">
<div class="card">
<div class="logo">
<h1>NEXUS ADMIN</h1>
<p>下一代智能后台管理系统</p>
</div>
<div class="tabs">
<div class="tab active" data-tab="login">登录</div>
<div class="tab" data-tab="register">注册</div>
</div>
<div class="form-container">
<!-- 登录表单 -->
<form class="form active" id="login-form">
<div class="form-content">
<div class="input-group">
<label for="login-email">邮箱</label>
<i class="fas fa-envelope input-icon"></i>
<input type="email" id="login-email" placeholder="your@email.com" required>
</div>
<div class="input-group">
<label for="login-password">密码</label>
<i class="fas fa-lock input-icon"></i>
<input type="password" id="login-password" placeholder="输入密码" required>
</div>
<div class="options">
<div class="remember">
<input type="checkbox" id="remember">
<label for="remember">记住我</label>
</div>
<a href="#" class="forgot-password">忘记密码?</a>
</div>
<div class="divider">或使用以下方式登录</div>
<div class="social-login">
<div class="social-btn">
<i class="fab fa-google"></i>
</div>
<div class="social-btn">
<i class="fab fa-github"></i>
</div>
<div class="social-btn">
<i class="fab fa-microsoft"></i>
</div>
<div class="social-btn">
<i class="fab fa-apple"></i>
</div>
</div>
<button type="submit" class="btn pulse">登录系统</button>
<div class="signup-link">
还没有账号? <a href="#" id="show-register">立即注册</a>
</div>
</div>
</form>
<!-- 注册表单 -->
<form class="form" id="register-form">
<div class="form-content">
<div class="input-group">
<label for="register-name">姓名</label>
<i class="fas fa-user input-icon"></i>
<input type="text" id="register-name" placeholder="您的姓名" required>
</div>
<div class="input-group">
<label for="register-email">邮箱</label>
<i class="fas fa-envelope input-icon"></i>
<input type="email" id="register-email" placeholder="your@email.com" required>
</div>
<div class="input-group">
<label for="register-password">密码</label>
<i class="fas fa-lock input-icon"></i>
<input type="password" id="register-password" placeholder="设置密码" required>
</div>
<div class="input-group">
<label for="register-confirm">确认密码</label>
<i class="fas fa-lock input-icon"></i>
<input type="password" id="register-confirm" placeholder="确认密码" required>
</div>
<div class="options">
<div class="remember">
<input type="checkbox" id="terms">
<label for="terms">我同意服务条款</label>
</div>
</div>
<button type="submit" class="btn">创建账号</button>
<div class="signup-link">
已有账号? <a href="#" id="show-login">立即登录</a>
</div>
</div>
</form>
</div>
</div>
<div class="footer">
<p>© 2023 Nexus Admin System. 保留所有权利</p>
</div>
</div>
<script>
// 创建粒子背景
function createParticles() {
const particlesContainer = document.getElementById('particles');
const particleCount = 30;
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.classList.add('particle');
// 随机大小
const size = Math.random() * 5 + 1;
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
// 随机位置
particle.style.left = `${Math.random() * 100}%`;
particle.style.top = `${Math.random() * 100}%`;
// 随机动画延迟
particle.style.animationDelay = `${Math.random() * 15}s`;
particlesContainer.appendChild(particle);
}
}
// 表单切换功能
function setupFormTabs() {
const tabs = document.querySelectorAll('.tab');
const forms = document.querySelectorAll('.form');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
// 更新标签状态
tabs.forEach(t => t.classList.remove('active'));
tab.classList.add('active');
// 显示对应的表单
const targetForm = tab.getAttribute('data-tab');
forms.forEach(form => {
form.classList.remove('active');
if (form.id === `${targetForm}-form`) {
form.classList.add('active');
}
});
});
});
// 注册和登录链接切换
document.getElementById('show-register').addEventListener('click', (e) => {
e.preventDefault();
tabs[1].click();
});
document.getElementById('show-login').addEventListener('click', (e) => {
e.preventDefault();
tabs[0].click();
});
}
// 表单提交处理
function setupFormSubmit() {
document.getElementById('login-form').addEventListener('submit', (e) => {
e.preventDefault();
const email = document.getElementById('login-email').value;
const password = document.getElementById('login-password').value;
// 这里添加实际的登录逻辑
console.log('登录尝试:', email, password);
alert('登录功能演示 - 实际应用中这里会发送请求到服务器');
});
document.getElementById('register-form').addEventListener('submit', (e) => {
e.preventDefault();
const name = document.getElementById('register-name').value;
const email = document.getElementById('register-email').value;
const password = document.getElementById('register-password').value;
const confirm = document.getElementById('register-confirm').value;
if (password !== confirm) {
alert('两次输入的密码不一致');
return;
}
// 这里添加实际的注册逻辑
console.log('注册信息:', name, email, password);
alert('注册功能演示 - 实际应用中这里会发送请求到服务器');
});
}
// 初始化
document.addEventListener('DOMContentLoaded', () => {
createParticles();
setupFormTabs();
setupFormSubmit();
// 添加社交按钮悬停效果
const socialButtons = document.querySelectorAll('.social-btn');
socialButtons.forEach(button => {
button.addEventListener('mouseenter', () => {
const icon = button.querySelector('i');
if (icon.classList.contains('fa-google')) {
button.style.background = 'rgba(219, 68, 55, 0.1)';
button.style.borderColor = '#db4437';
} elseif (icon.classList.contains('fa-github')) {
button.style.background = 'rgba(0, 0, 0, 0.1)';
button.style.borderColor = '#000';
} elseif (icon.classList.contains('fa-microsoft')) {
button.style.background = 'rgba(0, 120, 212, 0.1)';
button.style.borderColor = '#0078d4';
} elseif (icon.classList.contains('fa-apple')) {
button.style.background = 'rgba(128, 128, 128, 0.1)';
button.style.borderColor = '#808080';
}
});
button.addEventListener('mouseleave', () => {
button.style.background = 'rgba(30, 41, 59, 0.7)';
button.style.borderColor = 'rgba(99, 102, 241, 0.3)';
});
button.addEventListener('click', () => {
const icon = button.querySelector('i');
let provider = '';
if (icon.classList.contains('fa-google')) provider = 'Google';
elseif (icon.classList.contains('fa-github')) provider = 'GitHub';
elseif (icon.classList.contains('fa-microsoft')) provider = 'Microsoft';
elseif (icon.classList.contains('fa-apple')) provider = 'Apple';
alert(`使用 ${provider} 登录功能演示`);
});
});
});
</script>
</body>
</html>
HTML
particles particles：创建一个用于显示粒子背景效果的容器。 container：定义一个容器，用于包裹整个登录/注册界面。 card：定义一个卡片元素，用于显示登录/注册表单。 tabs：定义标签页的容器，包含登录和注册两个标签。 form active login-form：定义登录表单，初始状态下处于活动状态。 form register-form：定义注册表单。 email：定义一个用于输入邮箱的文本框。 label：定义表单元素的标签，用于提示用户输入内容。 button：定义提交按钮，用户点击后可提交表单。 social-btn：定义社交登录按钮的容器。
CSS
body：设置页面背景颜色、最小高度、字体系列和过渡效果，为页面提供基本的视觉样式。 body::before：创建一个半透明的覆盖层，增强页面背景的视觉效果。 .card：定义卡片的大小、布局、背景颜色、边框半径、边框样式、阴影效果、内边距以及相对定位，使其在页面中居中显示。 .content：定义内容区域的布局，包括子元素的排列方式、对齐方式和内边距。 #title：设置标题的字体系列、颜色、大小和文本阴影，使其在页面中突出显示。 .image：定义图片区域的样式，包括宽度、高度、边框半径以及溢出内容的处理方式。 #slide：设置图片的样式，确保图片覆盖整个区域，并定义其位置和大小。 .dots：定义指示点的布局，包括子元素的排列方式、对齐方式和间隙。 .dot：定义单个指示点的样式，包括宽度、高度、背景颜色、边框半径和边距。 .active：定义活动指示点的样式，通过改变背景颜色来突出显示活动状态。 @keyframes slidein：定义图片滑入的动画效果，设置动画的持续时间、属性变化等。
JavaScript
document.addEventListener('DOMContentLoaded', function() { ... });：当 DOM 内容加载完成后，执行指定的初始化函数。 createParticles()：调用此函数创建粒子背景，指定粒子的数量、大小、位置和动画效果。 setupFormTabs()：设置标签页的切换逻辑，通过监听点击事件来切换登录和注册表单的显示状态。 setupFormSubmit()：处理表单提交事件，验证用户输入并提供相应的反馈。 particles.forEach(particle => { ... });：为每个粒子添加动画效果，使其在页面上随机移动。 setupFormTabs()中的事件监听：监听标签页的点击事件，实现登录和注册表单之间的切换。 setupFormSubmit()中的表单验证：验证注册表单中的密码是否一致，并提供相应的错误提示。
各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！
优网科技，优秀企业首选的互联网供应服务商
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
