IMAGE & MEDIA
图片揭示动画Image Reveal (clip-path)
图片被一层"幕布"盖住，进场时从一侧擦开——比淡入有力得多。
效果预览
图片从左侧擦出 · inset 动画
适合用在哪
作品集封面、案例图、Hero 主视觉、编辑类页面。
容易踩的坑
- 首屏主图也等滚动触发揭示，LCP 被推迟，用户先看到一片空白。
- 同一屏内多张图同时擦出且方向不一，视觉混乱且削弱单张图的冲击力。
- 未在 prefers-reduced-motion 下直接显示图片，仍做 1s 擦除动画。
设计提示词 · Prompt
图片揭示动画（Image Reveal）：外层 overflow:hidden，图片层初始 clip-path:inset(0 100% 0 0)（完全裁掉），进入视口后过渡到 inset(0)——图片从左往右擦出，800-1200ms、cubic-bezier(.76,0,.24,1)（先快后慢的利落曲线）。进阶版：再叠一层同色"幕布"div 反向滑出（幕布比图片晚 100ms 消失），形成"拉开帷幕"的双层效果。图片同时可做 scale 1.3→1 的缓放，复合运镜。方向全站统一（都从左或都从下）。
Image Reveal: Outer wrapper with overflow:hidden; the image layer starts at clip-path: inset(0 100% 0 0) (fully clipped) and transitions to inset(0) once it enters the viewport — the image wipes in from left to right over 800-1200ms with cubic-bezier(.76,0,.24,1) (a crisp fast-then-slow curve). Advanced version: overlay a same-color "curtain" div that slides out in the opposite direction (the curtain disappears 100ms after the image), creating a two-layer "curtain opening" effect. The image can simultaneously ease from scale 1.3 to 1 for a compound camera move. Keep the direction consistent site-wide (all from the left or all from the bottom).
常见搭配
同一页面里经常和「图片揭示动画」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-imgreveal"> <span class="d-imgreveal__cap">图片从左侧擦出 · inset 动画</span> </div>