如图所示，这是一个很炫酷的文字波动效果，文字呈现出一个海浪波动的效果，这样的动画效果可以显著加强文案本身的含义。本文将解析如何使用纯CSS实现这个特效，基于这个动图可以分析出实现这个效果的主要功能要点：

1. 基础样式

首先我们从布局和基础样式开始。

通过上面的图片可以看出动画中的内容是由多个层叠在一起的效果，所以这里我们创建多个标签渲染文本。

<div id="ui">
  <div class="text">oceandiv>
  <div class="text">oceandiv>
  ...
div>

如果你使用了pug模板渲染，可以使用以下代码简化且方便更改文案：

- var $text = 'ocean';
#ui
  - for (i = 0; i < 26; i++)
    .text #{$text}

body CSS 代码：

body {
  background: rgba(10, 20, 40, 1);
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 500px;
}

2. 准备3D变换

div {
  will-change: transform;
}
#ui {
  transform-style: preserve-3d;
}

3. 文本样式与动画

接下来是文本的具体样式和动画定义。

#ui .text {
  position: absolute;
  font-size: $fontSize;
  color: #fff;
  line-height: $fontSize;
  font-family: 'Anton', sans-serif;
  padding: 20px 0;
  mix-blend-mode: screen;
  transform-style: preserve-3d;
  @for $i from 1 through 26 {
    // 循环生成样式
  }
}

4. Sass循环生成样式与动画

@for $i from 1 through 26 {
  $key: $i - 1;
  $param: 5;
  &:nth-child(#{$i}) {
    clip-path: polygon(
        -30% + ($key * $param) 0,
        -20% + ($key * $param) 0,
        20% + ($key * $param) 100%,
        0% + ($key * $param) 100%
    );
    animation: wave 2000ms $key * 200 - 10000ms ease-in-out infinite alternate;
  }
}

重点使用clip-path将元素裁剪为倾斜的块，通过下面的动图中删除元素更为直观的可以看到每个元素裁剪后渲染到页面的效果。

5. 定义动画

@keyframes wave {
  0% {
    transform: translate(-50%, -50%) scale(0.9) rotateX(20deg) rotateY(20deg) rotateZ(0deg);
    color: rgba(0, 30, 100, 1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.1) rotateX(0deg) rotateY(0deg) rotateZ(00deg);
    color: rgba(50, 230, 255, 1);
  }
}

通过检查元素可以更为直观的查看元素在实际动画过程中的形状变化。

6. 整合效果

将以上所有部分整合起来，你会看到一个充满动感的3D文本动画效果。通过给每个文本块设置不同的裁剪形状和动画延迟，营造出一种波浪般的视觉流动感。文本的颜色在动画过程中从深蓝色变为亮蓝色，增加了视觉层次和吸引力。

7. 最后

这个文本动画效果不仅展示了CSS的强大能力，还为Web设计师和开发者提供了新的创意空间。虽然现代浏览器大多支持CSS 3D变换和动画，使用时注意部分浏览器可能存在兼容性问题。

选择适合动画效果的字体和颜色组合，可以增强视觉效果。配置你喜欢的文案和颜色，有兴趣的可以尝试看看～

看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～