水波文字动画将使你的任何文字更有趣。在本文中,我们将学习如何创建 CSS 水波文本动画。这是一个简单的设计,但这种设计更有吸引力。如果你了解基本的 CSS,那么您可以轻松创建这种文本波浪动画。
在线演示地址:haiyong.site/demo/wave.h…
源码也可在文末免费获取
✨ 项目基本结构
目录结构如下:
├── 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 是如何工作的。
📑 完整源码下载⬇
一共两种下载方式
1.地址:
2.GitHub 地址(给个star ❤️ 吧):github.com/wanghao221/…\