毛玻璃风格的登录注册页面

毛玻璃风格的登录注册页面 ✨

想要一个高颜值的 登录注册页面 ？
想让你的 UI 设计脱颖而出？
这篇文章带你用 HTML + CSS 搭建一个 毛玻璃 风格的炫酷登录页面！💎

🖼 效果预览

我们的最终效果是一个 毛玻璃透明背景 + 渐变色 UI + 炫酷按钮 的登录注册界面。
快来看看吧👇：

预览图

🚀 技术栈

本项目使用的技术栈：

  • HTML：页面结构
  • CSS：毛玻璃特效 + 视觉优化
  • FontAwesome / Icon库：用于图标美化
  • 渐变背景：让页面更有质感

🎨 代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>毛玻璃登录注册</title>
    <link rel="stylesheet" href="style.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(150deg, #d299c2, #fef9d7);
            background-size: cover;
            background-position: center;
        }

        /* 毛玻璃特效容器 */
        .wrapper {
            width: 420px;
            background: transparent;
            border: 2px solid rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(20px);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            color: #fff;
            border-radius: 10px;
            padding: 30px 40px;
        }

        /* 标题样式 */
        .wrapper h1 {
            font-size: 36px;
            text-align: center;
        }

        /* 输入框 */
        .input-box {
            position: relative;
            width: 100%;
            height: 50px;
            margin: 30px 0;
        }

        .input-box input {
            width: 100%;
            height: 100%;
            background: transparent;
            border: none;
            outline: none;
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 40px;
            color: #fff;
            padding: 20px 45px 20px 20px;
        }

        .input-box input::placeholder {
            color: #fff;
        }

        /* 记住密码 & 忘记密码 */
        .remember-forgot {
            display: flex;
            justify-content: space-between;
            font-size: 14.5px;
            margin: -15px 0 15px;
        }

        .remember-forgot input {
            accent-color: #fff;
            margin-right: 3px;
        }

        .remember-forgot a {
            color: #fff;
            text-decoration: none;
        }

        .remember-forgot a:hover {
            text-decoration: underline;
        }

        /* 登录按钮 */
        .wrapper .btn {
            width: 100%;
            height: 40px;
            background: #fff;
            border: none;
            outline: none;
            border-radius: 40px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            font-size: 16px;
            color: #333;
            font-weight: 600;
        }

        /* 注册跳转 */
        .wrapper .register-link {
            font-size: 14.5px;
            text-align: center;
            margin: 20px 0 15px;
        }

        .register-link p a {
            color: #fff;
            text-decoration: none;
            font-weight: 600;
        }

        .register-link p a:hover {
            text-decoration: underline;
        }

        /* 按钮悬停效果 */
        .wrapper .btn:hover {
            background: #f1c40f;
            transition: 0.3s ease-in-out;
        }

    </style>
</head>
<body>

    <div class="wrapper">
        <form action="">
            <h1>Login</h1>
            <div class="input-box">
                <input type="text" placeholder="Username" required>
                <i class="bx bxs-user"></i>
            </div>

            <div class="input-box">
                <input type="password" placeholder="Password" required>
                <i class="bx bxs-lock-alt"></i>
            </div>

            <div class="remember-forgot">
                <label><input type="checkbox">Remember me</label>
                <a href="#">Forgot password?</a>
            </div>

            <button type="submit" class="btn">Login</button>

            <div class="register-link">
                <p>Don't have an account? <a href="#">Register</a></p>
            </div>
        </form>
    </div>

</body>
</html>

🎬 最终效果
一切完成后，你将得到一个 高颜值、实用性强 的 毛玻璃风格登录注册界面！😎
赶紧试试吧！🚀

如果你觉得这篇文章 有帮助，不妨 点赞 👍、收藏 ⭐、分享 💡 一下哦！
有什么问题欢迎在评论区交流～ 💬

✨ 亮点：

  1. 一体化运行：直接复制到代码中或 网页 编辑器即可使用。
  2. 包含 HTML + CSS 代码：一键复制，立刻使用！
  3. 美观清晰的排版：便于阅读，适合分享！
  4. 毛玻璃 + 渐变背景：现代化 UI 设计，提升用户体验！

🎯 现在就 复制代码，创建你的 毛玻璃登录页面 吧！