通过 CSS，我们可以为网站增添一些有趣的动画，从而使其看起来更加精致。那么，何不试试文字波浪效果呢？🌊
在本教程中，我将指导你如何使用一个非常酷的属性——clip-path，来添加类似波浪的动画效果。
什么是 clip-path 属性？
根据 MDN 文档，clip-path CSS 属性创建了一个剪切区域，用于设置我们希望显示的元素部分。我们选择的区域内的部分可见，而其他部分将被隐藏。
该属性附带了一组基本形状，你可以用它们来“裁剪”你的元素：inset（矩形）、circle、ellipse、polygon 和 path（允许你根据 SVG 裁剪形状）。
HTML
为了实现这个效果，我将使用两个
元素：一个作为文字的轮廓，另一个作为“填充”，我们将使用 clip-path 属性对其进行动画处理。
<h2 class="border">wavy</h2>
<h2 class="wave">wavy</h2>
现在我们继续看 CSS！
CSS
先从显示的行为开始，选择一个字体、背景颜色，并将文字居中。
body {
background: #faf8f7;
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
font-family: "Work Sans", sans-serif;
}
接下来，我们将直接修改 h2 元素的属性，确保将位置设置为 absolute。这将使我们能够将一个元素放在另一个元素的正上方：
h2 {
font-size: 15vmin;
position: absolute;
}
现在，我们来设置文字的轮廓和颜色：
.border {
color: black;
text-shadow:
-1px -1px 0 white,
1px -1px 0 white,
-1px 1px 0 white,
1px 1px 0 white;
}
到目前为止，文字看起来像这样：
最后，我们将定义颜色以及一个波浪动画。在这个动画中，我们将使用 clip-path 属性来模拟运动：
.wave {
color: white;
animation: shift 3s ease-in-out infinite;
}
此时，你将看到完整的文字：
现在是最难的部分了！为了模拟波浪运动，我们将使用 polygon() CSS 函数来裁剪元素。通过调整它，我们将隐藏文字的部分。
裁剪的方式是通过定义百分比来移动元素的 x 和 y 轴。我们可以创建从简单到复杂的形状。幸运的是，有一些现有的工具可以帮助我们可视化不同的形状：可以看看 Bennett Feely 的 Clippy 工具。
添加动画的第一个实例，向你展示裁剪的工作原理：
@keyframes shift {
0%, 100% {
clip-path: polygon(0% 47%, 10% 48%, 33% 54%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
}
}
最后，添加动画的最后一部分：
50% {
clip-path: polygon(0% 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
}
结果如下：
