CSS 弹窗淡入模态框动画效果 — 纯CSS实现一键复制代码

模态框和遮罩层同时淡入出现，简洁优雅的弹窗动画。

实时预览

代码

css

.modal-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.6);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.modal-overlay.show { opacity: 1; pointer-events: auto; }
.modal-box {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #1a1a2e; border-radius: 12px; padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.modal-box.show { opacity: 1; pointer-events: auto; }

html

<div class="modal-overlay"></div>
<div class="modal-box">
  <h3>标题</h3>
  <p>内容</p>
  <button class="modal-close-btn">关闭</button>
</div>

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

快速使用

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

使用场景

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

常见问题

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 布局需要降级处理

使用说明

属性	说明
`opacity: 0 → 1`	淡入效果
`pointer-events: none/auto`	控制不可见时的可交互性
`position: absolute; inset: 0`	遮罩层覆盖当前演示容器
`transform: translate(-50%, -50%)`	模态框居中定位

淡入模态框 Modal Fade In ​

实时预览 ​

淡入模态框

代码 ​

快速使用 ​

使用场景 ​

常见问题 ​

浏览器兼容性 ​

使用说明 ​

📎 相关动画推荐

淡入模态框 Modal Fade In