IMAGE & MEDIA
手风琴图片条Image Accordion Strip
一排垂直切片，悬停/点击某一条时它横向展开，其余压缩。用空间换焦点，像拉开的折扇。
效果预览
山海
城市
森林
街角
常见变体
调研收集需求与竞品
设计输出交互与视觉
开发前端实现与联调
上线数据复盘与迭代
文字卡片版Text Accordion Strip
把图片换成纯色或渐变色块，上面放短标题，更适合做分类导航或步骤展示。
山海
城市
森林
点击展开版Tap to Expand
触屏设备把 hover 改成 click，并且同时只能展开一项，避免误触。
适合用在哪
首页视觉冲击区、产品多角度展示、案例精选、旅行/建筑摄影集。
不适合：图片内容重要到不能被压缩的场景：人物脸部、产品关键文字、地图 UI 等被压窄后会丢失主体；此外，超过 6 条会让每条展开后也过窄，失去焦点意义。
和相近模式的区别
画廊网格Image Gallery Grid
画廊把所有图同时展开，适合横向扫读和挑选；手风琴图片条只展开一张、压缩其余，用空间换焦点，适合首屏视觉冲击或「精选 4-5 个案例」。不要在小屏上把两者都做到首屏，空间会打架。
滚动入场揭示Scroll Reveal
两者都常用在首屏向下过渡区：手风琴图片条靠「展开一张」制造节奏；滚动揭示靠元素淡入上浮引导视线。可以组合使用，但不要让同一张图同时做手风琴展开和滚动揭示，动画会互相抢戏。
容易踩的坑
- 切片数量超过 6 条后，压缩后的每条太窄，图片主体被裁得只剩边缘。
- 只用 hover 展开，触屏设备用户永远看不到展开效果。
- 多条同时展开，整个容器宽度被撑破，下方内容被挤出视口。
设计提示词 · Prompt
手风琴图片条（Image Accordion Strip）：容器 display:flex、高度 160-220px、宽度 100%。内部分成 3-6 个等宽条，默认 flex:1，过渡 500-700ms cubic-bezier(.22,1,.36,1)。激活条 flex:3 或固定宽度（如 55%），压缩条 flex:0 自动收缩。每条内部放 object-fit:cover 的背景图，并在悬停时显示标题遮罩（底部渐变 + 白字）。移动端改为点击展开，同时只能展开一项，或者改为横向滑动。
Image Accordion Strip: a horizontal row of 3-6 vertical slices sharing the full container width and a fixed height (160-220px). Each slice has flex:1 by default and transitions to flex:3 (or a fixed width like 55%) when active, over 500-700ms cubic-bezier(.22,1,.36,1). The active slice reveals its background image plus a bottom gradient caption with white text; inactive slices stay compressed. On mobile, switch to tap-to-expand with only one item open at a time, or replace with a horizontal swipe.
可复制 CSS
自包含的最小实现，粘贴到空白页面即可生效；类名可以按项目规范改名。
.accstrip { display: flex; height: 160px; border-radius: 12px; overflow: hidden; gap: 4px; }
.accstrip__item { flex: 1; position: relative; border-radius: 10px; transition: flex .55s cubic-bezier(.22,1,.36,1); overflow: hidden; }
.accstrip__item.is-on { flex: 3; }
.accstrip__item b { position: absolute; inset: auto 10px 10px 10px; color: #fff; font-weight: 700; font-size: 13px; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
/* 文字卡片版 */
.accstrip--text .accstrip__item { display: grid; place-items: center; background: var(--i-bg2); border: 1px solid var(--i-line); }
.accstrip--text .accstrip__item b { writing-mode: vertical-rl; position: static; color: var(--i-tx); text-shadow: none; font-size: 14px; }
.accstrip--text .accstrip__item.is-on b { writing-mode: horizontal-tb; }
.accstrip--text .accstrip__item span { display: none; }
.accstrip--text .accstrip__item.is-on span { display: block; text-align: center; color: var(--i-tx2); font-size: 10px; margin-top: 4px; }
/* 点击展开版 */
.accstrip--tap .accstrip__item { cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
.accstrip__item { transition: none; }
}
演示 HTML 结构
<div class="s d-accstrip"> <div class="d-accstrip__item" style="background:linear-gradient(135deg,#0891b2,#4f46e5)"><b>山海</b></div> <div class="d-accstrip__item is-on" style="background:linear-gradient(135deg,#f59e0b,#ef4444)"><b>城市</b></div> <div class="d-accstrip__item" style="background:linear-gradient(135deg,#10b981,#06b6d4)"><b>森林</b></div> <div class="d-accstrip__item" style="background:linear-gradient(135deg,#8b5cf6,#ec4899)"><b>街角</b></div> </div>
无障碍与性能
无障碍
- 触屏版给每条加 aria-expanded 和 aria-controls，展开状态变化时更新这些属性。
- hover 展开只作为增强，触屏设备必须提供 click fallback；不要依赖纯 hover 展示关键信息。
- 压缩状态的标题仍要可读：不要旋转文字到 90° 以上过小的字号，建议保持横向或用缩写。
性能
- 手风琴本质是 flex 过渡，浏览器会每帧重算 flex 值；容器宽度固定时给子项加 will-change: flex 可减少抖动，但不要在展开态结束后忘记移除。
- 图片使用 background-image 时预加载所有背景图，避免展开瞬间才加载出现空白。
- 移动端把切片数量控制在 3-5 条，超过 6 条时改用横向滚动或折叠列表。
常见问题
PC 上 hover 和 mobile 上 click 能共用一套 DOM 吗？
可以。用 @media (hover: hover) 写 hover 展开规则，用 @media (hover: none) 写 click 展开规则；JS 中监听 click 事件，在 hover 设备上默认不阻止 click，作为辅助触发。
展开时图片被拉宽失真怎么办？
把图片作为背景时 background-size: cover，或使用 img 时给外层加 overflow:hidden 并让图片 width:100%; height:100%; object-fit:cover。这样容器变宽图片只是露出更多区域，不会拉伸。
常见搭配
同一页面里经常和「手风琴图片条」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。