CSS 如何实现文字镂空波浪效果？

Question

CSS 如何实现文字镂空波浪效果？

仓乃文 · Accepted Answer

利用 CSS 混合模式 mix-blend-mode 可以巧妙实现文字镂空的波浪效果，让波浪只在文字区域显示。

```css
.wave-text {
  background: #fff;
  color: #000;
  position: relative;
}

.wave-text::before,
.wave-text::after {
  content: ";
  position: absolute;
  border-radius: 45% 48% 43% 47%;
  background: rgba(3, 169, 244, .85);
  animation: rotate 10s infinite linear;
  mix-blend-mode: lighten;
}

.wave-text::after {
  border-radius: 43% 47% 44% 48%;
  animation-delay: 0.5s;
}

@keyframes rotate {
  0% { transform: translate(-50%, -50%) rotate(0); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
```

补充说明：
- mix-blend-mode: lighten 或 screen 都可以实现类似效果，过滤掉白底下的蓝色波浪，只在黑色字体上显示
- 波浪通过旋转的不规则圆形模拟，两个伪元素错开动画时间产生层次感
- 背景色和文字色需要配合混合模式使用，此方法依赖特定的颜色搭配（白底黑字）