纯 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;
}
也就是这样: