Appearance
悬停模糊
悬停模糊的CSS动画效果，纯CSS实现，无需JavaScript。
实时预览
Blur Glass
Blur Me
代码
css
.blur-element {
filter: blur(0px);
backdrop-filter: blur(0px);
transition: filter 0.4s ease, backdrop-filter 0.4s ease;
}
.blur-element:hover {
filter: blur(4px);
backdrop-filter: blur(8px);
}html
<div class="blur-element">Blur Glass</div>纯 CSS 实现的悬停模糊悬停效果——当鼠标悬停在元素上时，通过 transition 和 transform 属性触发平滑的视觉变化。不需要任何 JavaScript，拷贝代码即可集成到你的网站中。
快速使用
- 从下方代码块复制 CSS 到你的样式文件中
- 将 HTML 结构粘贴到你的页面模板
- 给目标元素添加对应的 class 名称
- 根据需要调整颜色、大小、动画时长等参数
使用场景
- 卡片和磁贴：悬停时上浮+阴影延伸，给用户可点击的视觉暗示
- 按钮和链接：悬停变色、缩放或发光，提供即时交互反馈
- 图片和缩略图：悬停放大或模糊聚焦，突出重点内容
- 导航菜单：下划线展开或背景色滑入，指示当前位置
常见问题
Q: Hover 效果在手机上不生效怎么办？ A: 手机的触摸屏没有 hover 状态。建议用 @media (hover: hover) 包裹 hover 样式，只在支持悬停的设备上应用。对于移动端，可用 :active 伪类做点击反馈。
Q: 动画会影响页面性能吗？ A: 本效果只用 transform 和 opacity 做动画，这两个属性由 GPU 合成器处理，不触发页面重排（reflow），性能开销极小，120fps 流畅运行。
Q: 如何修改动画的触发方式？ A: 将 :hover 改为 :active（点击触发）、.active（JS 控制类名触发）或配合 @media (prefers-reduced-motion) 做无障碍适配。
浏览器兼容性
本效果使用标准 CSS 属性，所有现代浏览器（Chrome、Firefox、Safari、Edge）均完全支持。
| 浏览器 | 兼容性 |
|---|---|
| Chrome / Edge | ✅ 完全支持 |
| Firefox | ✅ 完全支持 |
| Safari | ✅ 完全支持 |
| 移动端浏览器 | ✅ 完全支持 |
| IE 11 | ⚠️ 部分属性需要 -ms- 前缀或降级 |
使用说明
| 属性 | 值 | 说明 |
|---|---|---|
filter | blur(4px) | 元素本身模糊 4 像素 |
backdrop-filter | blur(8px) | 背景模糊（磨砂玻璃效果） |
transition | 0.4s ease | 平滑的模糊过渡 |
border | 半透明白色 | 增强玻璃质感 |
提示：
filter: blur()模糊元素本身内容，backdrop-filter模糊元素背后的背景。两者可组合使用打造磨砂玻璃效果。模糊值建议控制在 1-8px 之间。