弹跳弹窗

弹跳出现效果

实时预览

Open Modal

代码

css

.bounce-modal-trigger{padding:10px 24px;background:#667eea;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px}
.bounce-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .3s;z-index:100}
.bounce-modal-box{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.3);background:#1a1a2e;border-radius:12px;padding:24px;min-width:240px;text-align:center;color:#ddd;opacity:0;pointer-events:none;transition:all .4s cubic-bezier(.34,1.56,.64,1);z-index:101}
#bounce-modal-toggle:checked~.bounce-modal-overlay{opacity:1;pointer-events:auto}
#bounce-modal-toggle:checked~.bounce-modal-box{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}

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

弹跳弹窗 ​

实时预览 ​

Bounce Modal

代码 ​

快速使用 ​

使用场景 ​

常见问题 ​

浏览器兼容性 ​

📎 相关动画推荐