写点什么

开源一夏 | 使用 CSS 的水波文本动画(免费代码)

  • 2022 年 8 月 11 日
    安徽
  • 本文字数:1099 字

    阅读完需:约 4 分钟

开源一夏 | 使用 CSS 的水波文本动画(免费代码)

水波文字动画将使你的任何文字更有趣。在本文中,我们将学习如何创建 CSS 水波文本动画。这是一个简单的设计,但这种设计更有吸引力。如果你了解基本的 CSS,那么您可以轻松创建这种文本波浪动画。


在线演示地址:https://haiyong.site/demo/wave.html

码上掘金地址:https://code.juejin.cn/pen/7127303458738143268


源码也可在文末免费获取

✨ 项目基本结构

目录结构如下:


├── 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.码上掘金地址:https://code.juejin.cn/pen/7127303458738143268

2.GitHub 地址(给个 star ❤️ 吧):https://github.com/wanghao221/moyu

发布于: 刚刚阅读数: 3
用户头像

公众号:海拥 2021.11.29 加入

【个人网站】haiyong.site 【联系方式】微信:wh18363 【软件技能】前端,Java,Python 【个人称号】InfoQ 写作社区签约作者,华为云享专家,CSDN原力作者,全栈领域优质创作者,掘金2021年度人气作者No.21

评论

发布
暂无评论
开源一夏 | 使用 CSS 的水波文本动画(免费代码)_开源_海拥(haiyong.site)_InfoQ写作社区