使用CSS文本陰影的4個涼爽懸停效果

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

炫酷懸停效果系列：

1. 利用背景屬性實現炫酷懸停效果
2. 利用CSS文本陰影實現炫酷懸停效果（您當前位置！）
3. 利用背景裁剪、蒙版和3D實現炫酷懸停效果

text-shadow但沒有文本陰影？

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

不用看代碼，你們中的許多人會直覺地認為，對於每個懸停效果，我們都會復製文本，然後獨立地對其進行動畫處理。現在，如果你查看代碼，你會發現HTML中沒有任何文本被實際複製。你有沒有註意到CSS中沒有使用content: "text" ？

文本圖層完全是用text-shadow創建的！

懸停效果#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;
}

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

這就是為什麼我在引言中聲稱這裡沒有陰影的原因。我們所做的與其說是“經典”陰影，不如說是複製文本的一種簡單方法。

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

讓我們優化代碼。我多次使用值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變量中添加下劃線，這只是我用來區分用戶可以更新的控制效果的變量（如--h ）和僅用於優化目的、不需要更改的內部變量（如--_t ）的命名約定。換句話說，下劃線是變量名的一部分，沒有任何特殊含義。

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

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

懸停效果#2

對於這個效果，我們將動畫化兩個屬性： text-shadow和background 。關於text-shadow ，我們仍然像之前的示例一樣有兩個圖層，但這次我們將只移動其中一個，同時在交換期間將另一個圖層的顏色設置為透明。

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

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

最後，我們添加overflow: hidden以使動畫僅在元素的邊界內可見：

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

我們在這裡所做的是結合CSS text-shadow和background屬性來創建炫酷的懸停效果。此外，我們能夠使用CSS變量來優化代碼。

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

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

是的，絕對可以！我們確實可以使用相同的DRY切換技術，這樣我們只需要處理一個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

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

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

我所做的只是複制和粘貼其他示例中的效果，並對變量名進行了一些小的調整。當它們組合在一起時，它們會產生一個簡潔的懸停效果！乍一看，這種效果可能看起來很複雜且難以實現，但最終，它僅僅是將兩個相對簡單的效果組合成一個。

如果我們考慮我們已經完成的之前的優化，那麼使用DRY切換變量技術優化代碼也應該是一項簡單的任務：

 .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動畫來顯示其中一個文本圖層，然後再移動它：

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

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

從那裡，我們可以將其添加到我們在本文中製作的第二個懸停效果中，這就是我們得到的結果：

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

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

在鼠標移出時，我們做相反的操作：

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

最後的潤色是添加一個box-shadow來創建藍色矩形的滑動效果。不幸的是， background無法產生這種效果，因為背景默認情況下會被裁剪到內容區域。同時， box-shadow可以超出內容區域。

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

如果你仔細觀察box-shadow ，你會發現它與text-shadow內的白色文本圖層具有相同的值。這是合乎邏輯的，因為兩者都需要以相同的方式移動。兩者都會滑到頂部。然後box-shadow位於元素後面，而text-shadow位於頂部。

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

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

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

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

 .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) ……為什麼？

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

DRY切換變量優化怎麼樣？

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

輪到你了！

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

總結

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

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

以上是使用CSS文本陰影的4個涼爽懸停效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！