← 返回导航

擦除过渡效果

transitions
底层内容
擦除层
从左擦除
底层内容
擦除层
从右擦除
底层内容
擦除层
从上擦除
底层内容
擦除层
从下擦除

关键点

  • 擦除过渡通过一个遮罩层从一侧滑向另一侧，逐渐显示或隐藏内容
  • 遮罩层使用 clip-path 或 transform + overflow 控制可见区域的变化
  • 四方向变体通过改变遮罩的初始位置和移动方向实现（上下左右）
  • 内容层和遮罩层绝对定位重叠，遮罩移动时内容随之显隐，形成"擦除"视觉
  • 可配合渐变遮罩边缘，让擦除边界有渐隐过渡，更柔和高级

效果说明

内容通过遮罩层滑动擦除显示的过渡效果。利用 ::before 遮罩层的位移配合 overflow: hidden 裁剪，实现类似幻灯片切换的擦除动画。这里展示 4 种方向：从左、从右、从上、从下擦除。点击按钮触发动画。