菜鸟-创作你的创作

HTML+CSS实现炫酷登录切换的项目实践

lichongyang

要实现一个炫酷的登录界面切换效果，可以使用 HTML 和 CSS 结合一些动画和转换效果来增强用户体验。通过使用 Flexbox 布局和 CSS 动画，我们可以实现一个流畅的切换效果，比如从登录界面切换到注册界面，或者显示/隐藏其他表单内容。

在这个示例中，我们将创建一个具有以下功能的炫酷登录切换效果：

  1. 登录/注册切换：用户可以在登录和注册表单之间切换。
  2. 动画效果：页面切换使用平滑的动画过渡，增强视觉效果。
  3. 样式和布局：使用现代的布局方式和炫酷的背景效果。

项目结构：

实现代码：

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>炫酷登录切换</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="container">
        <!-- 登录/注册表单容器 -->
        <div class="form-container">
            <!-- 登录表单 -->
            <form id="login-form" class="form">
                <h2>登录</h2>
                <div class="input-group">
                    <input type="text" id="username" placeholder="用户名" required>
                </div>
                <div class="input-group">
                    <input type="password" id="password" placeholder="密码" required>
                </div>
                <button type="submit" class="btn">登录</button>
                <p class="toggle-form" onclick="toggleForm()">没有账户? <span>注册</span></p>
            </form>

            <!-- 注册表单 -->
            <form id="register-form" class="form">
                <h2>注册</h2>
                <div class="input-group">
                    <input type="text" id="new-username" placeholder="用户名" required>
                </div>
                <div class="input-group">
                    <input type="email" id="email" placeholder="邮箱" required>
                </div>
                <div class="input-group">
                    <input type="password" id="new-password" placeholder="密码" required>
                </div>
                <button type="submit" class="btn">注册</button>
                <p class="toggle-form" onclick="toggleForm()">已有账户? <span>登录</span></p>
            </form>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

CSS (styles.css):

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(to right, #00c6ff, #0072ff);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

.container {
    position: relative;
    width: 400px;
    height: 500px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.form-container {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.6s ease;
}

.form {
    width: 300px;
    padding: 30px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

h2 {
    margin-bottom: 20px;
    color: #0072ff;
}

.input-group {
    width: 100%;
    margin-bottom: 15px;
}

.input-group input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 5px;
    outline: none;
    transition: border-color 0.3s ease;
}

.input-group input:focus {
    border-color: #0072ff;
}

.btn {
    padding: 12px 20px;
    background: #0072ff;
    border: none;
    color: white;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background: #005bb5;
}

.toggle-form {
    margin-top: 20px;
    color: #0072ff;
    cursor: pointer;
    text-align: center;
}

.toggle-form span {
    font-weight: bold;
}

#login-form {
    transform: translateX(0);
}

#register-form {
    transform: translateX(100%);
}

.show-register #login-form {
    transform: translateX(-100%);
}

.show-register #register-form {
    transform: translateX(0);
}

JavaScript (script.js):

function toggleForm() {
    const container = document.querySelector('.form-container');
    container.classList.toggle('show-register');
}

解释：

  1. HTML 结构：
    • 我们创建了一个 container 容器，其中包含两个表单：login-form（登录表单）和 register-form（注册表单）。每个表单都有自己的输入字段和提交按钮，并且通过 p.toggle-form 来触发切换。
    • toggleForm 函数会切换 show-register 类，从而实现表单之间的切换。
  2. CSS 样式：
    • 背景使用了 线性渐变（linear-gradient）效果，给页面增添了炫酷的背景色。
    • 使用 position: absolute 和 transform 来处理表单容器的滑动效果。切换时，表单会通过 transform 在 X 轴上移动。
    • 每个表单输入框和按钮都有简单的样式，输入框在获得焦点时会改变边框颜色，按钮在 hover 时也有颜色变化。
  3. JavaScript：
    • toggleForm 函数使用 classList.toggle 来在 .form-container 上切换 show-register 类。当该类被添加时，表单的 transform 属性会改变，登录表单滑动出去，注册表单滑入。

动画效果：

总结：

这个项目展示了一个基本的登录和注册表单切换效果。通过使用 CSS 动画和 Flexbox 布局，使得整个切换过程既简单又富有吸引力。你可以根据需要进一步扩展这个效果，比如加入输入验证、表单提交处理等功能，进一步增强交互性。

退出移动版