HTML+CSS+JS高顏值登錄注冊頁面實(shí)現(xiàn)代碼(建議收藏)
更新時(shí)間：2025年08月18日 10:57:58 作者：前端Hardy
這篇文章主要介紹了HTML+CSS+JS高顏值登錄注冊頁面實(shí)現(xiàn)的相關(guān)資料,文中采用漸變背景、粒子動畫、毛玻璃效果等設(shè)計(jì),實(shí)現(xiàn)響應(yīng)式布局與動態(tài)交互,通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
前言
這段代碼綜合運(yùn)用了 HTML、CSS 和 JavaScript 技術(shù)，創(chuàng)建了一個(gè)具有現(xiàn)代感和交互性的登錄注冊頁面。使用了漸變背景、粒子動畫、毛玻璃效果等現(xiàn)代設(shè)計(jì)元素，以及響應(yīng)式布局和動態(tài)交互邏輯，提升了用戶體驗(yàn)和視覺吸引力。
大家復(fù)制代碼時(shí)，可能會因格式轉(zhuǎn)換出現(xiàn)錯(cuò)亂，導(dǎo)致樣式失效。建議先少量復(fù)制代碼進(jìn)行測試，若未能解決問題，私信回復(fù)源碼兩字，我會發(fā)送完整的壓縮包給你。
演示效果
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 | 科技感后臺管理系統(tǒng)</title>
<link rel="stylesheet" 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;
}
/* 響應(yīng)式設(shè)計(jì) */
@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>下一代智能后臺管理系統(tǒng)</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">登錄系統(tǒng)</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="設(shè)置密碼" required>
</div>
<div class="input-group">
<label for="register-confirm">確認(rèn)密碼</label>
<i class="fas fa-lock input-icon"></i>
<input type="password" id="register-confirm" placeholder="確認(rèn)密碼" required>
</div>
<div class="options">
<div class="remember">
<input type="checkbox" id="terms">
<label for="terms">我同意服務(wù)條款</label>
</div>
</div>
<button type="submit" class="btn">創(chuàng)建賬號</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. 保留所有權(quán)利</p>
</div>
</div>
<script>
// 創(chuàng)建粒子背景
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');
// 隨機(jī)大小
const size = Math.random() * 5 + 1;
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
// 隨機(jī)位置
particle.style.left = `${Math.random() * 100}%`;
particle.style.top = `${Math.random() * 100}%`;
// 隨機(jī)動畫延遲
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', () => {
// 更新標(biāo)簽狀態(tài)
tabs.forEach(t => t.classList.remove('active'));
tab.classList.add('active');
// 顯示對應(yīng)的表單
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;
// 這里添加實(shí)際的登錄邏輯
console.log('登錄嘗試:', email, password);
alert('登錄功能演示 - 實(shí)際應(yīng)用中這里會發(fā)送請求到服務(wù)器');
});
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;
}
// 這里添加實(shí)際的注冊邏輯
console.log('注冊信息:', name, email, password);
alert('注冊功能演示 - 實(shí)際應(yīng)用中這里會發(fā)送請求到服務(wù)器');
});
}
// 初始化
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：創(chuàng)建一個(gè)用于顯示粒子背景效果的容器。
- container：定義一個(gè)容器，用于包裹整個(gè)登錄/注冊界面。
- card：定義一個(gè)卡片元素，用于顯示登錄/注冊表單。
- tabs：定義標(biāo)簽頁的容器，包含登錄和注冊兩個(gè)標(biāo)簽。
- form active login-form：定義登錄表單，初始狀態(tài)下處于活動狀態(tài)。
- form register-form：定義注冊表單。
- email：定義一個(gè)用于輸入郵箱的文本框。
- label：定義表單元素的標(biāo)簽，用于提示用戶輸入內(nèi)容。
- button：定義提交按鈕，用戶點(diǎn)擊后可提交表單。
- social-btn：定義社交登錄按鈕的容器。
CSS
- body：設(shè)置頁面背景顏色、最小高度、字體系列和過渡效果，為頁面提供基本的視覺樣式。
- body::before：創(chuàng)建一個(gè)半透明的覆蓋層，增強(qiáng)頁面背景的視覺效果。
- .card：定義卡片的大小、布局、背景顏色、邊框半徑、邊框樣式、陰影效果、內(nèi)邊距以及相對定位，使其在頁面中居中顯示。
- .content：定義內(nèi)容區(qū)域的布局，包括子元素的排列方式、對齊方式和內(nèi)邊距。
- #title：設(shè)置標(biāo)題的字體系列、顏色、大小和文本陰影，使其在頁面中突出顯示。
- .image：定義圖片區(qū)域的樣式，包括寬度、高度、邊框半徑以及溢出內(nèi)容的處理方式。
- #slide：設(shè)置圖片的樣式，確保圖片覆蓋整個(gè)區(qū)域，并定義其位置和大小。
- .dots：定義指示點(diǎn)的布局，包括子元素的排列方式、對齊方式和間隙。
- .dot：定義單個(gè)指示點(diǎn)的樣式，包括寬度、高度、背景顏色、邊框半徑和邊距。
- .active：定義活動指示點(diǎn)的樣式，通過改變背景顏色來突出顯示活動狀態(tài)。
- @keyframes slidein：定義圖片滑入的動畫效果，設(shè)置動畫的持續(xù)時(shí)間、屬性變化等。
JavaScript
- document.addEventListener(‘DOMContentLoaded’, function() { … });：當(dāng) DOM 內(nèi)容加載完成后，執(zhí)行指定的初始化函數(shù)。
- createParticles()：調(diào)用此函數(shù)創(chuàng)建粒子背景，指定粒子的數(shù)量、大小、位置和動畫效果。
- setupFormTabs()：設(shè)置標(biāo)簽頁的切換邏輯，通過監(jiān)聽點(diǎn)擊事件來切換登錄和注冊表單的顯示狀態(tài)。
- setupFormSubmit()：處理表單提交事件，驗(yàn)證用戶輸入并提供相應(yīng)的反饋。
- particles.forEach(particle => { … });：為每個(gè)粒子添加動畫效果，使其在頁面上隨機(jī)移動。
- setupFormTabs()中的事件監(jiān)聽：監(jiān)聽標(biāo)簽頁的點(diǎn)擊事件，實(shí)現(xiàn)登錄和注冊表單之間的切換。
- setupFormSubmit()中的表單驗(yàn)證：驗(yàn)證注冊表單中的密碼是否一致，并提供相應(yīng)的錯(cuò)誤提示。
總結(jié)
到此這篇關(guān)于HTML+CSS+JS高顏值登錄注冊頁面實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)JS登錄注冊頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js實(shí)現(xiàn)輪播圖的兩種方式(構(gòu)造函數(shù)、面向?qū)ο?
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)輪播圖的兩種方式，一是構(gòu)造函數(shù)、另一種是面向?qū)ο蠓绞椒绞剑哂幸欢ǖ膮⒖純r(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
js 輸出內(nèi)容到新窗口具體實(shí)現(xiàn)代碼
js 輸出內(nèi)容一般都是在本窗口，如果要實(shí)現(xiàn)在新窗口的話該如何實(shí)現(xiàn)呢？下面與大家分享具體的代碼2013-05-05
截取小數(shù)點(diǎn)后幾位的方法有很多，下面為大家介紹下使用js是如何實(shí)現(xiàn)的2013-11-11
這篇文章主要為大家詳細(xì)介紹了如何通過微信小程序開發(fā)一個(gè)簡單的二維碼生成器，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以和小編一起學(xué)習(xí)一下2023-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)手寫簽名，簽字版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
云函數(shù)是部署在云端的函數(shù)，他和小程序本地的函數(shù)存在很大的區(qū)別。本文將通過示例詳細(xì)為大家介紹如何在小程序開發(fā)中使用云函數(shù)，需要的可以參考一下2022-03-03
Gulp實(shí)現(xiàn)靜態(tài)網(wǎng)頁模塊化的方法詳解
眾所周知Gulp.js 是一個(gè)自動化構(gòu)建工具,開發(fā)者可以使用它在項(xiàng)目開發(fā)過程中自動執(zhí)行常見任務(wù)。下面這篇文章主要給大家介紹了關(guān)于Gulp實(shí)現(xiàn)靜態(tài)網(wǎng)頁模塊化的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2018-01-01
本節(jié)主要為大家介紹了js返回前一頁如何刷新本頁重載頁面的方法，需要的朋友可以參考下2014-07-07
js保留兩位小數(shù)最簡單的實(shí)現(xiàn)方法
JS數(shù)據(jù)格式化是在進(jìn)行web前端開發(fā)時(shí)常碰到的事情,特別是在數(shù)據(jù)類型為Float的數(shù)據(jù)就需要特殊處理,如保留兩位小數(shù)、小數(shù)點(diǎn)后的數(shù)據(jù)是否需要四舍五入等等,下面這篇文章主要給大家介紹了關(guān)于js保留兩位小數(shù)最簡單的實(shí)現(xiàn)方法,需要的朋友可以參考下2023-05-05
javascript表單驗(yàn)證 - Parsley.js使用和配置
大家還記得我們曾經(jīng)介紹過的表單驗(yàn)證jquery插件jquery.validationEngine吧;天介紹的Parsley同樣也可以幫助你只使用簡單的配置即可實(shí)現(xiàn)表單驗(yàn)證功能，基于它的強(qiáng)大DOM-API,感興趣的你可以不要錯(cuò)過了哦2013-01-01