讓我們來看看如何使用CSS的text-shadow屬性來創建真正的3D文本。你可能會認為text-shadow是能夠在文字後面塗上模糊的、漸變的顏色，你是對的！但就像box-shadow一樣，你可以控制陰影的模糊程度，包括將陰影全部帶入到文本中。結合逗號分隔陰影和堆疊陰影，這就是我們在這裡要做的CSS技巧。

text-shadow快速複習

語法如下

.el {
  text-shadow: [x-offset] [y-offset] [blur] [color];
}

• x-offset：必須，在x軸上的位置。正值將陰影向右移動，負值將陰影向左移動。
• y-offset：必須，在y軸上的位置。正值將陰影移到底部，負值將陰影移到頂部。
• blur：可選，陰影應該有多少模糊。值越高，陰影越柔和。默認值為0px（無模糊）。
• color：必須，陰影的顏色。

第一個陰影

讓我們通過僅添加一個陰影開始創建效果。陰影將向右推6px，向底部推6px：

:root {
  --text: #5362F6; /* Blue */
  --shadow: #E485F8; /* Pink */
}

.playful {
  color: var(--text);
  text-shadow: 6px 6px var(--shadow);
}

效果如下

用更多的陰影來創造深度

目前，我們所擁有的只是一個平坦的陰影——還沒有太多的3D效果。我們可以通過在同一元素中添加更多的 text-shadow 實例來創造深度，並將陰影與實際的文本連接起來。它所要做的就是用逗號分隔它們，讓我們從中間添加一個開始：

.playful {
  color: var(--text);
  text-shadow: 6px 6px var(--shadow),
               3px 3px var(--shadow);
}

效果如下

這已經有了一些進展，但是我們需要添加更多的陰影來讓它看起來更好。我們添加的步驟越多，最終結果就會越細緻。在此示例中，我們將從6px 6px開始，並以0.25px的增量逐漸減小，直到達到0。

.playful {
  color: var(--text);
  text-shadow: 
    6px 6px        var(--shadow), 
    5.75px 5.75px  var(--shadow), 
    5.5px 5.5px    var(--shadow), 
    5.25px 5.25px  var(--shadow),
    5px 5px        var(--shadow), 
    4.75px 4.75px  var(--shadow), 
    4.5px 4.5px    var(--shadow), 
    4.25px 4.25px  var(--shadow),
    4px 4px        var(--shadow),
    3.75px 3.75px  var(--shadow),
    3.5px 3.5px    var(--shadow),
    3.25px 3.25px  var(--shadow),
    3px 3px        var(--shadow),
    2.75px 2.75px  var(--shadow),
    2.5px 2.5px    var(--shadow),
    2.25px 2.25px  var(--shadow),
    2px 2px        var(--shadow),
    1.75px 1.75px  var(--shadow),
    1.5px 1.5px    var(--shadow),
    1.25px 1.25px  var(--shadow),
    1px 1px        var(--shadow),
    0.75px 0.75px  var(--shadow),
    0.5px 0.5px    var(--shadow),
    0.25px 0.25px  var(--shadow);
}

效果如下

使用Sass簡化代碼

結果可能看起來不錯，但是現在的代碼很難閱讀和編輯。如果要增大陰影，我們必須進行大量複製和粘貼才能實現。例如，將陰影大小增加到10px將意味著手動添加16個陰影。

這就是SCSS的作用，我們可以使用函數自動生成所有的陰影。

@function textShadow($precision, $size, $color){
  $value: null; 
  $offset: 0;
  $length: $size * (1 / $precision) - 1;

  @for $i from 0 through $length {
    $offset: $offset + $precision;
    $shadow: $offset + px $offset + px $color;
    $value: append($value, $shadow, comma);
  }

  @return $value;
}

.playful {
  color: #5362F6;
  text-shadow: textShadow(0.25, 6, #E485F8);
}

函數 textShadow 具有三個不同的參數：陰影的精度，大小和顏色。然後創建一個循環，使偏移量增加 $precision (在本例中為0.25px)，直到達到陰影的總大小（在本例中為6px）。

這樣，我們可以輕鬆增加陰影的大小或精度。例如，要創建一個10px大且增加0.1px的陰影，我們只需在代碼中進行更改即可：

text-shadow: textShadow(0.1, 10, #E485F8);

交替的顏色

我們想通過選擇其他顏色來使事情變得有趣。我們將文本分成多個字母，並用span包裹起來（可以手動完成，也可以使用React或JavaScript自動完成）。輸出將如下所示：

<div class="playful">
  <span>我</span>
  <span>的</span>
  <span>第</span>
  <span>一</span>
  <span>個</span>
  <span>陰</span>
  <span>影</span>
</div>

然後我們可以在span上使用 :th-child() 選擇器來改變文本和陰影的顏色。

.playful span:nth-child(2n) {
  color: #ED625C;
  text-shadow: textShadow(0.25, 6, #F2A063);
}

效果如下

如果我們在原始CSS中完成此操作，那麼最終將得到以下結果：

.playful span {
  color: var(--text);
  text-shadow: 
    6px 6px var(--shadow),
    5.75px 5.75px var(--shadow),
    5.5px 5.5px var(--shadow),
    5.25px 5.25px var(--shadow),
    5px 5px var(--shadow),
    4.75px 4.75px var(--shadow),
    4.5px 4.5px var(--shadow),
    4.25px 4.25px var(--shadow),
    4px 4px var(--shadow),
    3.75px 3.75px var(--shadow),
    3.5px 3.5px var(--shadow),
    3.25px 3.25px var(--shadow),
    3px 3px var(--shadow),
    2.75px 2.75px var(--shadow),
    2.5px 2.5px var(--shadow),
    2.25px 2.25px var(--shadow),
    2px 2px var(--shadow),
    1.75px 1.75px var(--shadow),
    1.5px 1.5px var(--shadow),
    1.25px 1.25px var(--shadow),
    1px 1px var(--shadow),
    0.75px 0.75px var(--shadow),
    0.5px 0.5px var(--shadow),
    0.25px 0.25px var(--shadow);
}

.playful span:nth-child(2n) {
  --text: #ED625C;
  --shadow: #F2A063;
}

我們可以用其他顏色和索引重複幾次，直到達到自己喜歡的圖案。

添加動畫

使用相同的原理，我們可以通過添加動畫來使文本更加生動。首先，我們要增加一個重複的動畫，讓每一個span都能上下移動。

.playful span {
  color: #5362F6;
  text-shadow: textShadow(0.25, 6, #E485F8);
  position: relative;
  animation: scatter 1.75s infinite;
}

我們可以通過使用 prefers-reduced-motion 媒體查詢來進一步優化此功能。這樣一來，不想要動畫的人就不會得到它。

.playful span {
  color: #5362F6;
  text-shadow: textShadow(0.25, 6, #E485F8);
  position: relative;
  animation: scatter 1.75s infinite;
}

@media screen and (prefers-reduced-motion: reduce) {
  animation: none;
}

然後，在每個 nth-child(n) 中添加一個不同的動畫延遲。

.playful span:nth-child(2n) {
  color: #ED625C;
  text-shadow: textShadow(0.25, 6, #F2A063);
  animation-delay: 0.3s;
}

效果如下