前言
众所周知，掘金是一个技(摸)术(鱼)社区，我一直在沸点快乐的学(摸)习(鱼)，那么作为一个合格的沸人。不仅要掌握熟练的学(摸)习(鱼)技术，我们也要适当的往里面灌点水。
下面就像我们简单往掘金里灌点水吧--其实就是实现一个简单的水波动画特效
代码块
实现过程
- 首先我们准备两个普通的文字
JueJin
<div cLass="container"> <h2> JueJin</h2> <h2> JueJin</h2> </div>
网络异常，图片无法展示
|
- 然后我们设置一下，背景颜色和文字的样式，并将两个文字重叠到一起
.container { position: relative; } .container h2 { position: absolute; font-size: 8em; transform: translate(-50%, -50%); }
网络异常，图片无法展示
|
3.然后我们分别对两个文字进行处理
- 第一个文字我们作为一个原始的图形进行完全展示，将字体变成透明并描边
网络异常，图片无法展示
|
- 第二个字体是我们实现水波纹动画的关键。我们使用
clip-path对文字进行裁剪，并实现动画过度
.container h2:nth-child(2) { color: #03a9f4; animation: animate 4s ease-in-out infinite; } @keyframes animate { 0%, 100% { clip-path: polygon(1% 65%, 32% 75%, 44% 75%, 69% 70%, 86% 62%, 97% 57%, 100% 54%, 108% 99%, 3% 100%, 1% 100%); } 50% { clip-path: polygon(1% 73%, 24% 74%, 40% 74%, 66% 59%, 87% 50%, 97% 45%, 108% 43%, 100% 99%, 3% 100%, 1% 100%); } }
网络异常，图片无法展示
|
最后，为了对比好看 我们将背景色设置成黑色的。
网络异常，图片无法展示
|
至此，我们就完成了简单的往掘金灌水-水波动画
结语
这是由一个非常非常不专业的后端混子完成的，仅供大家一乐~
希望大家都可以在掘金快乐的学习(摸鱼)~~
