🎨 CSS Visibility 演示工具

交互式探索 visibility 属性的三种状态、与 display:none 的区别、动画过渡效果

visibility 三种状态对比

visible 可见
VISIBLE
hidden 隐藏
HIDDEN
collapse 折叠
COLLAPSE
/* visibility: visible - 元素正常显示 */ .element-a { visibility: visible; } /* visibility: hidden - 元素不可见但保留空间 */ .element-b { visibility: hidden; } /* visibility: collapse - 用于表格行/列折叠 */ .element-c { visibility: collapse; }

visibility:hidden vs display:none

visibility: hidden 保留空间

BOX
邻居
← 隐藏后邻居不动

display: none 不保留空间

BOX
邻居
← 隐藏后邻居左移
/* visibility: hidden */ /* 元素不可见，但仍占据布局空间 */ /* 子元素可通过 visibility:visible 重新显示 */ .hidden-keep-space { visibility: hidden; } /* display: none */ /* 元素完全从文档流中移除 */ /* 不占据任何空间，子元素也无法显示 */ .hidden-no-space { display: none; }

动画过渡效果演示

visibility 配合 opacity 实现平滑淡入淡出（纯 display:none 无法做到过渡动画）

点击我淡出
/* 关键：visibility 配合 opacity + transition */ .fade-element { opacity: 1; visibility: visible; transform: scale(1); transition: opacity .5s ease, visibility .5s ease, transform .5s ease; } .fade-element.hidden { opacity: 0; visibility: hidden; transform: scale(0.92); } /* 为什么不用 display:none？ */ /* display 不支持 transition 过渡 */ /* visibility 支持，配合 opacity 实现平滑动画 */

CSS 代码生成器

快速参考

👁️

visibility: visible

默认值，元素正常显示

占据空间 ✓
👻

visibility: hidden

不可见但保留布局空间

不可见 · 占空间
📐

visibility: collapse

表格行/列折叠，其他同 hidden

表格专用
🚫

display: none

完全移除，不占任何空间

完全移除
特性 visible hidden collapse display:none
元素可见 ✅ ❌ ❌ ❌
占据空间 ✅ ✅ ⚠️ ❌
支持过渡动画 ✅ ✅ ✅ ❌
子元素可覆盖 — ✅ ✅ ❌
可被点击/聚焦 ✅ ❌ ❌ ❌