纯 CSS 实现波浪效果
在进入正题前，我们先复习下，使用 CSS 实现波浪，如果不是在镂空的文字内，而是在一个div容器内，可以使用滚动大圆的方式，类似于这样：
容器应用overflow: hidden，就能得到这样的效果：
对这个技巧还不理解，可以猛击这篇文章：纯 CSS 实现波浪效果！
如何在文字中应用此效果
OK，回归正题，那么如何在文字中应用此效果呢？
问题出在哪里呢？
我们首先尝试下，白底黑字，加上该效果：
<div class="g-container"><p>TEXT WAVE</p> </div>
核心的 CSS 伪代码如下：
p {background: #fff;color: #000; &::before, &::after { content: ""; position: absolute; border-radius: 45% 48% 43% 47%; background: rgba(3, 169, 244, .85); animation: rotate 10s infinite linear; } &::after { border-radius: 43% 47% 44% 48%; animation: rotate 10s infinite .5s linear; } } @keyframes rotate { 0% { transform: translate(-50%, -50%) rotate(0); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }
效果大概是这样：
当然，我们也可以把它放置到文字层下面，更直观点：
p {...&::before,&::after {...+ z-index: -1; }}
Oh，太糟糕了，仅仅这样是没法实现 -- 只是文字被镂空，文字内部才有波浪效果。
尝试使用让文字透明
我们要尝试让文字透明
可以使用color: transparent使文字透明尝试使用background-clip实现
emmm，逐一尝试下。如果字体设置为透明，由于<p>设置了白色底色，字体颜色也就会变成白色。整体就是一幅白，失败。
那如果背景设置为黑色，并且设置background-clip: text呢？字体依然是黑色，波浪依旧无法进到镂空的字体中~
p {+ background-clip: text;}
也就是这样：
