上篇文章我們探討瞭如何利用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但沒(méi)有文本陰影？

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

不用看代碼，你們中的許多人會(huì)直覺(jué)地認(rèn)為，對(duì)於每個(gè)懸停效果，我們都會(huì)復(fù)製文本，然後獨(dú)立地對(duì)其進(jìn)行動(dòng)畫(huà)處理。現(xiàn)在，如果你查看代碼，你會(huì)發(fā)現(xiàn)HTML中沒(méi)有任何文本被實(shí)際複製。你有沒(méi)有註意到CSS中沒(méi)有使用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è)長(zhǎng)度值。這意味著沒(méi)有模糊半徑，從而產(chǎn)生清晰銳利的陰影，有效地產(chǎn)生了具有指定顏色的文本副本。

這就是為什麼我在引言中聲稱這裡沒(méi)有陰影的原因。我們所做的與其說(shuō)是“經(jīng)典”陰影，不如說(shuō)是複製文本的一種簡(jiǎn)單方法。

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

讓我們優(yōu)化代碼。我多次使用值1.2em來(lái)定義陰影的高度和偏移量，使其成為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ì)算來(lái)簡(jiǎn)化代碼，以便我們只使用一次text-shadow 。 （我們?cè)谏弦黄恼轮幸沧隽送瑯拥氖虑椤＃?/p>

 .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變量中添加下劃線，這只是我用來(lái)區(qū)分用戶可以更新的控制效果的變量（如--h ）和僅用於優(yōu)化目的、不需要更改的內(nèi)部變量（如--_t ）的命名約定。換句話說(shuō)，下劃線是變量名的一部分，沒(méi)有任何特殊含義。

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

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

懸停效果#2

對(duì)於這個(gè)效果，我們將動(dòng)畫(huà)化兩個(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)畫(huà)：

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

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

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

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

在之前的文章中，你向我們展示瞭如何只使用一個(gè)變量來(lái)創(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è)懸停效果只不過(guò)是我們已經(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
}

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

如果我們考慮我們已經(jīng)完成的之前的優(yōu)化，那麼使用DRY切換變量技術(shù)優(yōu)化代碼也應(yīng)該是一項(xiàng)簡(jiǎn)單的任務(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)畫(huà)來(lái)顯示其中一個(gè)文本圖層，然後再移動(dòng)它：

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

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

從那裡，我們可以將其添加到我們?cè)诒疚闹醒u作的第二個(gè)懸停效果中，這就是我們得到的結(jié)果：

我們?cè)絹?lái)越近了！請(qǐng)注意，我們需要首先運(yùn)行clip-path動(dòng)畫(huà)，然後運(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;

最後的潤(rùn)色是添加一個(gè)box-shadow來(lái)創(chuàng)建藍(lán)色矩形的滑動(dòng)效果。不幸的是， background無(wú)法產(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)：

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

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

如果我們沒(méi)有在漸變上指定大小，則它默認(rèn)情況下會(huì)佔(zhàn)據(jù)整個(gè)寬度和高度。由於我們知道元素的高度（ --h ），我們可以通過(guò)將位置從0 var(--h)更新到0 0來(lái)創(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)畫(huà)來(lái)獲得相同的效果，但我們只是向我們的技巧列表中添加了另一個(gè)技巧！

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

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

DRY切換變量?jī)?yōu)化怎麼樣？

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

輪到你了！

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

總結(jié)

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

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

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