1. Clip-path概述
Clip-path是一种CSS属性，它可以通过 SVG（可缩放矢量图形） 路径或基本形状创建一个不规则的图形区域，然后将该区域内的内容显示出来，而将区域外的内容隐藏或裁剪掉。
在 Web 设计中，我们通常使用它来截取被裁剪元素的某个部分，以形成想要的形状、轮廓或者边框等效果。它通常用于实现一些特殊的效果，例如：按钮效果、倒三角箭头、裁剪图片等。
2. Clip-path的使用
2.1 基本用法
我们可以通过 clip-path 属性来为元素设置一个路径值，表示所要显示的内容的区域路径。
.box {
/* 显示区域为圆形，半径为50px */
clip-path: circle(50px);
}
2.2 适用于基本形状
clip-path 还可以设置为基本形状，例如：圆形、矩形、多边形等等。
.box {
/* 显示区域为矩形(宽800，高600)，左上角为(100,100)的点 */
clip-path: rectangle(100px, 700px, 700px, 100px);
/* 显示区域为五边形 */
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0% 100%);
}
2.3 适用于自定义路径
使用自定义路径可以创建完全自定义的形状，clip-path 提供了 polygon()、path() 函数分别用于定义一个多边形和一个自定义的 SVG 路径。
.box {
/* 显示区域为自定义的Svg路径 */
clip-path: path('M150 0 L 75 200 L 225 200 Z');
}
3. 实现按钮流动边框动画
3.1 实现思路
当鼠标在按钮上悬停时，我们需要给按钮加上一个流动的边框效果。
实现流动的边框动画一般有以下两个思路：
使用多个元素模拟边框，然后利用animation进行动画控制。
使用 clip-path 属性实现不规则形状，然后通过 "dasharray" 和 "dashoffset" 来控制边框的动画
下面我们采用第二种方案来实现按钮流动边框动画效果。
3.2 实现步骤
首先我们需要创建一个按钮（html+css）：
<button class="btn">按钮</button><style>
.btn {
position: relative;
margin: 100px;
padding: 10px 30px;
font-size: 22px;
color: #fff;
background-color: #00a0e9;
border: 0;
outline: none;
cursor: pointer;
overflow: hidden;
transition: all 0.3s ease-out;
}
.btn span {
position: relative;
z-index: 1;
}
</style>
上述代码中，我们为按钮设置了一些基本样式。
接下来，我们给按钮加上一个伪元素，并为该伪元素设置一个类名 ".flow-box"，用于实现流动边框动画
.btn::before {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
border-radius: 5px;
box-sizing: border-box;
transition: all 0.3s cubic-bezier(0.02, 0.71, 0.46, 1); /* 设置过渡动画效果 */
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
border: 2px solid #fff;
pointer-events: none;
}
.btn:hover::before {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.flow-box {
stroke-dasharray: 1300; /* 设置虚线的总长度 */
stroke-dashoffset: 1300; /* 设置虚线的起点，等于虚线总长度时，边框效果消失 */
animation: flow 5s ease-in-out infinite; /* 设置流动效果动画 */
}
@keyframes flow {
0% {
stroke-dashoffset: 1300; /* 起点 */
}
100% {
stroke-dashoffset: 0; /* 终点，等于虚线总长度1400时 */
}
}
上述代码中，我们使用 clip-path 属性来创建一个不规则形状，然后利用 stroke-dasharray 和 stroke-dashoffset 属性来控制边框的动画效果。最后，我们通过对 .flow-box 类名设置一个动画，来实现流动的边框动效果。
4. 总结
在本文中，我们了解了 clip-path 的基本用法以及如何使用这个属性来实现不规则形状的效果。同时，我们也详细地讲解了如何使用 clip-path 属性来实现一个按钮流动边框动画效果。希望对读者有所启发和帮助。