裁剪揭示

利用 clip-path 属性实现元素从遮罩中揭示的动画效果，支持圆形扩散、菱形展开等多种形状。

实时预览

⭕ 圆形揭示

💎 菱形揭示

➡ 横向擦除

代码

css

/* 圆形揭示 */
.clip-circle {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.6s ease;
}

.clip-circle:hover {
  clip-path: circle(75% at 50% 50%);
}

/* 菱形揭示 */
.clip-diamond {
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  transition: clip-path 0.6s ease;
}

.clip-diamond:hover {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* 横向擦除 */
.clip-wipe {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s ease;
}

.clip-wipe:hover {
  clip-path: inset(0 0% 0 0);
}

html

<div class="clip-circle">圆形揭示</div>
<div class="clip-diamond">菱形揭示</div>
<div class="clip-wipe">横向擦除</div>

纯 CSS 实现的裁剪揭示过渡动画效果——通过 transition 属性在两个状态之间平滑切换。适用于页面元素显示/隐藏、弹窗、Tab 切换等场景。

快速使用

复制 CSS 代码到你的样式文件中
给目标元素添加初始状态样式（opacity: 0; transform: ... 等）
通过 JavaScript 添加/移除类名触发过渡动画
调整 transition-duration 和 transition-timing-function 控制动画效果

使用场景

页面路由切换：淡入/滑动过渡让页面跳转更流畅
弹窗/对话框：缩放弹出+遮罩淡入营造前后层级关系
内容展开/折叠：过渡动画让内容区域的显示隐藏更自然
Tab 切换：裁剪揭示或滑动效果让标签页切换有方向感

常见问题

Q: transition 和 animation 应该用哪个？ A: 简单规则：两个状态之间的过渡用 transition（hover、类切换）；复杂的多阶段动画用 animation（loading、背景动画、循环动画）。transition 代码更少、性能更好。

Q: 为什么我的 transition 没有动画效果？ A: 常见原因：1) 起始状态没有设置目标属性值；2) 属性值类型不匹配（如 auto 到具体值不会过渡）；3) display: none 到 display: block 不会过渡。用 opacity + visibility 代替 display 变化。

Q: 如何让过渡看起来更自然？ A: 使用 cubic-bezier() 自定义缓动曲线。进入动画用 ease-out（快→慢），离开动画用 ease-in（慢→快）。Material Design 推荐的缓动值：cubic-bezier(0.4, 0.0, 0.2, 1)。

浏览器兼容性

浏览器	兼容性
Chrome / Edge	✅ 完全支持
Firefox	✅ 完全支持
Safari	✅ 完全支持
移动端浏览器	✅ 完全支持
IE 11	⚠️ 基础 transition 可用，部分属性过渡不支持

使用说明

属性	说明
`circle(r at x y)`	圆形裁剪，r 为半径百分比
`polygon()`	多边形裁剪，定义顶点坐标
`inset()`	矩形内缩裁剪，实现擦除效果
`0%` → `75%`	圆形从无到覆盖大部分区域
`transition`	`clip-path` 支持平滑过渡

提示： clip-path 是可动画化的属性，支持 circle、ellipse、polygon、inset、path() 等形状。path() 还可以配合 SVG 路径实现任意形状揭示。

裁剪揭示 ​

实时预览 ​

代码 ​

快速使用 ​

使用场景 ​

常见问题 ​

浏览器兼容性 ​

使用说明 ​

📎 相关动画推荐