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

炫酷懸停效果系列：

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

text-shadow 但沒有文本陰影？

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

不用看代碼，你們中的許多人會直覺地認(rèn)為，對于每個懸停效果，我們都會復(fù)制文本，然后獨立地對其進行動畫處理?，F(xiàn)在，如果你查看代碼，你會發(fā)現(xiàn)HTML中沒有任何文本被實際復(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è)置為透明（使用#0000）。之后，我使用text-shadow 創(chuàng)建兩個陰影，每個陰影只定義兩個長度值。這意味著沒有模糊半徑，從而產(chǎn)生清晰銳利的陰影，有效地產(chǎn)生了具有指定顏色的文本副本。

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

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

讓我們優(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;
}

我們還可以進一步使用更多calc() 計算來簡化代碼，以便我們只使用一次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ù)的文本從頂部滑入：

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

懸停效果 #2

對于這個效果，我們將動畫化兩個屬性：text-shadow 和 background。關(guān)于text-shadow，我們?nèi)匀幌裰暗氖纠粯佑袃蓚€圖層，但這次我們將只移動其中一個，同時在交換期間將另一個圖層的顏色設(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;
}

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

最后，我們添加overflow: hidden 以使動畫僅在元素的邊界內(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)化代碼。

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

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

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

.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

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

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

  /* 本文中第一個懸停效果 */
  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;
  /* 上一篇文章中的第二個懸停效果 */
  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ù)制和粘貼其他示例中的效果，并對變量名進行了一些小的調(diào)整。當(dāng)它們組合在一起時，它們會產(chǎn)生一個簡潔的懸停效果！乍一看，這種效果可能看起來很復(fù)雜且難以實現(xiàn)，但最終，它僅僅是將兩個相對簡單的效果組合成一個。

如果我們考慮我們已經(jīng)完成的之前的優(yōu)化，那么使用DRY切換變量技術(shù)優(yōu)化代碼也應(yī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

此懸停效果是對第二個懸停效果的改進。首先，讓我們引入一個clip-path 動畫來顯示其中一個文本圖層，然后再移動它：

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

最初，我們使用inset(0 0 0 0)，這類似于overflow: hidden，因為我們只看到實際文本。在懸停時，我們使用等于高度的負(fù)值更新第三個值（表示底部偏移量），以顯示放置在底部的文本圖層。

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

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

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

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

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

最后的潤色是添加一個box-shadow 來創(chuàng)建藍(lán)色矩形的滑動效果。不幸的是，background 無法產(chǎn)生這種效果，因為背景默認(rèn)情況下會被裁剪到內(nèi)容區(qū)域。同時，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，你會發(fā)現(xiàn)它與text-shadow 內(nèi)的白色文本圖層具有相同的值。這是合乎邏輯的，因為兩者都需要以相同的方式移動。兩者都會滑到頂部。然后box-shadow 位于元素后面，而text-shadow 位于頂部。

這是一個修改了一些值的演示，用于可視化圖層如何移動：

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

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

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

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

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

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

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

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

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

輪到你了！

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

總結(jié)

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

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

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