卡片擦除揭示 4 种特效（左右擦除/上下擦除/圆形揭示 CSS 源码）

效果演示（真实可交互）

把鼠标移到卡片上，上层封面被”擦除”，露出下层内容。四种玩法分别用 transform 与 clip-path 实现，移出时封面平滑回归。

完整代码

HTML 结构：每张卡片包含两层 .sw-face，.sw-front 是封面（z-index 更高），.sw-back 是被揭示的内容层：

<div class="sw-card">
  <div class="sw-face sw-front"><span>🔒</span><em>悬停揭开</em></div>
  <div class="sw-face sw-back"><span>🎁</span><em>惊喜内容</em></div>
</div>
<!-- 加 sw-v / sw-diag / sw-circle 切换玩法 -->

核心 CSS：

.sw-card { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.sw-face { position: absolute; inset: 0; }
.sw-front {
  background: linear-gradient(135deg, #1c2029, #2a3040);
  z-index: 2;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1),
              clip-path .55s cubic-bezier(.22, .61, .36, 1);
}
.sw-back { z-index: 1; }

/* ① 左右擦除 */
.sw-card:hover .sw-front { transform: translateX(-100%); }
/* ② 上下擦除 */
.sw-card.sw-v:hover .sw-front { transform: translateY(-100%); }
/* ③ 斜向擦除 */
.sw-card.sw-diag:hover .sw-front { transform: translate(-100%, -100%); }

/* ④ 圆形揭示：clip-path 圆从中心扩散 */
.sw-circle .sw-front { clip-path: circle(0% at 50% 50%); }
.sw-card.sw-circle:hover .sw-front { clip-path: circle(141.4% at 50% 50%); }

参数说明

兼容性与性能

• 纯 CSS 实现；clip-path: circle() 需要 Chrome 55+ / Safari 9.1+ / Firefox 54+，现代浏览器无压力
• transform 与 clip-path 都是合成器属性，动画不触发重排，性能开销小
• 大面积 clip-path 动画在低端 Android 设备上可能略卡，可换用滑出方向版本
• 触屏设备无 hover 态，首次点击触发后封面会停留，适合展示型场景

常见问题

Q: 擦除后下层内容看不到，是什么原因？ 检查两层 .sw-face 是否都有 position: absolute; inset: 0;，且 .sw-front 的 z-index 高于 .sw-back；另外 .sw-card 需要 overflow: hidden 裁掉滑出的封面。

Q: 想改成对角线固定角度而不是 45°？ translate(-100%, -100%) 是 45° 直线；要自定义角度，把位移改为 translate(calc(-100% - 20px), -10%) 之类的组合，或用 rotate 配合滑出。

Q: 圆形揭示的 141.4% 是怎么来的？ 这是矩形对角线（√2 ≈ 1.414）的比例，圆半径达到对角线的 141.4% 时才能完全覆盖卡片；圆心里任意位置都要保证这个百分比够大。

Q: 内容层有交互元素，会被封面挡住吗？ 封面存在时 z-index 更高，天然挡住点击；滑出后事件会落到下层。若需要下层按钮提前可点，可在 hover 时给封面加 pointer-events: none。