css伸缩侧边栏过渡效果

CSS中的伸缩侧边栏过渡效果，通常用于响应式设计或页面导航中，当侧边栏在屏幕大小变化时平滑地展开或折叠。这种效果可以通过媒体查询（Media Queries）和CSS动画（Transition或Animation）相结合来实现。下面是一个基本的例子：

1. **使用CSS `display` 属性**:
- 初始状态（小屏幕）: 侧边栏可能是隐藏的，使用 `display: none` 或 `width: 0` 来占用空间最小。
- 展开状态（大屏幕）: 通过媒体查询，改变 `display` 为 `block` 或 `flex` 并设置宽度。

.side-navigation {
  display: none; /* 初始隐藏 */
}

@media (min-width: 768px) {
  .side-navigation {
    display: flex; /* 展开时显示侧边栏 */
    width: 250px;
  }
}

2. **使用CSS过渡（Transition）**:
- 添加 `transition` 属性到侧边栏的宽度属性上，使得从隐藏到展开或者相反的过程更加平滑。

.side-navigation {
  transition: width 0.3s ease; /* 平滑过渡0.3秒，速度曲线可选 */
}

3. **利用伪元素**:
- 可以使用 `:target` 伪元素配合锚点，实现侧边栏的切换效果。

.side-navigation-target {
  display: flex;
  width: 0;
}

.side-navigation-target:target ~ .side-navigation {
  width: 250px;
}

在这个例子中，点击链接时 `.side-navigation-target` 的 `:target` 会触发 `.side-navigation` 的过渡效果。