IMAGE & MEDIA
照片堆叠Photo Stack
几张照片像桌面上的实体照片一样错位叠放，悬停时散开。
效果预览
适合用在哪
个人主页、回忆/相册页、旅行博客、关于我们。
容易踩的坑
- 旋转角超过 ±10°，照片显得凌乱，主图内容也被转得难以辨认。
- 散开动画只靠 hover，触屏设备用户永远看不到被遮住的照片。
- 每张都用原尺寸大图，只露一角的底层照片白白消耗流量。
设计提示词 · Prompt
照片堆叠（Photo Stack）：绝对定位堆叠 2-4 张图，每张白色 4-6px 描边（拍立得感）+ 独立旋转角（-6°、4°、-1°）+ 投影；顶层图完整可见。悬停时各层向各自方向散开（rotate 加大 + translate 外移），像把照片摊开。配合轻微 hover 抖动或拿起效果更生动。图片选同主题（同一 trip、同一团队）。实体感是这个模式的全部——描边、旋转、投影一个都不能少，摆得整齐反而假。
Photo Stack: Absolutely position 2-4 stacked images, each with a 4-6px white border (Polaroid feel) + its own rotation angle (-6°, 4°, -1°) + a drop shadow; the top image is fully visible. On hover, each layer fans out in its own direction (larger rotate + outward translate), like spreading the photos out. A slight hover jiggle or pick-up effect makes it more lively. Choose images on the same theme (same trip, same team). Physicality is the whole point of this pattern — border, rotation and shadow are all required; arranging them neatly actually looks fake.
常见搭配
同一页面里经常和「照片堆叠」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-imgstack"> <div class="d-imgstack__p"></div> <div class="d-imgstack__p"></div> <div class="d-imgstack__p"></div> </div>