HTML+CSS+JS高颜值登录注册页面实现代码(建议收藏)
作者：前端Hardy
这篇文章主要介绍了HTML+CSS+JS高颜值登录注册页面实现的相关资料,文中采用渐变背景、粒子动画、毛玻璃效果等设计,实现响应式布局与动态交互,通过示例代码介绍的非常详细,需要的朋友可以参考下
前言
这段代码综合运用了 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" rel="external nofollow" >
<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: 0 0 10px rgba(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:
0 10px 30px rgba(0, 0, 0, 0.3),
0 0 20px rgba(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: 0 0 10px rgba(139, 92, 246, 0.7);
}
.logo {
text-align: center;
margin-bottom: 2rem;
}
.logo h1 {
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;
}
.logo p {
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: 1rem 0;
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-group label {
display: block;
margin-bottom: 0.5rem;
font-size: 0.9rem;
color: #cbd5e1;
}
.input-icon {
position: absolute;
left: 15px;
top: 42px;
color: #6366f1;
}
.input-group input {
width: 100%;
padding: 14px 14px 14px 45px;
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-group input:focus {
outline: none;
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}
.input-group input: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;
}
.remember input {
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: 0 4px 15px rgba(99, 102, 241, 0.3);
margin-top: auto;
}
.btn:hover {
background: linear-gradient(90deg, #7c3aed, #4f46e5);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}
.btn:active {
transform: translateY(0);
}
.divider {
text-align: center;
margin: 1.5rem 0;
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-link a {
color: #818cf8;
text-decoration: none;
margin-left: 5px;
font-weight: 600;
transition: all 0.3s ease;
}
.signup-link a:hover {
color: #6366f1;
text-decoration: underline;
}
/* 响应式设计 */
@media (max-width: 480px) {
.container {
padding: 0;
width: 95%;
min-height: 95vh;
}
.card {
padding: 1.5rem;
}
.logo h1 {
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: 0 0 0 0 rgba(99, 102, 241, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(99, 102, 241, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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';
} else if (icon.classList.contains('fa-github')) {
button.style.background = 'rgba(0, 0, 0, 0.1)';
button.style.borderColor = '#000';
} else if (icon.classList.contains('fa-microsoft')) {
button.style.background = 'rgba(0, 120, 212, 0.1)';
button.style.borderColor = '#0078d4';
} else if (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';
else if (icon.classList.contains('fa-github')) provider = 'GitHub';
else if (icon.classList.contains('fa-microsoft')) provider = 'Microsoft';
else if (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()中的表单验证：验证注册表单中的密码是否一致，并提供相应的错误提示。
总结
到此这篇关于HTML+CSS+JS高颜值登录注册页面实现的文章就介绍到这了,更多相关JS登录注册页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！