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

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

news 2025/12/16 2:35:32

要实现一个毛玻璃效果的可拖拽登录框，我们可以利用 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，它会自动调整大小以适应屏幕尺寸，可以确保在不同设备上有较好的显示效果。