Clip-Path 动画

clip-path 动画是一种利用 CSS 的裁剪路径属性实现的动态视觉效果，可以用于元素形状的平滑过渡（如圆形变方形、多边形转换等）

基本原理:

clip-path 使用一个几何图形或 SVG 路径来裁剪元素的可见区域。通过在不同状态（如 :hover）或 CSS 关键帧动画中修改 clip-path 的值，可实现形状过渡动画。

.element {
  clip-path: [shape-function]; /* 初始裁剪形状 */
  transition: clip-path 0.5s ease-in-out; /* 补间动画 */
}

.element:hover {
  clip-path: [new-shape-function]; /* 目标裁剪形状 */
}