文字镂空波浪效果

纯 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,太糟糕了,仅仅这样是没法实现 -- 只是文字被镂空,文字内部才有波浪效果。

尝试使用让文字透明

我们要尝试让文字透明

  1. 可以使用 color: transparent 使文字透明
  2. 尝试使用 background-clip 实现

emmm,逐一尝试下。如果字体设置为透明,由于 <p> 设置了白色底色,字体颜色也就会变成白色。整体就是一幅白,失败。

那如果背景设置为黑色,并且设置 background-clip: text 呢?字体依然是黑色,波浪依旧无法进到镂空的字体中~

p {
  + background-clip: text;
}

也就是这样:

文字镂空波浪效果

上一篇:人工智能实践(1)-概述


下一篇:matlab的rotate函数的使用