clip-path 直译过来就是裁剪路径，是使用SVG或形状定义一个HTML元素的可见区域的方法。

原理类似于Photoshop中的形状工具，通过设置一个封闭的路径实现一种遮罩效果，封闭路径内部的区域正常显示，外部的区域隐藏，从而在方形的图层上绘制出形状各异的几何图形。

而在clip-path中，封闭的路径可以来自于外部引入的SVG矢量图形和预定义的几种形状，但更常用的还是通过复数个带有二维定位坐标的点相连来生成。

如果给这些定位点的坐标配合上@keyframes等制作动画，就可以制作出图片渐入渐出、路径动画、打字机、剪纸拼贴、几何变形等动画效果。

 

语法

url——SVG图形裁剪

/* 引用一个内联的 SVG 路径*/
clip-path: url(#c1);
/* 引用一个外部的 SVG 路径*/
clip-path: url(path.svg#c1);

 

inset——矩形裁剪

clip-path: inset(top right bottom left round round-radius);

最后两个参数是用来设置裁剪后的圆角，可以省略。示例如下:

clip-path: inset(20px 20px 2px 2px round 20px);

 

circle——圆形裁剪

clip-path: circle(radius at center-position-left center-position-top);

radius半径可以省略，默认是方形的内切圆，at center-position圆心位置也可以省略，则圆心位于方形的中心。示例如下：

clip-path: circle(40% at 40% 50%);

 

ellipse——椭圆裁剪

clip-path: ellipse(radius-left radius-top at center-position-left center-position-top);

与圆形裁剪类似，区别是可以控制x轴半径和y轴半径。示例如下：

clip-path: ellipse(40% 30% at 40% 50%);

 

polygon——多边形裁剪

clip-path: polygon(point-position-left poingt-position-top,...);

这是最常用的裁剪方式，可以设置多个顶点形成多种多样的形状。

以元素左上角为零点，就可以确定每个顶点的坐标。由于定位点之间是顺序连接的，因此需要注意书写顺序。

需要注意的是，如果用来制作动画时，前后的定位点数量必须相同。

示例如下：

上图是使用clip-path 生成器生成的，界面如下，有很多预设，也可以自己手动调整定位点的数量和位置，调整好后直接在下方复制clip-path代码即可使用。

 

兼容性

这个属性的兼容性比较一般，IE和Edge完全不支持，Firefox部分较旧的版本也不支持，Chrome、Safari和Opera需要使用-webkit-前缀支持此属性。

 

圆形路径生成动画

为了更好控制圆形路径的生长，使用了6个定位点，第6个点位于圆心位置，具体代码如下：

.circle {
  height: 150px;
  width: 150px;
  border: 3px solid lightgreen;
  border-radius: 50%;
  transform: rotate(45deg);
}

.circle:hover {
  animation: round 3s linear infinite;
}

@keyframes round{
  0%{
    clip-path: polygon(
      0% 0%,
      0% 0%,
      0% 0%,
      0% 0%,
      0% 0%,
      50% 50%
    );
  }
  25%{
    clip-path: polygon(
      0% 0%,
      100% 0%,
      100% 0%,
      100% 0%,
      100% 0%,
      50% 50%
    );
  }
  50%{
    clip-path: polygon(
      0% 0%,
      100% 0%,
      100% 100%,
      100% 100%,
      100% 100%,
      50% 50%
    );
  }
  75%{
    clip-path: polygon(
      0% 0%,
      100% 0%,
      100% 100%,
      0% 100%,
      0% 100%,
      50% 50%
    );
  }
  100%{
    clip-path: polygon(
      0% 0%,
      100% 0%,
      100% 100%,
      0% 100%,
      0% 0%,
      50% 50%
    );
  }
}

这是最近学习B站一键三连动画效果时碰到的技巧，本着挖了坑就得埋的精神额外找了些教程学习，整理完发现使用起来也很简单。

 

当你在一件事情上表现得犹豫不决时，

不妨问自己一个永恒的问题，

我还可以活多久呢？

——阿乙