如圖所示，這是一個很炫酷的文字波動效果，文字呈現出一個海浪波動的效果，這樣的動畫效果可以顯著加強文案本身的含義。本文將解析如何使用純CSS實現這個特效，基於這個動圖可以分析出實現這個效果的主要功能要點：

• 整體呈現出3D文案效果
• 文案呈現波動狀態動畫
• 文案有漸變顏色的變化
• 文案在變化過程中有傾斜分層的效果

1. 基礎樣式

首先我們從佈局和基礎樣式開始。

通過上面的圖片可以看出動畫中的內容是由多個層疊在一起的效果，所以這裏我們創建多個標籤渲染文本。

<div id="ui">
  <div class="text">ocean</div>
  <div class="text">ocean</div>
  ...
</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;
}

• 背景色：rgba(10, 20, 40, 1) 設定了一個深色的背景，為文本提供了清晰的對比。
• 高度與視口：height: 100vh; 使頁面高度充滿整個視口高度，overflow: hidden; 隱藏了超出視口的內容。
• 彈性盒子佈局：display: flex; 結合 justify-content: center; 和 align-items: center; 將內容水平和垂直居中。
• 透視效果：perspective: 500px; 在body上設置透視效果，為子元素的3D變換提供視覺深度。

2. 準備3D變換

div {
  will-change: transform;
}

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

• will-change: transform; 告知瀏覽器該元素即將進行變換，這有助於瀏覽器優化渲染性能。
• transform-style: preserve-3d; 在#ui元素上啓用，確保其子元素的3D變換被保留，而不是被壓平顯示。

3. 文本樣式與動畫

接下來是文本的具體樣式和動畫定義。

• 混合模式：mix-blend-mode: screen; 使文本顏色與背景色以屏幕混合模式混合，增加視覺效果。
• 3D變換保留：再次設置transform-style: preserve-3d;。

#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循環生成樣式與動畫

• 循環：使用Sass的@for循環，為每個.text的子元素生成獨特的樣式。
• clip-path：使用clip-path屬性為每個子元素定義不同的裁剪形狀，通過計算每個元素的$key（索引減1）和$param（設為5）來調整裁剪路徑的座標。
• 動畫：每個子元素都應用了一個名為wave的動畫，動畫時長根據$key計算，實現不同步的動畫效果。

@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);
  }
}

• @keyframes wave 定義了一個名為wave的動畫，該動畫通過變換和顏色變化來創建波浪效果。
• 起始狀態（0%）：元素首先被移動到其父元素的中心通過translate(-50%, -50%)，然後稍微縮小scale(0.9)並繞X軸和Y軸旋轉rotateX(20deg) rotateY(20deg)，顏色設置為深藍色rgba(0, 30, 100, 1)。
• 結束狀態（100%）：元素放大scale(1.1)，旋轉角度歸零rotateX(0deg) rotateY(0deg) rotateZ(0deg)，顏色變為亮藍色rgba(50, 230, 255, 1)。

通過檢查元素可以更為直觀的查看元素在實際動畫過程中的形狀變化。

6. 整合效果

將以上所有部分整合起來，你會看到一個充滿動感的3D文本動畫效果。通過給每個文本塊設置不同的裁剪形狀和動畫延遲，營造出一種波浪般的視覺流動感。文本的顏色在動畫過程中從深藍色變為亮藍色，增加了視覺層次和吸引力。

7. 最後

這個文本動畫效果不僅展示了CSS的強大能力，還為Web設計師和開發者提供了新的創意空間。雖然現代瀏覽器大多支持CSS 3D變換和動畫，使用時注意部分瀏覽器可能存在兼容性問題。

選擇適合動畫效果的字體和顏色組合，可以增強視覺效果。配置你喜歡的文案和顏色，有興趣的可以嘗試看看～

看完本文如果覺得有用，記得點個贊支持，收藏起來説不定哪天就用上啦～

專注前端開發，分享前端相關技術乾貨，公眾號：南城大前端（ID: nanchengfe）