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

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

快速刷新文字陰影

語(yǔ)法是這樣的：

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

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

第一個(gè)陰影

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

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

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

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

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

這已經(jīng)到了某個(gè)地方，但是我們需要添加更多陰影才能使其看起來(lái)不錯(cuò)。我們添加的步驟越多，最終結(jié)果就越詳細(xì)。在此示例中，我們將從6PX 6PX開(kāi)始，并以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ǎn)化代碼

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

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

 @function textshadow（$ precision，$ size，$ color）{
 $ value：null;?
 $偏移：0;
 $長(zhǎng)度：$ 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）。

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

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

交替的顏色

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

 <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（）選擇器來(lái)更改其文本和陰影的顏色。

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

如果我們?cè)谙悴軨SS中做到了這一點(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á)到我們喜歡的模式：

獎(jiǎng)勵(lì)積分：添加動(dòng)畫(huà)

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

 .playful跨度{
 顏色：＃5362F6;
 文本陰影：textshadow（0.25，6，＃e485f8）;
 位置：相對(duì)；
 動(dòng)畫(huà)：散射1.75s無(wú)限；
}

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

 .playful跨度{
  顏色：＃5362F6;
  文本陰影：textshadow（0.25，6，＃e485f8）;
  位置：相對(duì)；
  動(dòng)畫(huà)：散射1.75s無(wú)限；
}

@Media屏幕和（預(yù)先減少的動(dòng)作：降低）{
  動(dòng)畫(huà)：無(wú)；
}

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

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

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