标签：文字 rotate 效果 50% 波浪 background 镂空

纯 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;
}

也就是这样：

标签：文字,rotate,效果,50%,波浪,background,镂空
来源： https://www.cnblogs.com/hellofangfang/p/15348559.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。