细节与特效 · 耐看的小细节
前后对比滑块Before / after slider
- 直观
- 可比较
- 参与感
一条竖线把改造前和改造后的两张图分开，拖动竖线就能看到变化过程。
什么时候用它
展示优化前后、修图前后、方案 A 与 B 时用它；两张图构图差异太大时对比会失真。
参数
drag tracks 1:1 · clip-path inset in sync · no transition on release
配方
不用过渡 on release前后对比滑块 → drag tracks 1:1 · clip-path inset in sync · no transition on release
给 AI 的一句话
做一组前后对比：两张图上下叠放，40px 宽的分隔手柄初始停在 50% 处，拖动时用 clip-path 实时裁剪上层图片，1:1 跟手，松手不加过渡。