波浪镂空文字

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

前言

今天来使用纯 css 实现一个波浪渐变的文字效果。 并且通过css的混合属性来进行镂空设计，将波浪与文字重合的部分变为透明。

实现

实现过程

波浪动效

前端中实现波浪效果的方法有很多种，本文使用的主要是纯css的方式，通过实现两个不同的椭圆，然后进行旋转，遮挡住我们需要的盒子的上面部分，那么下面部分就能够形成波浪一样的形状。

.wave-box::before,
    .wave-box::after {
      content: "";
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0) rotateZ(0);
      min-width: 1000px;
      min-height: 1000px;
      border-radius: 45%;
      background-color: #fff;
      bottom: 25%;
      z-index: -1;
      animation: rotale 10s linear infinite;
    }

    .wave-box::after {
      bottom: 20%;
      opacity: 0.5;
      border-radius: 47%;
    }

    @keyframes rotale {
      0% {
        transform: translate(-50%, -2%) rotateZ(0deg);
      }
      50% {
        transform: translate(-50%, 4%) rotateZ(180deg);
      }
      100% {
        transform: translate(-50%, -2%) rotateZ(360deg);
      }
    }

文字制作

接着在波浪中加入文字，并且运用css提供给我们的图层混合属性 mix-blend-mode 来进行背景波浪和文字的混合，并且把属性值设为 exclusion 相互排除，这样我们就可以通过调整设定的颜色，来令波浪和文字重合的部分颜色改变为白色，相比较白色的背景，就会变得透明，而两个圆形混合的部分，就变为和文字相同的颜色。

 .wave-box::before,
    .wave-box::after {
      content: "";
      position: absolute;
      bottom: 50%;
      left: 50%;
      width: 4000px;
      height: 4000px;
      border-radius: 45%;
      transform: translate(-50%, 0) rotateZ(0);
      background-color: aqua;
      animation: rotate 10s infinite linear;
      z-index: 1;
      mix-blend-mode: exclusion;
    }

    .wave-box::after {
      background-color: balck;
      border-radius: 47%;
      bottom: 45%;
      opacity: 0.5;
    }

到这里我们就能够实现一个随着波浪改变的镂空文字效果了。

总结

本文简单的使用了波浪特效和css混合模式来生成了一个镂空效果的文字，整体的实现比较简单，可能比较难的点在于css 的 mix-blend-mode 属性上。