超级简单 jQuery+JS+HTML+CSS实现的炫酷登录注册界面

DDOS防御

于 2024-06-17 00:46:15 发布

阅读量287

点赞数

分类专栏：网络技术文章标签： javascript jquery html

原文链接：https://www.yunjiasu.cc

版权

网络技术专栏收录该内容

132 篇文章 1 订阅

订阅专栏

创建一个炫酷的登录注册界面可以使用HTML、CSS和JavaScript，而jQuery可以简化DOM操作和事件处理。下面是实现一个基本的登录注册界面的步骤和代码示例：

1. HTML结构

首先，创建一个简单的HTML结构，包括登录和注册的表单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册界面</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="form-container sign-up-container">
            <form action="#">
                <h1>注册</h1>
                <input type="text" placeholder="用户名" />
                <input type="password" placeholder="密码" />
                <input type="password" placeholder="确认密码" />
                <button>注册</button>
            </form>
        </div>
        <div class="form-container sign-in-container">
            <form action="#">
                <h1>登录</h1>
                <input type="text" placeholder="用户名" />
                <input type="password" placeholder="密码" />
                <a href="#">忘记密码？</a>
                <button>登录</button>
            </form>
        </div>
        <div class="overlay-container">
            <div class="overlay">
                <div class="overlay-panel overlay-left">
                    <h1>欢迎回来!</h1>
                    <p>请输入您的账户信息</p>
                    <button class="ghost" id="signIn">登录</button>
                </div>
                <div class="overlay-panel overlay-right">
                    <h1>新用户注册</h1>
                    <p>创建一个新账户</p>
                    <button class="ghost" id="signUp">注册</button>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

2. CSS样式

使用CSS来设计炫酷的界面效果：

/* styles.css */
body, html {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
}

.container {
    position: relative;
    width: 100%;
    max-width: 600px;
}

.form-container {
    position: absolute;
    top: 0;
    height: 100%;
    transition: all 0.6s ease-in-out;
}

.sign-in-container {
    left: 0;
    width: 50%;
    z-index: 2;
}

.sign-up-container {
    left: 50%;
    width: 50%;
    opacity: 0;
    z-index: 1;
}

.overlay-container {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.6s ease-in-out;
    z-index: 100;
}

.overlay {
    position: relative;
    width: 200%;
    height: 100%;
    left: -50%;
}

.overlay-panel {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    text-align: center;
    top: 0;
    height: 100%;
    width: 50%;
    transform: translateX(0);
}

.overlay-left {
    transform: translateX(-20%);
}

.overlay-right {
    right: 0;
    transform: translateX(0);
}

button {
    background: #ff416c;
    color: #fff;
    border: none;
    padding: 10px 20px;
    margin: 10px 0;
    cursor: pointer;
}

.ghost {
    background: none;
    border: 2px solid #ff416c;
    color: #ff416c;
}

input[type="text"],
input[type="password"] {
    width: 100%;
    padding: 15px;
    margin: 10px 0;
    border: none;
    background: #f1f1f1;
}

a {
    color: #ff416c;
    text-decoration: none;
}

/* 动画效果 */
.container.right-panel-active .sign-up-container {
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
    animation: show 0.6s;
}

.container.right-panel-active .sign-in-container {
    transform: translateX(100%);
    opacity: 0;
    z-index: 3;
}

.container.right-panel-active .overlay-container {
    transform: translateX(-100%);
}

@keyframes show {
    0%, 49.99% {
        opacity: 0;
        z-index: 1;
    }
    50%, 100% {
        opacity: 1;
        z-index: 5;
    }
}