讓我們看一下如何使用CSS文本陰影屬性來創(chuàng)建真正的3D外觀文本。您可能會認(rèn)為文字陰影能夠在文本后面涂上模糊，梯度外觀的顏色，您將是對的！但是，就像盒子陰影一樣，您可以控制陰影有多模糊，包括將其完全降低到?jīng)]有模糊。結(jié)合逗號分開的陰影并堆疊它們，就是我們將在這里做的CSS騙局。

到最后，我們將有一些看起來像這樣的東西：

快速刷新文字陰影

語法是這樣的：

 .el {
 文本陰影：[x-fartset] [y-offset] [blur] [color];
}

• X折：位于X軸上。正值將陰影向右移動，負(fù)值將陰影向左移動。 （必需的）
• Y-Orkset：Y軸上的位置。正值將陰影移至底部，負(fù)值將陰影移至頂部。 （必需的）
• 模糊：陰影應(yīng)該有多少模糊。值越高，陰影越柔軟。默認(rèn)值為0px（無模糊）。 （選修的）
• 顏色：陰影的顏色。 （必需的）

第一個(gè)陰影

讓我們開始通過僅添加一個(gè)陰影來創(chuàng)造效果。陰影將向右側(cè)向右側(cè)推動6px，底部將6px推到6px：

 ：根 {
 -Text：＃5362f6; /* 藍(lán)色的 */
  - 陰影：＃e485f8; /* 粉色的 */
}
?
.playful {
 顏色：var（ - 文本）;
 文本陰影：6px 6px var（ -  shadow）;
}

用更多陰影創(chuàng)建深度

目前，我們只有一個(gè)平坦的陰影 - 還沒有太多的3D。我們可以通過將更多文本陰影實(shí)例添加到同一元素來創(chuàng)建深度并將陰影連接到實(shí)際文本。它所需要的只是分類它們。讓我們從中間添加一個(gè)開始：

 .playful {
 顏色：var（ - 文本）;
 文本陰影：6px 6px var（ - 陰影），
        3PX 3PX var（ - 陰影）;
}

這已經(jīng)到了某個(gè)地方，但是我們需要添加更多陰影才能使其看起來不錯(cuò)。我們添加的步驟越多，最終結(jié)果就越詳細(xì)。在此示例中，我們將從6PX 6PX開始，并以0.25px增量逐漸構(gòu)建，直到達(dá)到0。

 .playful {
 顏色：var（ - 文本）;
 文字陰影：?
  6px 6px var（ - 陰影），?
  5.75px 5.75px var（ - 陰影），?
  5.5px 5.5px var（ - 陰影），?
  5.25px 5.25px var（ - 陰影），
  5px 5px var（ - 陰影），?
  4.75px 4.75px var（ - 陰影），?
 4.5px 4.5px var（ - 陰影），?
  4.25px 4.25px var（ - 陰影），
 4px 4px var（ - 陰影），
  3.75px 3.75px var（-shadow），
 3.5px 3.5px var（ - 陰影），
  3.25px 3.25px var（-shadow），
  3px 3px var（ - 陰影），
  2.75px 2.75px var（-shadow），
   2.5px 2.5px var（ - 陰影），
  2.25px 2.25px var（-shadow），
   2px 2px var（ - 陰影），
  1.75px 1.75px var（ - 陰影），
  1.5px 1.5px var（ - 陰影），
   1.25px 1.25px var（ - 陰影），
  1px 1px var（-shadow），
   0.75px 0.75px var（ - 陰影），
  0.5px 0.5px var（ - 陰影），
 0.25px 0.25px var（ - 陰影）;
}

用SASS簡化代碼

結(jié)果可能看起來不錯(cuò)，但是現(xiàn)在的代碼很難讀取和編輯。如果我們想使影子更大，我們必須進(jìn)行大量復(fù)制和粘貼才能實(shí)現(xiàn)它。例如，將陰影大小提高到10px將意味著手動增加16個(gè)陰影。

這就是SCSS出現(xiàn)的地方。我們可以使用函數(shù)來自動生成所有陰影。

 @function textshadow（$ precision，$ size，$ color）{
 $ value：null;?
 $偏移：0;
 $長度：$ size *（1 / $ precision）-1;
?
 @for $ i從0到$ length {
  $偏移：$ offset $ precision;
  $ shadow：$ offset px $ offse px $ color;
  $ value：append（$ value，$ shadow，comma）;
 }
?
 @return $ value;
}
?
.playful {
 顏色：＃5362F6;
 文本陰影：textshadow（0.25，6，＃e485f8）;
}

函數(shù)文本莎多（TextShadow）采用三個(gè)不同的參數(shù)：陰影的精度，大小和顏色。然后，它創(chuàng)建一個(gè)循環(huán)，其中偏移量增加了$ PRICINE（在這種情況下為0.25px），直到達(dá)到陰影的總尺寸（在這種情況下為6px）。

這樣，我們可以輕松地增加陰影的大小或精度。例如，要創(chuàng)建一個(gè)10px大的陰影，并以0.1px的形式增加，我們只需要在代碼中更改它：

文本陰影：textshadow（0.1，10，＃e485f8）;

交替的顏色

我們希望通過購買交替的顏色來稍微增添一點(diǎn)東西。我們將用包裹在跨度包裹的單個(gè)字母中（可以手動完成，也可以使用React或JavaScript自動化）。輸出看起來像這樣：

 <p aria-label="“洗手！”">
 <span aria-hidded="“" true> w </span> <span aria-hidded="“" true> a </span> <span aria aria-hidded="“" true> s </span> <span aria aria-hidded="“" true> h </span> h  ...
</p>

然后，我們可以在跨度上使用：nth-??child（）選擇器來更改其文本和陰影的顏色。

 .playful跨度：nth-??child（2n）{
 顏色：＃ED625C;
 文本陰影：textshadow（0.25，6，＃f2a063）;
}

如果我們在香草CSS中做到了這一點(diǎn)，那么這就是我們最終得到的：

 .playful跨度{
 顏色：var（ - 文本）;
 文字陰影：?
  6px 6px var（ - 陰影），
  5.75px 5.75px var（ - 陰影），
  5.5px 5.5px var（ - 陰影），
  5.25px 5.25px var（ - 陰影），
  5px 5px var（ - 陰影），
  4.75px 4.75px var（ - 陰影），
  4.5px 4.5px var（ - 陰影），
  4.25px 4.25px var（ - 陰影），
  4px 4px var（ - 陰影），
  3.75px 3.75px var（-shadow），
  3.5px 3.5px var（ - 陰影），
  3.25px 3.25px var（-shadow），
  3px 3px var（ - 陰影），
  2.75px 2.75px var（-shadow），
  2.5px 2.5px var（ - 陰影），
  2.25px 2.25px var（-shadow），
  2px 2px var（ - 陰影），
  1.75px 1.75px var（ - 陰影），
  1.5px 1.5px var（ - 陰影），
  1.25px 1.25px var（ - 陰影），
  1px 1px var（-shadow），
  0.75px 0.75px var（ - 陰影），
  0.5px 0.5px var（ - 陰影），
  0.25px 0.25px var（ - 陰影）;
}
?
.playful跨度：nth-??child（2n）{
 -Text：＃ED625C;
  - 陰影：＃f2a063;
}

我們可以用其他顏色和索引重復(fù)幾次，直到達(dá)到我們喜歡的模式：

獎勵積分：添加動畫

使用相同的原理，我們可以通過添加動畫來使文本更加栩栩如生。首先，我們將添加一個(gè)重復(fù)的動畫，使每個(gè)跨度上下移動：

 .playful跨度{
 顏色：＃5362F6;
 文本陰影：textshadow（0.25，6，＃e485f8）;
 位置：相對；
 動畫：散射1.75s無限；
}

我們可以使用偏愛的動作媒體查詢來進(jìn)一步優(yōu)化它。這樣，不想動畫的人們就不會得到它。

 .playful跨度{
  顏色：＃5362F6;
  文本陰影：textshadow（0.25，6，＃e485f8）;
  位置：相對；
  動畫：散射1.75s無限；
}

@Media屏幕和（預(yù)先減少的動作：降低）{
  動畫：無；
}

然后，在每個(gè)nth-child（n）中，我們將添加不同的動畫延遲。

 .playful跨度：nth-??child（2n）{
 顏色：＃ED625C;
 文本陰影：textshadow（0.25，6，＃f2a063）;
 動畫 - 延遲：0.3s;
}

以上是用CSS文本陰影創(chuàng)建嬉戲效果的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！