水波文字动画将使你的任何文字更有趣。在本文中，我们将学习如何创建 CSS 水波文本动画。这是一个简单的设计，但这种设计更有吸引力。如果你了解基本的 CSS，那么您可以轻松创建这种文本波浪动画。
✨ 项目基本结构
目录结构如下：
├── css │ └── style.css ├── js │ └── script.js └── index.html
水波文字动画 CSS
使用 HTML 添加文本，然后 通过 CSS 添加水动画。现在我通过将它添加到文本中来展示这种动画。在这里我们使用了简单的 CSS 而不是 SVG。希望上面的预览可以帮助您了解水波文字动画的工作原理。
第 1 步：
Wave文本动画的HTML
下面的代码是添加文本的 HTML 代码。在此处添加要添加到文本的动画。
<section> <div class="content"> <h2>Haiyong</h2> <h2>Haiyong</h2> </div> </section>
第 2 步：
水波文字动画的CSS
现在我已经使用 CSS 实现了这个 Wave Text Animation。首先我设计了网页，然后我设计了这里使用的文本。
最后，这个动画已经添加到文本中，使用clip-path: polygon，水波动画 4 秒。
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { display: flex; background: #000; min-height: 100vh; align-items: center; justify-content: center; } .content { position: relative; } .content h2 { color: #fff; font-size: 8em; position: absolute; transform: translate(-50%, -50%); } .content h2:nth-child(1) { color: transparent; -webkit-text-stroke: 2px #03a9f4; } .content h2:nth-child(2) { color: #03a9f4; animation: animate 4s ease-in-out infinite; } @keyframes animate { 0%, 100% { clip-path: polygon( 0% 45%, 16% 44%, 33% 50%, 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% ); } }
到这里，我们就完成了将CSS 波浪动画效果添加到网页中。希望使用上面的代码你已经了解了这个水波文本动画 CSS 是如何工作的。
