CSS Animations

Appearance

模糊遮罩 Modal Blur Backdrop ​

模态框打开时，背景内容通过 backdrop-filter: blur() 产生毛玻璃模糊效果。

实时预览 ​

这是背景内容

一些示例文字用于展示模糊效果

模糊遮罩

背景已被模糊处理。

代码 ​

css
.blur-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease;
}
.blur-overlay.show { opacity: 1; pointer-events: auto; }
.modal-box {
  opacity: 0; transform: scale(0.95);
  transition: all 0.35s ease;
}
.modal-box.show { opacity: 1; transform: scale(1); }
html
<div class="blur-overlay"></div>
<div class="modal-box">...</div>

纯 CSS 实现的模糊遮罩弹窗动画——通过伪类选择器和过渡让模态框/对话框有平滑的进入和退出动画。适用于确认对话框、图片灯箱、侧边栏面板等场景。

快速使用 ​

  1. 复制 CSS 代码到你的样式文件中
  2. 将弹窗 HTML 结构粘贴到页面底部（checkbox hack 方案）或用 JS 控制显示
  3. 弹窗打开时给 body 加 overflow: hidden 防止背景滚动
  4. 调整弹窗大小、位置和动画时长

使用场景 ​

  • 确认对话框：缩放弹出+背景模糊让用户聚焦于确认操作
  • 图片/视频灯箱：从缩略图位置放大过渡到全屏预览
  • 侧边栏/抽屉面板：从屏幕边缘滑入，适合移动端的筛选和菜单
  • 登录/注册弹窗：顶部滑入+背景遮罩，不打断用户浏览上下文

常见问题 ​

Q: 弹窗动画如何防止背景滚动？ A: 弹窗打开时给 body 加 overflow: hidden（或 position: fixed + 记录 scrollY）。纯 CSS 方案无法控制 body 滚动，所以弹窗动画通常需要少量 JS 配合。

Q: 弹窗关闭时动画如何反转播放？ A: 关闭时先触发退出动画（如 opacity: 1→0），等 transitionend 事件后再移除 DOM 或设置 display: none。不要同时改变 display 和播放动画——display 变化会跳过过渡。

Q: 弹窗动画的焦点管理怎么做？ A: 打开弹窗时用 JS focus() 将焦点移到弹窗内第一个可聚焦元素，关闭后把焦点还给触发按钮。配合 aria-modal="true" 和 role="dialog" 满足屏幕阅读器无障碍要求。

浏览器兼容性 ​

浏览器兼容性
Chrome / Edge✅ 完全支持
Firefox✅ 完全支持
Safari✅ 完全支持
移动端浏览器✅ 完全支持
IE 11⚠️ flex 布局需要降级处理

使用说明 ​

属性说明
backdrop-filter: blur(6px)背景模糊效果的核心属性
background: rgba(0,0,0,0.3)半透明叠加层
transition: 0.35s模糊和淡入同时过渡
scale(0.95)模态框也有轻微缩放入场

📎 相关动画推荐

以下更多 CSS 弹窗动画 等你探索——每个都支持在线预览和一键复制代码。

弹跳弹窗抽屉面板淡入模态框缩放弹出顶部滑入