当前位置：首页 > article >正文

HTML5前端实现毛玻璃效果的可拖拽登录框

article 2024/12/31 19:52:33

要实现一个毛玻璃效果的可拖拽登录框，我们可以利用 CSS3 的 backdrop-filter 属性来实现毛玻璃效果，同时通过 JavaScript 来实现拖拽功能。毛玻璃效果通常指的是模糊并半透明的背景效果，适用于背景中的图像或色彩。

下面是一个实现毛玻璃效果的可拖拽登录框的示例代码：

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>毛玻璃效果 登录框</title>
    <style>
        /* 设置全屏背景图片 */
        body, html {
            height: 100%;
            margin: 0;
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            background: url('https://vcg03.cfp.cn/creative/vcg/800/new/VCG211178020258.jpg') no-repeat center center fixed;
            background-size: cover;
        }
        /* 添加毛玻璃效果 */
        .background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            backdrop-filter: blur(8px) saturate(1.2);
            filter: blur(8px);
            z-index: 1;
        }
        /* 可拖拽的登录框样式 */
        .login-box {
            position: absolute;
            left: 50%;  /* 水平居中 */
            top: 50%;   /* 垂直居中 */
            transform: translate(-50%, -50%); /* 确保完全居中 */
            z-index: 2;
            width: 300px;
            padding: 30px;
            background-color: rgba(255, 255, 255, 0.3);
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            color: white;
            text-align: center;
            cursor: move;
            
            /* 添加flex布局使内容垂直居中 */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 15px; /* 统一设置内容间距 */
        }
        .login-box h2 {
            margin: 0;
            font-size: 24px;
            color: #fff;
            width: 100%;
            text-align: center;
        }
        .login-box input {
            width: calc(100% - 24px); /* 考虑padding的宽度 */
            padding: 12px;
            margin: 0; /* 移除原有margin */
            border-radius: 8px;
            border: none;
            font-size: 16px;
            background-color: rgba(255, 255, 255, 0.6);
            text-align: center; /* 输入框文本居中 */
        }
        .login-box button {
            width: 100%;
            padding: 12px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            margin: 0; /* 移除原有margin */
        }
        .login-box button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <!-- 毛玻璃背景 -->
    <div class="background"></div>
    <!-- 登录框 -->
    <div class="login-box" id="loginBox">
        <h2>登录</h2>
        <input type="text" placeholder="用户名" id="username" required>
        <input type="password" placeholder="密码" id="password" required>
        <button>登录</button>
    </div>
    <script>
        const loginBox = document.getElementById('loginBox');
        loginBox.onmousedown = function(event) {
            let offsetX = event.clientX - loginBox.getBoundingClientRect().left;
            let offsetY = event.clientY - loginBox.getBoundingClientRect().top;
            
            document.onmousemove = function(event) {
                loginBox.style.left = event.clientX - offsetX + 'px';
                loginBox.style.top = event.clientY - offsetY + 'px';
            };
            
            document.onmouseup = function() {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        };
    </script>
</body>
</html>

代码说明：

毛玻璃效果：
- 通过 backdrop-filter: blur(8px) saturate(1.2) 使背景有模糊效果，并轻微增加饱和度（让背景更生动）。同时，使用 filter: blur(8px) 作为兼容性处理，确保效果在更多浏览器中生效。
- backdrop-filter 只对背景内容有效，因此它会影响到整个背景图像，使其模糊处理。
可拖拽登录框：
- 使用 JavaScript 监听鼠标事件，计算鼠标与登录框位置的偏移量，实现在鼠标拖动时更新登录框的位置。
- 在鼠标按下时，记录鼠标的偏移，拖动时更新 loginBox 的 left 和 top 属性，实现位置更新。
登录框样式：
- 登录框使用了 rgba(255, 255, 255, 0.3) 的半透明白色背景，以确保既能看到毛玻璃效果，又保持登录框内容的可见性。
- 输入框和按钮的样式为现代化设计，带有圆角、阴影和适当的背景色。
响应式设计：
- 由于背景图片的 background-size: cover，它会自动调整大小以适应屏幕尺寸，可以确保在不同设备上有较好的显示效果。