【CSS】681- 使用CSS文字陰影創(chuàng)建有趣的效果
來源：https://css-tricks.com，
作者：Sarah Fossheim，
翻譯：前端外文精選
讓我們來看看如何使用CSS的text-shadow屬性來創(chuàng)建真正的3D文本。你可能會認為text-shadow是能夠在文字后面涂上模糊的、漸變的顏色，你是對的！但就像box-shadow一樣，你可以控制陰影的模糊程度，包括將陰影全部帶入到文本中。結(jié)合逗號分隔陰影和堆疊陰影，這就是我們在這里要做的CSS技巧。
text-shadow快速復習
語法如下：
.el {
text-shadow: [x-offset] [y-offset] [blur] [color];
}
x-offset：在x軸上的位置。正值將陰影向右移動，負值將陰影向左移動。（必須）y-offset：在y軸上的位置。正值將陰影移到底部，負值將陰影移到頂部。（必須）blur：陰影應該有多少模糊。值越高，陰影越柔和。默認值為0px（無模糊）。（可選的）color：陰影的顏色。（必須）
第一個陰影
讓我們通過僅添加一個陰影開始創(chuàng)建效果。陰影將向右推6px，向底部推6px：
:root {
--text: #5362F6; /* Blue */
--shadow: #E485F8; /* Pink */
}
.playful {
color: var(--text);
text-shadow: 6px 6px var(--shadow);
}
用更多的陰影來創(chuàng)造深度
目前，我們所擁有的只是一個平坦的陰影——還沒有太多的3D效果。我們可以通過在同一元素中添加更多的 text-shadow 實例來創(chuàng)造深度，并將陰影與實際的文本連接起來。它所要做的就是用逗號分隔它們，讓我們從中間添加一個開始：
.playful {
color: var(--text);
text-shadow: 6px 6px var(--shadow),
3px 3px var(--shadow);
}
這已經(jīng)有了一些進展，但是我們需要添加更多的陰影來讓它看起來更好。我們添加的步驟越多，最終結(jié)果就會越細致。在此示例中，我們將從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簡化代碼
結(jié)果可能看起來不錯，但是現(xiàn)在的代碼很難閱讀和編輯。如果要增大陰影，我們必須進行大量復制和粘貼才能實現(xiàn)。例如，將陰影大小增加到10px將意味著手動添加16個陰影。
這就是SCSS的作用，我們可以使用函數(shù)自動生成所有的陰影。
@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);
}
函數(shù) textShadow 具有三個不同的參數(shù)：陰影的精度，大小和顏色。然后創(chuàng)建一個循環(huán)，使偏移量增加 $precision (在本例中為0.25px)，直到達到陰影的總大小（在本例中為6px）。
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中完成此操作，那么最終將得到以下結(jié)果：
.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媒體查詢來進一步優(yōu)化此功能。這樣一來，不想要動畫的人就不會得到它。
.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;
}
回復“加群”與大佬們一起交流學習~
點擊“閱讀原文”查看70+篇原創(chuàng)文章
