酷CSS懸停效果，使用背景剪輯，口罩和3D

我們已經瀏覽了一系列有關CSS懸停效果的有趣方法的文章。我們從使用CSS背景屬性的一堆示例開始，然後移至文本陰影屬性，從技術上講，我們在技術上沒有使用任何陰影。我們還將它們與CSS變量和Calc（）結合在一起，以優化代碼並易於管理。

在本文中，我們將建立這兩篇文章，以創建更複雜的CSS懸停動畫。我們談論的是背景剪裁，CSS面具，甚至通過3D視角弄濕了我們的腳。換句話說，這次我們將探索先進的技術，並以懸停效果的形式推動CSS可以做的事情！

涼爽的懸停效果系列：

1. 使用背景屬性的涼爽懸停效果
2. 使用CSS Textshadow的涼爽懸停效果
3. 使用背景剪輯，口罩和3D的涼爽懸停效果（您在這裡！ ）

這只是我們所做的事情的味道：

使用背景折疊的懸停效果

讓我們來談談背景剪輯。此CSS屬性接受文本關鍵字值，該值使我們能夠將梯度應用於元素的文本而不是實際背景。

因此，例如，我們可以像使用顏色屬性一樣更改懸停文本的顏色，但是這樣我們將顏色更改動畫：

我所做的就是添加背景折疊：文本到元素並過渡背景位置。不必比這更複雜！

但是，如果將多個梯度與不同的背景剪輯值相結合，我們可以做得更好。

在那個示例中，我將兩個不同的梯度和兩個值與背景clip一起使用。第一個背景梯度被夾在文本上（由於文本值）以將顏色設置為懸停，而第二個背景梯度則創建了底部下劃線（多虧了Padding-Box值）。其他所有內容都是從我們在本系列第一篇文章中所做的工作中直接複製的。

懸停效果如何，在看起來像文本的方式上從上到下滑動，然後塗上顏色：

這次，我更改了創建線路的第一個梯度的大小。然後，我將其與另一個更新文本顏色的漸變以創建幻覺！您可以看到這支筆中發生的事情：

我們只抓取了我們可以使用背景覆蓋能力來做的事情！但是，這項技術可能是您要避免在生產中使用的東西，因為眾所周知，Firefox有很多與背景折疊有關的錯誤。野生動物園也有支持問題。這只會給鉻片提供對這些東西的堅實支持，因此也許隨著我們的繼續而打開。

讓我們繼續使用背景折疊來轉移另一個懸停效果：

與我們剛剛涵蓋的內容相比，您可能會認為這看起來非常容易 - 您是對的，這裡沒有什麼花哨的。我要做的就是在增加一個梯度的同時增加另一個梯度。

但是我們在這裡看先進的懸停效果，對嗎？讓我們將其更改一些，以便當鼠標光標離開元素時，動畫會有所不同。相同的懸停效果，但動畫的結局不同：

酷吧？讓我們剖析代碼：

 .hover {
  -C：＃1095C1; / *顏色 */

  顏色：＃0000;
  背景： 
    線性畢業生（90DEG，#FFF 50％，var（-c）0）calc（100％-var（-_ p，0％）） / 200％， 
    線性級別（var（-c）0 0）0％100％ / var（-_ p，0％）no-repeat，
    var（-_ C，＃0000）;
  -webkit-background-clip：文本，填充框，填充框；
          背景紙條：文本，填充框，填充框；
  過渡：0s，顏色.5s，背景色.5s;
}
.Hover：懸停{
  顏色：#fff;
  -_ C：var（-c）;
  -_ P：100％；
  過渡：0.5s，顏色0s .5s，背景色0s .5s;
}

我們有三個背景層 - 兩個梯度和使用-_ C變量定義的背景色，最初設置為透明（＃0000）。在懸停時，我們將顏色更改為白色，-_ C變量為主顏色（-C）。

這是該過渡的情況：首先，我們將過渡應用到所有事物，但我們將顏色和背景色延遲了0.5s以創建滑動效果。此後，我們更改顏色和背景色。您可能會注意到沒有視覺上的更改，因為文本已經是白色（由於第一個梯度），並且背景已經設置為主要顏色（由於第二個梯度）。

然後，在鼠標外，我們將即時更改應用於所有內容（請注意0s延遲），除了具有過渡的顏色和背景色。這意味著我們將所有梯度都放回他們的初始狀態。同樣，您可能不會看到視覺上的更改，因為文本顏色和背景色在懸停上已經改變。

最後，我們將褪色應用於顏色和背景色，以創建動畫的鼠標輸出部分。我知道，掌握可能很棘手，但是您可以通過使用不同的顏色更好地可視化技巧：

懸停在上述很多次，您會看到在懸停在懸停的屬性以及在鼠標上進行動畫的屬性。然後，您可以了解我們如何到達兩個不同的動畫以達到相同的懸停效果。

我們不要忘記我們在本系列的先前文章中使用的干開關技術，以幫助減少代碼數量，僅在開關中使用一個變量：

 .hover {
  -C：16 149 193; / *使用RGB格式的顏色 */

  顏色：RGB（255 255 255 / var（-_i，0））;
  背景：
    / *漸變＃1 */
    線性畢業生（90級，#FFF 50％，RGB（var（-c））0）calc（100％-var（-_ i，0） * 100％） / 200％，200％
    / *漸變＃2 */
    線性級別（RGB（var（-c））0 0）0％100％ / calc（var（-_ i，0） * 100％）no-repeat，
    / *背景顏色 */
    rgb（var（-c）/ var（-_ i，0））;
  -webkit-background-clip：文本，填充框，填充框；
          背景紙條：文本，填充框，填充框；
  -_ t：calc（var（-_ i，0）*。5s）;
  過渡： 
    var（ -  _ t），
    顏色calc（.5s-var（-_t））var（-_ t），
    背景色計算（.5S-var（-_t））var（-_ t）;
}
.Hover：懸停{
  -_ I：1;
}

如果您想知道為什麼我要使用主要顏色的RGB語法，那是因為我需要使用Alpha透明度。我還使用變量-_t來減少過渡屬性中使用的冗餘計算。

在我們轉到下一部分之前，這裡還有更多懸停效果的例子，我前一段時間依靠背景剪輯。詳細介紹每個人要花太長時間，但是到目前為止，我們已經學到了一些知識，您可以輕鬆理解代碼。獨自嘗試其中的某些而無需查看代碼，這可能是一個很好的靈感。

我知道，我知道。這些是瘋狂且罕見的懸停效果，我意識到它們在大多數情況下都太多了。但這就是練習和學習CSS的方法。請記住，我們推動了CSS懸停效應的限制。懸停效果可能是一種新穎性，但是我們在此過程中學習的新技術肯定可以用於其他事物。

使用CSS掩碼懸停效果

猜怎麼著？ CSS蒙版屬性使用梯度與背景屬性相同，因此您會發現我們下一步製作的內容非常簡單。

讓我們首先建立一個幻想的下劃線。

我正在使用背景在該演示中創建鋸齒形底部邊框。如果我想將動畫應用於該下劃線，那麼僅使用背景屬性就可以進行乏味。

輸入CSS面具。

該代碼看起來可能很奇怪，但是邏輯仍然與我們對所有先前背景動畫一樣。面具由兩個梯度組成。第一個梯度用不透明的顏色定義，該顏色涵蓋了內容區域（由於內容框值）。第一個梯度使文本可見，並掩蓋了底部的曲折邊框。 content-box是蒙版-clip值，其行為與背景-CLIP相同

線性級別（＃000 0 0）content-box

第二個梯度將覆蓋整個區域（多虧了Padding-Box）。該一個具有使用-_ P變量定義的寬度，並且將放置在元素的左側。

線性級別（＃000 0 0）0 / var（-_ p，0％）padding-box

現在，我們要做的就是更改懸停的-_ p的值，以為第二個梯度創建滑動效果並揭示下劃線。

 .Hover：懸停{
  -_ P：100％；
  顏色：var（-c）;
}

以下演示將蒙版層用作背景，以更好地查看發生的技巧。想像一下，綠色和紅色部分是元素的可見部分，而其他所有內容都是透明的。如果我們使用相同的梯度，這就是面具會做的。

有了這樣的技巧，我們可以通過簡單地使用掩碼屬性使用不同的梯度配置來輕鬆創建很多變化：

該演示中的每個示例使用掩模的梯度配置略有不同。也請注意，背景配置和掩碼配置之間的代碼中的分離。它們可以獨立管理和維護。

讓我們通過用波浪的下劃線替換Zig-Zag下劃線來更改背景配置：

另一個懸停效果的集合！我保留了所有掩碼配置，並更改了背景以創建不同的形狀。現在，您可以理解我如何在沒有偽元素的情況下達到400個懸停效果 - 我們仍然可以擁有更多！

就像，為什麼不這樣的事情：

這對您來說是一個挑戰：最後一個演示中的邊界是使用面具屬性來揭示它的梯度。您能找出動畫背後的邏輯嗎？乍一看可能看起來很複雜，但是它與我們為依賴梯度的其他大多數懸停效應所研究的邏輯非常相似。在評論中發布您的解釋！

3D中的懸停效應

您可能會認為不可能用單個元素創建3D效果（並且不訴諸偽元素！），但是CSS可以使其實現。

您所看到的沒有真正的3D效果，而是在結合CSS背景，剪輯路徑和變換屬性的2D空間中的3D幻想。

我們要做的第一件事是定義我們的變量：

 -C：＃1095C1; /* 顏色 */
-b：.1em; / *邊框長度 */
-d：20px; / *立方深度 */

然後，我們創建一個透明的邊界，其寬度使用上述變量：

 -_ s：calc（var（-d）var（-b））;
顏色：var（-c）;
邊界：固體＃0000; / *第四值設置顏色的alpha */
邊框寬度：var（-b）var（-b）var（-_ s）var（-_ s）;

元素的頂部和右側都需要等於-b值，而底部和左側則需要等於-b和-d的總和（這是-_ s變量）。

在技​​巧的第二部分中，我們需要定義一個涵蓋我們先前定義的所有邊界區域的梯度。圓錐梯度將為此作用：

背景：圓錐級（
  在左var（ -  _ s）底部var（-_ s），
  ＃0000 90DEG，var（-c）0
 ） 
 0 100％ /計算（100％-var（-b））calc（100％-var（-b））邊框框；

我們為技巧的第三部分添加了另一個梯度。這將使用兩個半透明的白色值，將第一個先前梯度重疊，以創建主顏色的不同陰影，從而使我們的陰影和深度幻想。

圓錐分子（
  在左var（-d）底部var（-d），
  ＃0000 90DEG，
  RGB（255 255 255 / 0.3）0 225吉
  RGB（255 255 255 / 0.6）0
）邊框框

最後一步是應用CSS剪輯路徑以切開角落的彎道：

剪輯路徑：多邊形（
  0％var（-d）， 
  var（-d）0％， 
  100％0％， 
  100％計算（100％-var（-d））， 
  計算（100％-var（-d））100％， 
  0％100％
）

就這樣！我們剛剛製作了一個3D矩形，只有兩個梯度和一個夾子路徑，我們可以使用CSS變量輕鬆調整。現在，我們要做的就是使它動畫！

注意上圖（以紅色表示）的坐標。讓我們更新這些以創建動畫：

剪輯路徑：多邊形（
  0％var（-d）， / *逆轉var（-d）0％ * /
  var（-d）0％， 
  100％0％， 
  100％計算（100％-var（-d））， 
  計算（100％-var（-d））100％， / *逆轉100％calc（100％-var（-d）） * / 
  0％100％ / *逆轉var（-d）calc（100％-var（-d）） * /
）

訣竅是隱藏元素的底部和左側部分，以便左側的所有隻是矩形元素，沒有任何深度。

這支筆隔離了動畫的剪輯路徑部分，以查看其在做什麼：

最後的觸摸是使用翻譯將元素朝相反的方向移動 - 幻覺是完美的！這是使用不同的自定義屬性值的效果，以不同的深度：

第二個懸停效應遵循相同的結構。我要做的就是更新一些值以創建左上角的動作，而不是右上角。

結合效果！

我們涵蓋的所有內容令人敬畏的事情是，它們都相互補充。這是一個示例，我將系列中第二篇文章的文本陰影效果添加到第一篇文章的背景動畫技術中，同時使用我們介紹的3D技巧：

實際的代碼起初可能會令人困惑，但請繼續進行剖析 - 您會注意到，這僅僅是這三種不同效果的組合，幾乎可以一起使用。

讓我以最後的懸停效果完成這篇文章，其中我將背景，剪輯路徑和一點點透視圖組合在一起，以模擬另一個3D效果：

我在圖像上應用了相同的效果，結果對於用一個元素模擬3D非常好：

想仔細看看最後一個演示的工作原理嗎？我在上面寫了一些東西。

總結

oof，我們完成了！我知道，這是很多棘手的CSS，但是（1）我們在正確的網站上使用此類內容，並且（2）目標是通過允許它們相互交互，將我們對不同CSS屬性的理解推向新級別。

現在，您可能會問下一步是什麼，因為我們正在結束一系列高級CSS懸停效果。我會說下一步是將我們所學的所有內容應用於其他元素，例如按鈕，菜單項，鏈接等。由於這個確切的原因，我們將這些技巧限制在標題元素方面都非常簡單；實際元素沒關係。採取概念並與他們一起創建，實驗和學習新事物！

以上是酷CSS懸停效果，使用背景剪輯，口罩和3D的詳細內容。更多資訊請關注PHP中文網其他相關文章！