上篇文章我們探討了如何利用CSS背景屬性創(chuàng)建炫酷的懸停效果。這次，我們將重點(diǎn)關(guān)注CSS text-shadow 屬性，探索更多有趣的懸停效果。你可能想知道，為文本添加陰影怎么可能產(chǎn)生炫酷的效果，但關(guān)鍵在于：我們實(shí)際上不會(huì)為這些文本懸停效果創(chuàng)建任何陰影。

炫酷懸停效果系列：

1. 利用背景屬性實(shí)現(xiàn)炫酷懸停效果
2. 利用CSS文本陰影實(shí)現(xiàn)炫酷懸停效果（您當(dāng)前位置！）
3. 利用背景裁剪、蒙版和3D實(shí)現(xiàn)炫酷懸停效果

text-shadow 但沒有文本陰影？

讓我通過以下演示中我們將構(gòu)建的懸停效果來消除混淆：

不用看代碼，你們中的許多人會(huì)直覺地認(rèn)為，對(duì)于每個(gè)懸停效果，我們都會(huì)復(fù)制文本，然后獨(dú)立地對(duì)其進(jìn)行動(dòng)畫處理?，F(xiàn)在，如果你查看代碼，你會(huì)發(fā)現(xiàn)HTML中沒有任何文本被實(shí)際復(fù)制。你有沒有注意到CSS中沒有使用content: "text"？

文本圖層完全是用text-shadow 創(chuàng)建的！

懸停效果 #1

讓我們分解CSS代碼：

.hover-1 {
  line-height: 1.2em;
  color: #0000;
  text-shadow: 
    0 0 #000, 
    0 1.2em #1095c1;
  overflow: hidden;
  transition: .3s;
}
.hover-1:hover {
  text-shadow: 
    0 -1.2em #000, 
    0 0 #1095c1;
}

首先要注意的是，為了隱藏實(shí)際文本，我將實(shí)際文本的顏色設(shè)置為透明（使用#0000）。之后，我使用text-shadow 創(chuàng)建兩個(gè)陰影，每個(gè)陰影只定義兩個(gè)長度值。這意味著沒有模糊半徑，從而產(chǎn)生清晰銳利的陰影，有效地產(chǎn)生了具有指定顏色的文本副本。

這就是為什么我在引言中聲稱這里沒有陰影的原因。我們所做的與其說是“經(jīng)典”陰影，不如說是復(fù)制文本的一種簡單方法。

我們有兩個(gè)文本圖層，我們在懸停時(shí)移動(dòng)它們。如果我們隱藏溢出內(nèi)容，則重復(fù)的文本將不可見，移動(dòng)會(huì)使它看起來像是實(shí)際文本被其他文本替換了。這是使本文中所有示例都能正常工作的主要技巧。

讓我們優(yōu)化代碼。我多次使用值1.2em 來定義陰影的高度和偏移量，使其成為CSS自定義屬性（我們稱之為--h）的理想候選者：

.hover-1 {
  --h: 1.2em;

  line-height: var(--h);
  color: #0000;
  text-shadow: 
    0 0 #000, 
    0 var(--h) #1095c1;
  overflow: hidden;
  transition: .3s;
}
.hover-1:hover {
  text-shadow: 
    0 calc(-1 * var(--h)) #000, 
    0 0 #1095c1;
}

我們還可以進(jìn)一步使用更多calc() 計(jì)算來簡化代碼，以便我們只使用一次text-shadow。（我們在上一篇文章中也做了同樣的事情。）

.hover-1 {
  --h: 1.2em;   

  line-height: var(--h);
  color: #0000;
  text-shadow: 
    0 calc(-1*var(--_t, 0em)) #000, 
    0 calc(var(--h) - var(--_t, 0em)) #1095c1;
  overflow: hidden;
  transition: .3s;
}
.hover-1:hover {
  --_t: var(--h);
}

如果你想知道為什么我要在--_t 變量中添加下劃線，這只是我用來區(qū)分用戶可以更新的控制效果的變量（如--h）和僅用于優(yōu)化目的、不需要更改的內(nèi)部變量（如--_t）的命名約定。換句話說，下劃線是變量名的一部分，沒有任何特殊含義。

我們還可以更新代碼以獲得相反的效果，其中重復(fù)的文本從頂部滑入：

我們只對(duì)text-shadow 屬性做了一個(gè)小的更新——我們沒有觸及其他任何東西！

懸停效果 #2

對(duì)于這個(gè)效果，我們將動(dòng)畫化兩個(gè)屬性：text-shadow 和 background。關(guān)于text-shadow，我們?nèi)匀幌裰暗氖纠粯佑袃蓚€(gè)圖層，但這次我們將只移動(dòng)其中一個(gè)，同時(shí)在交換期間將另一個(gè)圖層的顏色設(shè)置為透明。

.hover-2 {
  /* 高度 */
  --h: 1.2em;

  line-height: var(--h);
  color: #0000;
  text-shadow: 
    0 var(--_t, var(--h)) #fff,
    0 0 var(--_c, #000);
  transition: 0.3s;
}
.hover-2:hover {
  --_t: 0;
  --_c: #0000;
}

在懸停時(shí)，我們將白色文本圖層移動(dòng)到頂部，同時(shí)將另一個(gè)圖層的顏色更改為透明。為此，我們添加了一個(gè)應(yīng)用于漸變的background-size 動(dòng)畫：

最后，我們添加overflow: hidden 以使動(dòng)畫僅在元素的邊界內(nèi)可見：

.hover-2 {
  /* 高度 */
  --h: 1.2em;

  line-height: var(--h);
  color: #0000;
  text-shadow: 
    0 var(--_t,var(--h)) #fff,
    0 0 var(--_c, #000);
  background: 
    linear-gradient(#1095c1 0 0) 
    bottom/100% var(--_d, 0) no-repeat;
  overflow: hidden;
  transition: 0.3s;
}
.hover-2:hover {
  --_d: 100%;
  --_t: 0;
  --_c: #0000;
}

我們在這里所做的是結(jié)合CSS text-shadow 和 background 屬性來創(chuàng)建炫酷的懸停效果。此外，我們能夠使用CSS變量來優(yōu)化代碼。

如果背景語法看起來很奇怪，我強(qiáng)烈建議你閱讀我之前的文章。下一個(gè)懸停效果也依賴于我在那篇文章中詳細(xì)介紹的動(dòng)畫。除非你熟悉CSS背景技巧，否則我建議你在繼續(xù)閱讀本文之前閱讀那篇文章以了解更多背景信息。

在之前的文章中，你向我們展示了如何只使用一個(gè)變量來創(chuàng)建懸停效果——在這里可以這樣做嗎？

是的，絕對(duì)可以！我們確實(shí)可以使用相同的DRY切換技術(shù)，這樣我們只需要處理一個(gè)CSS自定義屬性，該屬性僅在懸停時(shí)切換值：

.hover-2 {
  /* 高度 */
  --h: 1.2em;

  line-height: var(--h);
  color: #0000;
  text-shadow: 
    0 var(--_i, var(--h)) #fff,
    0 0 rgb(0 0 0 / calc(var(--_i, 1) * 100%) );
  background: 
    linear-gradient(#1095c1 0 0) 
    bottom/100% calc(100% - var(--_i, 1) * 100%) no-repeat;
  overflow: hidden;
  transition: 0.3s;
}
.hover-2:hover {
  --_i: 0;
}

懸停效果 #3

這個(gè)懸停效果只不過是我們已經(jīng)制作的兩個(gè)效果的組合：上一篇文章中的第二個(gè)懸停效果和本文中的第一個(gè)懸停效果。

.hover-3 {
  /* 顏色 */
  --c: #1095c1;
  /* 高度 */
  --h: 1.2em;

  /* 本文中第一個(gè)懸停效果 */
  line-height: var(--h);  
  color: #0000;
  overflow: hidden;
  text-shadow: 
    0 calc(-1 * var(--_t, 0em)) var(--c), 
    0 calc(var(--h) - var(--_t, 0em)) #fff;
  /* 上一篇文章中的第二個(gè)懸停效果 */
  background: 
    linear-gradient(var(--c) 0 0) no-repeat 
    calc(200% - var(--_p, 0%)) 100% / 200% var(--_p, .08em);
  transition: .3s var(--_s, 0s), background-position .3s calc(.3s - var(--_s, 0s));
}
.hover-3:hover {
  --_t: var(--h);
  --_p: 100%;
  --_s: .3s
}

我所做的只是復(fù)制和粘貼其他示例中的效果，并對(duì)變量名進(jìn)行了一些小的調(diào)整。當(dāng)它們組合在一起時(shí)，它們會(huì)產(chǎn)生一個(gè)簡潔的懸停效果！乍一看，這種效果可能看起來很復(fù)雜且難以實(shí)現(xiàn)，但最終，它僅僅是將兩個(gè)相對(duì)簡單的效果組合成一個(gè)。

如果我們考慮我們已經(jīng)完成的之前的優(yōu)化，那么使用DRY切換變量技術(shù)優(yōu)化代碼也應(yīng)該是一項(xiàng)簡單的任務(wù)：

.hover-3 {
  /* 顏色 */
  --c: #1095c1;
  /* 高度 */
  --h: 1.2em;

  line-height: var(--h);  
  color: #0000;
  overflow: hidden;
  text-shadow: 
    0 calc(-1 * var(--h) * var(--_i, 0)) var(--c), 
    0 calc(var(--h) * (1 - var(--_i, 0))) #fff;
  background: 
    linear-gradient(var(--c) 0 0) no-repeat
    calc(200% - var(--_i, 0) * 100%) 100% / 200% calc(100% * var(--_i, 0)   .08em);
  transition: .3s calc(var(--_i, 0) * .3s), background-position .3s calc(.3s - calc(var(--_i, 0) * .3s));
}
.hover-3:hover {
  --_i: 1;
}

懸停效果 #4

此懸停效果是對(duì)第二個(gè)懸停效果的改進(jìn)。首先，讓我們引入一個(gè)clip-path 動(dòng)畫來顯示其中一個(gè)文本圖層，然后再移動(dòng)它：

這是一個(gè)更好的說明，以便更好地理解正在發(fā)生的事情：

最初，我們使用inset(0 0 0 0)，這類似于overflow: hidden，因?yàn)槲覀冎豢吹綄?shí)際文本。在懸停時(shí)，我們使用等于高度的負(fù)值更新第三個(gè)值（表示底部偏移量），以顯示放置在底部的文本圖層。

從那里，我們可以將其添加到我們在本文中制作的第二個(gè)懸停效果中，這就是我們得到的結(jié)果：

我們越來越近了！請(qǐng)注意，我們需要首先運(yùn)行clip-path 動(dòng)畫，然后運(yùn)行其他所有內(nèi)容。為此，我們可以為懸停時(shí)的所有屬性添加延遲，除了clip-path：

transition: 0.4s 0.4s, clip-path 0.4s;

在鼠標(biāo)移出時(shí)，我們做相反的操作：

transition: 0.4s, clip-path 0.4s 0.4s;

最后的潤色是添加一個(gè)box-shadow 來創(chuàng)建藍(lán)色矩形的滑動(dòng)效果。不幸的是，background 無法產(chǎn)生這種效果，因?yàn)楸尘澳J(rèn)情況下會(huì)被裁剪到內(nèi)容區(qū)域。同時(shí)，box-shadow 可以超出內(nèi)容區(qū)域。

.hover-4 {
  /* 顏色 */
  --c: #1095c1;
  /* 高度 */
  --h: 1.2em;

  line-height: var(--h);
  color: #0000;
  text-shadow: 
    0 var(--_t, var(--h)) #fff,
    0 0 var(--_c, #000);
  box-shadow: 0 var(--_t, var(--h)) var(--c);
  clip-path: inset(0 0 0 0);
  background: linear-gradient(var(--c) 0 0) 0 var(--_t, var(--h)) no-repeat;
  transition: 0.4s, clip-path 0.4s 0.4s;
}
.hover-4:hover {
  --_t: 0;
  --_c: #0000;
  clip-path: inset(0 0 calc(-1 * var(--h)) 0);
  transition: 0.4s 0.4s, clip-path 0.4s;
}

如果你仔細(xì)觀察box-shadow，你會(huì)發(fā)現(xiàn)它與text-shadow 內(nèi)的白色文本圖層具有相同的值。這是合乎邏輯的，因?yàn)閮烧叨夹枰韵嗤姆绞揭苿?dòng)。兩者都會(huì)滑到頂部。然后box-shadow 位于元素后面，而text-shadow 位于頂部。

這是一個(gè)修改了一些值的演示，用于可視化圖層如何移動(dòng)：

等等，背景語法與第二個(gè)懸停效果中使用的語法略有不同！

好眼力！是的，我們正在使用不同的背景技術(shù)來產(chǎn)生相同的效果。我們不是將大小從0%動(dòng)畫化為100%，而是動(dòng)畫化位置。

如果我們沒有在漸變上指定大小，則它默認(rèn)情況下會(huì)占據(jù)整個(gè)寬度和高度。由于我們知道元素的高度（--h），我們可以通過將位置從0 var(--h) 更新到0 0 來創(chuàng)建滑動(dòng)效果。

.hover-4 {
  /* ... */
  background: linear-gradient(var(--c) 0 0) 0 var(--_t, var(--h)) no-repeat;
}
.hover-4:hover {
  --_t: 0;
}

我們可以使用background-size 動(dòng)畫來獲得相同的效果，但我們只是向我們的技巧列表中添加了另一個(gè)技巧！

在演示中，你還使用了inset(0 0 1px 0)……為什么？

我有時(shí)會(huì)在此處添加或刪除一些像素或百分比來完善看起來不太好的任何內(nèi)容。在這種情況下，底部出現(xiàn)了一條壞線，添加1px將其刪除了。

DRY切換變量優(yōu)化怎么樣？

我把這項(xiàng)任務(wù)留給你！在看完這四個(gè)懸停效果和之前的文章后，你應(yīng)該能夠更新代碼，使其只使用一個(gè)變量。我很想在評(píng)論中看到你的嘗試！

輪到你了！

讓我分享最后一個(gè)懸停效果，它是前一個(gè)效果的另一個(gè)版本。你能在不查看代碼的情況下找出它是如何實(shí)現(xiàn)的嗎？這是一個(gè)很好的練習(xí)，所以不要作弊！

總結(jié)

我們查看了許多示例，這些示例展示了如何使用一個(gè)元素和幾行CSS就足以在文本元素上創(chuàng)建一些看起來相當(dāng)復(fù)雜懸停效果——不需要偽元素！我們甚至能夠結(jié)合多種技術(shù)，以較小的努力實(shí)現(xiàn)更復(fù)雜的動(dòng)畫。

如果你有興趣深入研究本文中這四個(gè)文本陰影懸停效果之外的內(nèi)容，請(qǐng)查看我的500種懸停效果合集，我在其中探索了各種不同的技術(shù)。

以上是使用CSS文本陰影的4個(gè)涼爽懸停效果的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！