css制作合拢效果
使用 CSS 动画实现合拢效果
通过 transform 和 transition 属性实现元素的合拢效果，适合菜单、面板等交互场景。
.element {
width: 200px;
height: 100px;
background: #3498db;
transition: all 0.3s ease;
transform-origin: left center;
}
.element.collapsed {
transform: scaleX(0);
}利用 clip-path 制作动态合拢
clip-path 可以更精细控制合拢路径，适合不规则形状元素。
.element {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: clip-path 0.4s ease;
}
.element.collapsed {
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}折叠效果的实现方案
结合 max-height 和 overflow 实现内容区域的垂直合拢效果。
.content {
max-height: 500px;
overflow: hidden;
transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.content.collapsed {
max-height: 0;
}响应式合拢交互
通过 CSS 伪类和相邻兄弟选择器实现无 JavaScript 的合拢控制。
input[type="checkbox"]:checked + .panel {
transform: translateX(-100%);
opacity: 0;
}
.panel {
transition: all 0.4s ease-out;
}3D 空间合拢效果
添加透视属性创造立体合拢感，适合卡片式 UI 元素。
.card {
transform-style: preserve-3d;
perspective: 1000px;
transition: transform 1s;
}
.card.collapsed {
transform: rotateY(90deg);
}每种方法可根据具体场景调整过渡时间、缓动函数和触发方式。现代浏览器均良好支持这些属性，但需注意 clip-path 在旧版浏览器中的兼容性问题。
