注册界面--淡紫色-CSDN博客

本文链接：https://blog.csdn.net/weixin_47004687/article/details/147188426

1.文档结构：

使用HTML5标准文档声明

设置viewport保证移动端适配

引入Poppins字体增强视觉效果

2.全局样式：

重置默认边距和盒模型

使用全屏渐变背景营造现代感

弹性布局实现垂直水平居中

3.注册容器：

半透明白色背景配合大圆角

立体阴影增强层次感

悬停时的微妙上浮动画

4.标题设计：

使用伪元素创建装饰下划线

响应式字体大小调整

5.输入框特效：

浮动标签动画：聚焦时标签上移并变色

聚焦时的光晕效果提升交互体验

平滑的过渡动画

6.按钮设计：

渐变背景与容器渐变呼应

悬停时的微动效和阴影

按压时的点击反馈

7.响应式设计：

容器宽度百分比+max-width组合

媒体查询适配手机屏幕

输入框自动适应容器宽度

8.表单验证：

HTML5原生验证属性(required, type等)

密码最小长度限制

自动邮箱格式验证

9.视觉效果亮点：

整体采用紫色配色方案

卡片式设计配合柔和的阴影

精致的微交互动画（悬停、聚焦、按钮）

创新的浮动标签效果

半透明磨砂玻璃效果背景

响应式布局适配各种设备

10.效果展示：

11.代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>现代风格注册界面</title>
    
    <!-- 引入Google Fonts字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
    
    <style>
        /* 基础重置和全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif; /* 使用现代字体 */
        }

        body {
            min-height: 100vh;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 渐变色背景 */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 注册容器样式 */
        .register-container {
            background: rgba(255, 255, 255, 0.95); /* 半透明白色背景 */
            padding: 2.5rem;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* 立体阴影效果 */
            width: 90%;
            max-width: 450px;
            transform: translateY(0);
            transition: transform 0.3s ease; /* 悬停动画 */
        }

        .register-container:hover {
            transform: translateY(-5px); /* 悬停上浮效果 */
        }

        /* 标题样式 */
        h2 {
            color: #2d3748;
            text-align: center;
            margin-bottom: 2rem;
            font-size: 2rem;
            position: relative;
        }

        h2::after {
            content: '';
            display: block;
            width: 50px;
            height: 3px;
            background: #667eea;
            margin: 10px auto;
            border-radius: 2px;
        }

        /* 表单组样式 */
        .form-group {
            margin-bottom: 1.5rem;
            position: relative;
        }

        /* 输入框样式 */
        input {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        input:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2); /* 聚焦光晕效果 */
        }

        /* 浮动标签效果 */
        label {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #718096;
            pointer-events: none;
            transition: all 0.3s ease;
        }

        input:focus + label,
        input:not(:placeholder-shown) + label {
            top: -10px;
            left: 5px;
            font-size: 0.8rem;
            background: white;
            padding: 0 5px;
            color: #667eea;
        }

        /* 提交按钮样式 */
        button {
            width: 100%;
            padding: 12px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        /* 响应式设计 */
        @media (max-width: 480px) {
            .register-container {
                padding: 1.5rem;
            }
            
            h2 {
                font-size: 1.75rem;
            }
        }
    </style>
</head>
<body>
    <div class="register-container">
        <h2>创建账户</h2>
        <form>
            <!-- 用户名输入组 -->
            <div class="form-group">
                <input type="text" id="username" placeholder=" " required>
                <label for="username">用户名</label>
            </div>

            <!-- 邮箱输入组 -->
            <div class="form-group">
                <input type="email" id="email" placeholder=" " required>
                <label for="email">电子邮箱</label>
            </div>

            <!-- 密码输入组 -->
            <div class="form-group">
                <input type="password" id="password" placeholder=" " required minlength="6">
                <label for="password">密码</label>
            </div>

            <!-- 确认密码输入组 -->
            <div class="form-group">
                <input type="password" id="confirm-password" placeholder=" " required>
                <label for="confirm-password">确认密码</label>
            </div>

            <!-- 提交按钮 -->
            <button type="submit">立即注册</button>
        </form>
    </div>
</body>
</html>