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 在旧版浏览器中的兼容性问题。