用CSS文本陰影創建嬉戲效果

讓我們看一下如何使用CSS文本陰影屬性來創建真正的3D外觀文本。您可能會認為文字陰影能夠在文本後面塗上模糊，梯度外觀的顏色，您將是對的！但是，就像盒子陰影一樣，您可以控制陰影有多模糊，包括將其完全降低到沒有模糊。結合逗號分開的陰影並堆疊它們，就是我們將在這裡做的CSS騙局。

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

快速刷新文字陰影

語法是這樣的：

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

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

第一個陰影

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

 ：根 {
 -Text：＃5362f6; /* 藍色的 */
  - 陰影：＃e485f8; /* 粉色的 */
}


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

用更多陰影創建深度

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

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

這已經到了某個地方，但是我們需要添加更多陰影才能使其看起來不錯。我們添加的步驟越多，最終結果就越詳細。在此示例中，我們將從6PX 6PX開始，並以0.25px增量逐漸構建，直到達到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簡化代碼

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

這就是SCSS出現的地方。我們可以使用函數來自動生成所有陰影。

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

函數文本莎多（TextShadow）採用三個不同的參數：陰影的精度，大小和顏色。然後，它創建一個循環，其中偏移量增加了$ PRICINE（在這種情況下為0.25px），直到達到陰影的總尺寸（在這種情況下為6px）。

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

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

交替的顏色

我們希望通過購買交替的顏色來稍微增添一點東西。我們將用包裹在跨度包裹的單個字母中（可以手動完成，也可以使用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中做到了這一點，那麼這就是我們最終得到的：

 .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;
}

我們可以用其他顏色和索引重複幾次，直到達到我們喜歡的模式：

獎勵積分：添加動畫

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

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

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

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

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

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

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

以上是用CSS文本陰影創建嬉戲效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！