我們已經(jīng)瀏覽了一系列有關(guān)CSS懸停效果的有趣方法的文章。我們從使用CSS背景屬性的一堆示例開始，然后移至文本陰影屬性，從技術(shù)上講，我們?cè)诩夹g(shù)上沒有使用任何陰影。我們還將它們與CSS變量和Calc（）結(jié)合在一起，以優(yōu)化代碼并易于管理。

在本文中，我們將建立這兩篇文章，以創(chuàng)建更復(fù)雜的CSS懸停動(dòng)畫。我們談?wù)摰氖潜尘凹舨?，CSS面具，甚至通過3D視角弄濕了我們的腳。換句話說，這次我們將探索先進(jìn)的技術(shù)，并以懸停效果的形式推動(dòng)CSS可以做的事情！

涼爽的懸停效果系列：

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

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

使用背景折疊的懸停效果

讓我們來談?wù)劚尘凹糨?。此CSS屬性接受文本關(guān)鍵字值，該值使我們能夠?qū)⑻荻葢?yīng)用于元素的文本而不是實(shí)際背景。

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

我所做的就是添加背景折疊：文本到元素并過渡背景位置。不必比這更復(fù)雜！

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

在那個(gè)示例中，我將兩個(gè)不同的梯度和兩個(gè)值與背景clip一起使用。第一個(gè)背景梯度被夾在文本上（由于文本值）以將顏色設(shè)置為懸停，而第二個(gè)背景梯度則創(chuàng)建了底部下劃線（多虧了Padding-Box值）。其他所有內(nèi)容都是從我們?cè)诒鞠盗械谝黄恼轮兴龅墓ぷ髦兄苯訌?fù)制的。

懸停效果如何，在看起來像文本的方式上從上到下滑動(dòng)，然后涂上顏色：

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

我們只抓取了我們可以使用背景覆蓋能力來做的事情！但是，這項(xiàng)技術(shù)可能是您要避免在生產(chǎn)中使用的東西，因?yàn)楸娝苤?，F(xiàn)irefox有很多與背景折疊有關(guān)的錯(cuò)誤。野生動(dòng)物園也有支持問題。這只會(huì)給鉻片提供對(duì)這些東西的堅(jiān)實(shí)支持，因此也許隨著我們的繼續(xù)而打開。

讓我們繼續(xù)使用背景折疊來轉(zhuǎn)移另一個(gè)懸停效果：

與我們剛剛涵蓋的內(nèi)容相比，您可能會(huì)認(rèn)為這看起來非常容易 - 您是對(duì)的，這里沒有什么花哨的。我要做的就是在增加一個(gè)梯度的同時(shí)增加另一個(gè)梯度。

但是我們?cè)谶@里看先進(jìn)的懸停效果，對(duì)嗎？讓我們將其更改一些，以便當(dāng)鼠標(biāo)光標(biāo)離開元素時(shí)，動(dòng)畫會(huì)有所不同。相同的懸停效果，但動(dòng)畫的結(jié)局不同：

酷吧？讓我們剖析代碼：

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

  顏色：＃0000;
  背景： 
    線性畢業(yè)生（90DEG，#FFF 50％，var（-c）0）calc（100％-var（-_ p，0％）） / 200％， 
    線性級(jí)別（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;
}

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

這是該過渡的情況：首先，我們將過渡應(yīng)用到所有事物，但我們將顏色和背景色延遲了0.5s以創(chuàng)建滑動(dòng)效果。此后，我們更改顏色和背景色。您可能會(huì)注意到?jīng)]有視覺上的更改，因?yàn)槲谋疽呀?jīng)是白色（由于第一個(gè)梯度），并且背景已經(jīng)設(shè)置為主要顏色（由于第二個(gè)梯度）。

然后，在鼠標(biāo)外，我們將即時(shí)更改應(yīng)用于所有內(nèi)容（請(qǐng)注意0s延遲），除了具有過渡的顏色和背景色。這意味著我們將所有梯度都放回他們的初始狀態(tài)。同樣，您可能不會(huì)看到視覺上的更改，因?yàn)槲谋绢伾捅尘吧趹彝Ｉ弦呀?jīng)改變。

最后，我們將褪色應(yīng)用于顏色和背景色，以創(chuàng)建動(dòng)畫的鼠標(biāo)輸出部分。我知道，掌握可能很棘手，但是您可以通過使用不同的顏色更好地可視化技巧：

懸停在上述很多次，您會(huì)看到在懸停在懸停的屬性以及在鼠標(biāo)上進(jìn)行動(dòng)畫的屬性。然后，您可以了解我們?nèi)绾蔚竭_(dá)兩個(gè)不同的動(dòng)畫以達(dá)到相同的懸停效果。

我們不要忘記我們?cè)诒鞠盗械南惹拔恼轮惺褂玫母砷_關(guān)技術(shù)，以幫助減少代碼數(shù)量，僅在開關(guān)中使用一個(gè)變量：

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

  顏色：RGB（255 255 255 / var（-_i，0））;
  背景：
    / *漸變＃1 */
    線性畢業(yè)生（90級(jí)，#FFF 50％，RGB（var（-c））0）calc（100％-var（-_ i，0） * 100％） / 200％，200％
    / *漸變＃2 */
    線性級(jí)別（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），
    背景色計(jì)算（.5S-var（-_t））var（-_ t）;
}
.Hover：懸停{
  -_ I：1;
}

如果您想知道為什么我要使用主要顏色的RGB語法，那是因?yàn)槲倚枰褂肁lpha透明度。我還使用變量-_t來減少過渡屬性中使用的冗余計(jì)算。

在我們轉(zhuǎn)到下一部分之前，這里還有更多懸停效果的例子，我前一段時(shí)間依靠背景剪輯。詳細(xì)介紹每個(gè)人要花太長(zhǎng)時(shí)間，但是到目前為止，我們已經(jīng)學(xué)到了一些知識(shí)，您可以輕松理解代碼。獨(dú)自嘗試其中的某些而無需查看代碼，這可能是一個(gè)很好的靈感。

我知道，我知道。這些是瘋狂且罕見的懸停效果，我意識(shí)到它們?cè)诖蠖鄶?shù)情況下都太多了。但這就是練習(xí)和學(xué)習(xí)CSS的方法。請(qǐng)記住，我們推動(dòng)了CSS懸停效應(yīng)的限制。懸停效果可能是一種新穎性，但是我們?cè)诖诉^程中學(xué)習(xí)的新技術(shù)肯定可以用于其他事物。

使用CSS掩碼懸停效果

猜怎么著？ CSS蒙版屬性使用梯度與背景屬性相同，因此您會(huì)發(fā)現(xiàn)我們下一步制作的內(nèi)容非常簡(jiǎn)單。

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

我正在使用背景在該演示中創(chuàng)建鋸齒形底部邊框。如果我想將動(dòng)畫應(yīng)用于該下劃線，那么僅使用背景屬性就可以進(jìn)行乏味。

輸入CSS面具。

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

線性級(jí)別（＃000 0 0）content-box

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

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

現(xiàn)在，我們要做的就是更改懸停的-_ p的值，以為第二個(gè)梯度創(chuàng)建滑動(dòng)效果并揭示下劃線。

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

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

有了這樣的技巧，我們可以通過簡(jiǎn)單地使用掩碼屬性使用不同的梯度配置來輕松創(chuàng)建很多變化：

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

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

另一個(gè)懸停效果的集合！我保留了所有掩碼配置，并更改了背景以創(chuàng)建不同的形狀。現(xiàn)在，您可以理解我如何在沒有偽元素的情況下達(dá)到400個(gè)懸停效果 - 我們?nèi)匀豢梢該碛懈啵?/p>

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

這對(duì)您來說是一個(gè)挑戰(zhàn)：最后一個(gè)演示中的邊界是使用面具屬性來揭示它的梯度。您能找出動(dòng)畫背后的邏輯嗎？乍一看可能看起來很復(fù)雜，但是它與我們?yōu)橐蕾囂荻鹊钠渌蠖鄶?shù)懸停效應(yīng)所研究的邏輯非常相似。在評(píng)論中發(fā)布您的解釋！

3D中的懸停效應(yīng)

您可能會(huì)認(rèn)為不可能用單個(gè)元素創(chuàng)建3D效果（并且不訴諸偽元素?。?，但是CSS可以使其實(shí)現(xiàn)。

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

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

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

然后，我們創(chuàng)建一個(gè)透明的邊界，其寬度使用上述變量：

 -_ s：calc（var（-d）var（-b））;
顏色：var（-c）;
邊界：固體＃0000; / *第四值設(shè)置顏色的alpha */
邊框?qū)挾龋簐ar（-b）var（-b）var（-_ s）var（-_ s）;

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

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

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

我們?yōu)榧记傻牡谌糠痔砑恿肆硪粋€(gè)梯度。這將使用兩個(gè)半透明的白色值，將第一個(gè)先前梯度重疊，以創(chuàng)建主顏色的不同陰影，從而使我們的陰影和深度幻想。

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

最后一步是應(yīng)用CSS剪輯路徑以切開角落的彎道：

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

就這樣！我們剛剛制作了一個(gè)3D矩形，只有兩個(gè)梯度和一個(gè)夾子路徑，我們可以使用CSS變量輕松調(diào)整?，F(xiàn)在，我們要做的就是使它動(dòng)畫！

注意上圖（以紅色表示）的坐標(biāo)。讓我們更新這些以創(chuàng)建動(dòng)畫：

剪輯路徑：多邊形（
  0％var（-d）， / *逆轉(zhuǎn)var（-d）0％ * /
  var（-d）0％， 
  100％0％， 
  100％計(jì)算（100％-var（-d））， 
  計(jì)算（100％-var（-d））100％， / *逆轉(zhuǎn)100％calc（100％-var（-d）） * / 
  0％100％ / *逆轉(zhuǎn)var（-d）calc（100％-var（-d）） * /
）

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

這支筆隔離了動(dòng)畫的剪輯路徑部分，以查看其在做什么：

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

第二個(gè)懸停效應(yīng)遵循相同的結(jié)構(gòu)。我要做的就是更新一些值以創(chuàng)建左上角的動(dòng)作，而不是右上角。

結(jié)合效果！

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

實(shí)際的代碼起初可能會(huì)令人困惑，但請(qǐng)繼續(xù)進(jìn)行剖析 - 您會(huì)注意到，這僅僅是這三種不同效果的組合，幾乎可以一起使用。

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

我在圖像上應(yīng)用了相同的效果，結(jié)果對(duì)于用一個(gè)元素模擬3D非常好：

想仔細(xì)看看最后一個(gè)演示的工作原理嗎？我在上面寫了一些東西。

總結(jié)

oof，我們完成了！我知道，這是很多棘手的CSS，但是（1）我們?cè)谡_的網(wǎng)站上使用此類內(nèi)容，并且（2）目標(biāo)是通過允許它們相互交互，將我們對(duì)不同CSS屬性的理解推向新級(jí)別。

現(xiàn)在，您可能會(huì)問下一步是什么，因?yàn)槲覀冋诮Y(jié)束一系列高級(jí)CSS懸停效果。我會(huì)說下一步是將我們所學(xué)的所有內(nèi)容應(yīng)用于其他元素，例如按鈕，菜單項(xiàng)，鏈接等。由于這個(gè)確切的原因，我們將這些技巧限制在標(biāo)題元素方面都非常簡(jiǎn)單；實(shí)際元素沒關(guān)系。采取概念并與他們一起創(chuàng)建，實(shí)驗(yàn)和學(xué)習(xí)新事物！

以上是酷CSS懸停效果，使用背景剪輯，口罩和3D的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！