快捷導(dǎo)航

HTML+CSS+JS高顏值登錄注冊(cè)頁(yè)面實(shí)現(xiàn)代碼(建議收藏)

更新時(shí)間：2025年08月18日 10:57:58 作者：前端Hardy

這篇文章主要介紹了HTML+CSS+JS高顏值登錄注冊(cè)頁(yè)面實(shí)現(xiàn)的相關(guān)資料,文中采用漸變背景、粒子動(dòng)畫、毛玻璃效果等設(shè)計(jì),實(shí)現(xiàn)響應(yīng)式布局與動(dòng)態(tài)交互,通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

這段代碼綜合運(yùn)用了 HTML、CSS 和 JavaScript 技術(shù)，創(chuàng)建了一個(gè)具有現(xiàn)代感和交互性的登錄注冊(cè)頁(yè)面。使用了漸變背景、粒子動(dòng)畫、毛玻璃效果等現(xiàn)代設(shè)計(jì)元素，以及響應(yīng)式布局和動(dòng)態(tài)交互邏輯，提升了用戶體驗(yàn)和視覺(jué)吸引力。

大家復(fù)制代碼時(shí)，可能會(huì)因格式轉(zhuǎn)換出現(xiàn)錯(cuò)亂，導(dǎo)致樣式失效。建議先少量復(fù)制代碼進(jìn)行測(cè)試，若未能解決問(wèn)題，私信回復(fù)源碼兩字，我會(huì)發(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ái)管理系統(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;
            }
        }

        /* 動(dòng)畫效果 */
        @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ái)管理系統(tǒng)</p>
            </div>

            <div class="tabs">
                <div class="tab active" data-tab="login">登錄</div>
                <div class="tab" data-tab="register">注冊(cè)</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">
                            還沒(méi)有賬號(hào)? <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  id="show-register">立即注冊(cè)</a>
                        </div>
                    </div>
                </form>

                <!-- 注冊(cè)表單 -->
                <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)建賬號(hào)</button>

                        <div class="signup-link">
                            已有賬號(hào)? <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ī)動(dòng)畫延遲
                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');

                    // 顯示對(duì)應(yīng)的表單
                    const targetForm = tab.getAttribute('data-tab');
                    forms.forEach(form => {
                        form.classList.remove('active');
                        if (form.id === `${targetForm}-form`) {
                            form.classList.add('active');
                        }
                    });
                });
            });

            // 注冊(cè)和登錄鏈接切換
            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)用中這里會(huì)發(fā)送請(qǐng)求到服務(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í)際的注冊(cè)邏輯
                console.log('注冊(cè)信息:', name, email, password);
                alert('注冊(cè)功能演示 - 實(shí)際應(yīng)用中這里會(huì)發(fā)送請(qǐng)求到服務(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è)登錄/注冊(cè)界面。
card：定義一個(gè)卡片元素，用于顯示登錄/注冊(cè)表單。
tabs：定義標(biāo)簽頁(yè)的容器，包含登錄和注冊(cè)兩個(gè)標(biāo)簽。
form active login-form：定義登錄表單，初始狀態(tài)下處于活動(dòng)狀態(tài)。
form register-form：定義注冊(cè)表單。
email：定義一個(gè)用于輸入郵箱的文本框。
label：定義表單元素的標(biāo)簽，用于提示用戶輸入內(nèi)容。
button：定義提交按鈕，用戶點(diǎn)擊后可提交表單。
social-btn：定義社交登錄按鈕的容器。

CSS

body：設(shè)置頁(yè)面背景顏色、最小高度、字體系列和過(guò)渡效果，為頁(yè)面提供基本的視覺(jué)樣式。
body::before：創(chuàng)建一個(gè)半透明的覆蓋層，增強(qiáng)頁(yè)面背景的視覺(jué)效果。
.card：定義卡片的大小、布局、背景顏色、邊框半徑、邊框樣式、陰影效果、內(nèi)邊距以及相對(duì)定位，使其在頁(yè)面中居中顯示。
.content：定義內(nèi)容區(qū)域的布局，包括子元素的排列方式、對(duì)齊方式和內(nèi)邊距。
#title：設(shè)置標(biāo)題的字體系列、顏色、大小和文本陰影，使其在頁(yè)面中突出顯示。
.image：定義圖片區(qū)域的樣式，包括寬度、高度、邊框半徑以及溢出內(nèi)容的處理方式。
#slide：設(shè)置圖片的樣式，確保圖片覆蓋整個(gè)區(qū)域，并定義其位置和大小。
.dots：定義指示點(diǎn)的布局，包括子元素的排列方式、對(duì)齊方式和間隙。
.dot：定義單個(gè)指示點(diǎn)的樣式，包括寬度、高度、背景顏色、邊框半徑和邊距。
.active：定義活動(dòng)指示點(diǎn)的樣式，通過(guò)改變背景顏色來(lái)突出顯示活動(dòng)狀態(tài)。
@keyframes slidein：定義圖片滑入的動(dòng)畫效果，設(shè)置動(dòng)畫的持續(xù)時(shí)間、屬性變化等。

JavaScript

document.addEventListener(‘DOMContentLoaded’, function() { … });：當(dāng) DOM 內(nèi)容加載完成后，執(zhí)行指定的初始化函數(shù)。
createParticles()：調(diào)用此函數(shù)創(chuàng)建粒子背景，指定粒子的數(shù)量、大小、位置和動(dòng)畫效果。
setupFormTabs()：設(shè)置標(biāo)簽頁(yè)的切換邏輯，通過(guò)監(jiān)聽(tīng)點(diǎn)擊事件來(lái)切換登錄和注冊(cè)表單的顯示狀態(tài)。
setupFormSubmit()：處理表單提交事件，驗(yàn)證用戶輸入并提供相應(yīng)的反饋。
particles.forEach(particle => { … });：為每個(gè)粒子添加動(dòng)畫效果，使其在頁(yè)面上隨機(jī)移動(dòng)。
setupFormTabs()中的事件監(jiān)聽(tīng)：監(jiān)聽(tīng)標(biāo)簽頁(yè)的點(diǎn)擊事件，實(shí)現(xiàn)登錄和注冊(cè)表單之間的切換。
setupFormSubmit()中的表單驗(yàn)證：驗(yàn)證注冊(cè)表單中的密碼是否一致，并提供相應(yīng)的錯(cuò)誤提示。

總結(jié)

到此這篇關(guān)于HTML+CSS+JS高顏值登錄注冊(cè)頁(yè)面實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)JS登錄注冊(cè)頁(yè)面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: