不久前，傑夫（Geoff）寫(xiě)了一篇有關(guān)懸停效果的文章。該效果依賴(lài)於CSS偽元素，轉(zhuǎn)換和過(guò)渡的組合。許多評(píng)論表明，使用背景屬性可以執(zhí)行相同的效果。傑夫（Geoff）提到那是他最初的想法，這也是我的想法。我並不是說(shuō)他登陸的偽元素很糟糕，但是知道實(shí)現(xiàn)相同效果的不同方法只會(huì)是一件好事。

涼爽的懸停效果系列：

1. Cool Hover Effects That Use Background Properties ( you are here! )
2. 使用CSS文本陰影的涼爽懸停效果
3. 使用背景剪輯，口罩和3D的涼爽懸停效果

在這篇文章中，我們將重新進(jìn)行懸停效應(yīng)，但也將其擴(kuò)展到僅使用CSS背景屬性的其他類(lèi)型的懸停效果。

您可以在該演示中查看工作中的背景屬性，以及我們?nèi)绾问褂米远x屬性和Calc（）函數(shù)進(jìn)行更多操作。我們將學(xué)習(xí)如何組合所有這些，因此我們將擁有精美的優(yōu)化代碼！

懸停效應(yīng)＃1

讓我們從第一個(gè)效果開(kāi)始，即傑夫（Geoff）在他的文章中詳細(xì)介紹的效果。用於實(shí)現(xiàn)該效果的代碼如下：

 .hover-1 {
  背景：線(xiàn)性級(jí)別（＃1095c1 0 0）var（-p，0） / var（-p，0）no-repeat;
  過(guò)渡：.4S，背景位置0s;
}
.hover-1：懸停{
  -p：100％；
  顏色：#fff;
}

如果我們省略了顏色過(guò)渡（這是可選的），則只需要三個(gè)CSS聲明即可實(shí)現(xiàn)效果。您可能會(huì)驚訝於代碼有多小，但是您會(huì)看到我們?nèi)绾蔚竭_(dá)那裡。

首先，讓我們從簡(jiǎn)單的背景大小過(guò)渡開(kāi)始：

我們正在將線(xiàn)性梯度的大小從0 100％提高到100％100％。這意味著寬度從0到100％，而背景本身則保持全高。到目前為止，沒(méi)什麼複雜的。

讓我們開(kāi)始優(yōu)化。我們首先將梯度轉(zhuǎn)換為僅使用顏色一次：

背景圖像：線(xiàn)性級(jí)別（＃1095C1 0 0）;

語(yǔ)法看起來(lái)可能有些奇怪，但是我們告訴瀏覽器一種顏色應(yīng)用於兩個(gè)顏色停止，這足以定義CSS中的梯度。兩種顏色停止均為0，因此瀏覽器會(huì)自動(dòng)使最後一個(gè)100％使我們的梯度填充相同的顏色?？旖莘绞?，ftw！

使用背景大小，我們可以省略高度，因?yàn)槟J(rèn)情況下梯度是全高。我們可以從背景大小的過(guò)渡：0到背景大?。?00％。

 .hover-1 {
  背景圖像：線(xiàn)性級(jí)別（＃1095C1 0 0）;
  背景大?。?;
  背景重複：無(wú)重複；
  過(guò)渡：.4s;
}
.hover-1：懸停{
  背景大?。?00％；
}

讓我們介紹一個(gè)自定義屬性，以避免重複背景大小：

 .hover-1 {
  背景圖像：線(xiàn)性級(jí)別（＃1095C1 0 0）;
  背景大?。簐ar（-p，0％）;
  背景重複：無(wú)重複；
  過(guò)渡：.4s;
}
.hover-1：懸停{
  -p：100％；
}

我們不是最初定義的-P，因此將使用後備值（在我們的情況下為0％）。在懸停時(shí)，我們定義一個(gè)替代後備一（100％）的值。

現(xiàn)在，讓我們使用速記版本組合所有背景屬性以獲?。?/p>

 .hover-1 {
  背景：線(xiàn)性級(jí)別（＃1095c1 0 0）左 / var（-p，0％）no-repeat;
  過(guò)渡：.4s;
}
.hover-1：懸停{
  -p：100％；
}

我們?cè)絹?lái)越近了！請(qǐng)注意，我引入了一個(gè)左值（對(duì)於背景位置），在定義背景速記中的大小時(shí)，這是強(qiáng)制性的。另外，我們無(wú)論如何都需要它來(lái)實(shí)現(xiàn)我們的懸停效果。

我們還需要更新懸停的位置。我們可以通過(guò)兩個(gè)步驟進(jìn)行操作：

1. 增加鼠標(biāo)懸停在鼠標(biāo)右側(cè)的大小。
2. 降低鼠標(biāo)左側(cè)的大小。

為此，我們還需要更新有關(guān)懸停的背景位置：

我們?cè)诖a中添加了兩件事：

• 懸停在懸停的背景位置值
• 背景位置0s的過(guò)渡效果

這意味著，在懸停的情況下，我們立即將背景位置從左側(cè)更改（請(qǐng)參閱，我們需要該值?。┫蛴腋?，以便背景的大小從右側(cè)增加。然後，當(dāng)鼠標(biāo)光標(biāo)離開(kāi)鏈接時(shí)，過(guò)渡從右到左反向播放，從而使我們從左側(cè)降低了背景的大小。我們的懸停效果完成了！

但是您說(shuō)我們只需要三個(gè)聲明，有四個(gè)聲明。

的確如此，很不錯(cuò)。左右值可以分別更改為0 0和100％0；而且，由於默認(rèn)情況下我們的梯度已經(jīng)是全高，因此我們可以使用0和100％獲得。

 .hover-1 {
  背景：線(xiàn)性級(jí)別（＃1095C1 0 0）0 / var（-p，0％）no-repeat;
  過(guò)渡：.4S，背景位置0s;
}
.hover-1：懸停{
  -p：100％；
  背景位置：100％；
}

查看背景位置和-P如何使用相同的值？現(xiàn)在，我們可以將代碼降低到三個(gè)聲明：

 .hover-1 {
  背景：線(xiàn)性級(jí)別（＃1095c1 0 0）var（-p，0％） / var（-p，0％）no-repeat;
  過(guò)渡：.4S，背景位置0s;
}
.hover-1：懸停{
  -p：100％；
}

自定義屬性-P正在定義背景位置和大小。在懸停時(shí)，它也將更新它們。這是一個(gè)完美的用例，顯示自定義屬性如何幫助我們減少冗餘代碼並避免不止一次寫(xiě)入屬性。我們使用自定義屬性來(lái)定義我們的設(shè)置，並且僅在懸停時(shí)更新後者。

但是，傑夫所描述的效果是從左開(kāi)始到右結(jié)尾的相反的。當(dāng)似乎我們不能依靠相同的變量時(shí)，我們?cè)撛觞N做？

我們?nèi)匀豢梢允褂靡粋€(gè)變量並稍微更新代碼以實(shí)現(xiàn)相反的效果。我們想要的是從100％增加到0％，而不是0％到100％。我們有100％的差異可以使用calc（）表達(dá)：這樣：

 .hover-1 {
  背景：線(xiàn)性級(jí)別（＃1095c1 0 0）calc（100％-var（-p，0％）） / var（-p，0％）no-repeat;
  過(guò)渡：.4S，背景位置0s;
}
.hover-1：懸停{
  -p：100％；
}

-P將從0％變?yōu)?00％，但由於Calc（），背景的位置將從100％變?yōu)?％。

我們?nèi)匀挥腥萋暶骱鸵粋€(gè)自定義屬性，但效果不同。

在我們轉(zhuǎn)到下一個(gè)懸停效果之前，我想突出顯示您可能注意到的重要事項(xiàng)。在處理自定義屬性時(shí)，我使用0％（帶有單元）而不是單位的0。無(wú)單位零可以在自定義屬性單獨(dú)使用時(shí)工作，但是在Calc（）中會(huì)失敗，我們需要明確定義單元。我可能需要另一篇文章來(lái)解釋這個(gè)怪癖，但請(qǐng)始終記得在處理自定義屬性時(shí)添加該單元。我在Stackoverflow上有兩個(gè)答案（此處和此處），可以更詳細(xì)地進(jìn)行詳細(xì)介紹。

懸停效應(yīng)＃2

為此，我們需要更複雜的過(guò)渡。讓我們看一下分步插圖，以了解正在發(fā)生的事情。

我們首先有一個(gè)背景位置過(guò)渡，然後是背景大小的轉(zhuǎn)變。讓我們將其翻譯成代碼：

 .hover-2 {
  背景圖像：線(xiàn)性級(jí)別（＃1095C1 0 0）;
  背景大?。?00％.08em; /* .08em是我們的固定高度；根據(jù)需要進(jìn)行修改。 */
  背景位置： /* ??? */;
  背景重複：無(wú)重複；
  過(guò)渡：背景大小.3s，背景位置.3s .3s;
}
.Hover-2：懸停{
  過(guò)渡：背景大小.3s .3s，背景位置.3s;
  背景大小：100％100％；
  背景位置： /* ??? */;
}

注意兩個(gè)過(guò)渡值的使用。在懸停的情況下，我們需要首先更改位置，然後更改大小，這就是為什麼我們將大小延遲延遲的原因。在鼠標(biāo)上，我們相反。

現(xiàn)在的問(wèn)題是：我們用於背景位置什麼值？我們把那些空白留給上面。背景大小的值是微不足道的，但是背景位置的值不是。如果我們保持實(shí)際配置，我們將無(wú)法移動(dòng)梯度。

我們的梯度的寬度等於100％，因此我們不能在背景位置上使用百分比值來(lái)移動(dòng)它。

與背景位置一起使用的百分比值始終是一種痛苦，尤其是當(dāng)您第一次使用它們時(shí)。他們的行為是非直覺(jué)的，但定義良好且易於理解，如果我們得到背後的邏輯。我認(rèn)為這將需要另一篇文章來(lái)完整解釋為什麼它是這樣工作的，但是這是我在Stack Overflow上發(fā)布的另一個(gè)“長(zhǎng)”解釋。我建議花幾分鐘閱讀該答案，您稍後再感謝我！

訣竅是將寬度更改為不同於100％的東西。讓我們使用200％。我們不擔(dān)心超過(guò)元素的背景，因?yàn)闊o(wú)論如何溢出都被隱藏了。

 .hover-2 {
  背景圖像：線(xiàn)性級(jí)別（＃1095C1 0 0）;
  背景大小：200％.08EM；
  背景位置：200％100％；
  背景重複：無(wú)重複；
  過(guò)渡：背景大小.3s，背景位置.3s .3s;
}
.Hover-2：懸停{
  過(guò)渡：背景大小.3s .3s，背景位置.3s;
  背景大?。?00％100％；
  背景位置：100％100％；
}

這就是我們得到的：

現(xiàn)在該優(yōu)化我們的代碼了。如果我們從第一個(gè)懸停效應(yīng)中獲取的想法，我們可以使用速記屬性，並撰寫(xiě)更少的聲明來(lái)製作這項(xiàng)工作：

 .hover-2 {
  背景： 
    線(xiàn)性級(jí)別（＃1095C1 0 0）無(wú)重複
    var（-p，200％）100％ / 200％var（-p，.08em）;
  過(guò)渡：.3S var（-t，0s），背景位置.3S calc（.3s-var（-t，0s））;
}
.Hover-2：懸停{
  -p：100％；
  -t：.3s;
}

我們使用速記版本將所有背景屬性添加在一起，然後使用-p表示我們的值。尺寸從.08EM變?yōu)?00％，位置從200％變?yōu)?00％

我還使用另一個(gè)變量-T來(lái)優(yōu)化過(guò)渡屬性。在鼠標(biāo)懸停上，我們將其設(shè)置為.3S值，這給了我們：

過(guò)渡：.3s .3s，背景位置.3S 0s;

在鼠標(biāo)外，-t是未定義的，因此將使用後回來(lái)值：

過(guò)渡：.3s 0s，背景位置.3s .3s;

過(guò)渡中我們不應(yīng)該有背景大小嗎？

這確實(shí)是我們可以做出的另一種優(yōu)化。如果我們不指定任何屬性，則表示“全部”屬性，因此為“全部”屬性（包括背景大小和背景位置）定義了過(guò)渡。然後將其再次定義為背景位置，類(lèi)似於將其定義為背景大小，然後是背景位置。

“相似”與說(shuō)“相同”是不同的。如果您更改懸停的更多屬性，您將看到有所不同，因此在某些情況下，最後一個(gè)優(yōu)化可能不合適。

我們?nèi)匀豢梢詢(xún)?yōu)化代碼並僅使用一個(gè)自定義屬性嗎？

是的，我們可以！ Ana Tudor分享了一篇很棒的文章，解釋瞭如何創(chuàng)建一個(gè)自定義屬性可以更新多個(gè)屬性的干燥開(kāi)關(guān)。我不會(huì)在這裡詳細(xì)介紹，但是我們的代碼可以這樣修改：

 .hover-2 {
  背景： 
    線(xiàn)性級(jí)別（＃1095C1 0 0）無(wú)重複
    Calc（200％-VAR（-i，0） * 100％）100％ / 200％calc（100％ * var（-i，0）.08em）;
  過(guò)渡：.3S calc（var（-i，0） * .3s），背景位置.3S calc（.3s-calc（var（-i，0） * .3s））;
}
.Hover-2：懸停{
  -i：1;
}

- i自定義屬性最初是未定義的，因此使用後返回值0。但是，在懸停時(shí)，我們用1替換0。您可以對(duì)兩種情況進(jìn)行數(shù)學(xué)，並獲取每個(gè)情況的值。您可以將該變量視為一個(gè)“開(kāi)關(guān)”，該變量在懸停時(shí)立即更新我們所有值。

同樣，我們只回到了三個(gè)聲明，以產(chǎn)生非?？岬膽彝ＰЧ?/p>

懸停效應(yīng)＃3

為此，我們將使用兩個(gè)梯度而不是一個(gè)梯度。我們將看到，將多個(gè)梯度組合是創(chuàng)造花哨的懸停效果的另一種方法。

這是我們正在做的事情的圖：

這就是CSS的外觀：

 .hover-3 {
  背景圖像：
    線(xiàn)性級(jí)別（＃1095C1 0 0），
    線(xiàn)性級(jí)別（＃1095C1 0 0）;
  背景重複：無(wú)重複；
  背景大?。?0％.08EM；
  背景位置：
    -100％100％，
    200％0;
  過(guò)渡：背景大小.3s，背景位置.3s .3s;
}
.Hover-3：懸停{
  背景大小：50％100％；
  背景位置：
    0 100％，
    100％0;  
  過(guò)渡：背景大小.3s .3s，背景位置.3s;
}

該代碼幾乎與我們涵蓋的其他懸停效果相同。唯一的區(qū)別是我們有兩個(gè)具有兩個(gè)不同位置的梯度。位置值看起來(lái)可能很奇怪，但是同樣，這與CSS中背景位置屬性的百分比如何工作有關(guān)，因此，如果您想了解牢固的詳細(xì)信息，我強(qiáng)烈建議您閱讀堆棧溢出答案。

現(xiàn)在讓我們優(yōu)化！到目前為止，您現(xiàn)在就可以理解這個(gè)想法 - 我們正在使用速記屬性，自定義屬性和calc（）來(lái)整理。

 .hover-3 {
  -C：無(wú)重複線(xiàn)性級(jí)別（＃1095C1 0 0）;
  背景： 
    var（-c）calc（-100％var（-p，0％））100％ / 50％var（-p，.08em），
    var（-c）calc（200％-var（-p，0％））0 /50％var（-p，.08em）;
  過(guò)渡：.3S var（-t，0s），背景位置.3S calc（.3s-var（-t，0s））;
}
.Hover-3：懸停{
  -p：100％；
  -t：0.3s;
}

我添加了一個(gè)額外的自定義屬性-C，該屬性定義了梯度，因?yàn)樵趦蓚€(gè)地方都使用了相同的梯度。

我在該演示中使用50.1％，而不是在背景大小上使用50％，因?yàn)樗梢苑乐固荻戎g的差距顯示。由於類(lèi)似的原因，我還向職位上增加了1％。

讓我們使用開(kāi)關(guān)變量進(jìn)行第二個(gè)優(yōu)化：

 .hover-3 {
  -C：無(wú)重複線(xiàn)性級(jí)別（＃1095C1 0 0）;
  背景： 
    var（-c）calc（-100％var（-i，0） * 100％）100％ / 50％calc（100％ * var（-i，0）.08em），
    var（-c）calc（200％-var（-i，0） * 100％）0 /50％calc（100％ * var（-i，0）.08em）;
  過(guò)渡：.3S calc（var（-i，0） * .3s），背景位置.3S calc（.3s-var（-i，0） * .3s）;
}
.Hover-3：懸停{
  -i：1;
}

您開(kāi)始在這裡看到模式嗎？我們所產(chǎn)生的影響並不是很困難。這更多是代碼優(yōu)化的“最後一步”。我們首先編寫(xiě)具有許多屬性的詳細(xì)代碼，然後按照簡(jiǎn)單的規(guī)則（例如使用速記，刪除默認(rèn)值，避免冗餘值等）將其減少，以盡可能簡(jiǎn)化事物。

懸停效應(yīng)＃4

我將提高最後效果的困難水平，但是您可以從其他示例中知道足夠多，我懷疑您是否有任何問(wèn)題。

這種懸停效應(yīng)依賴(lài)於兩個(gè)圓錐梯度和更多計(jì)算。

最初，我們?cè)诓襟E1中具有零尺寸的兩個(gè)梯度。我們?cè)诓襟E2中增加了每個(gè)梯度的大小。我們一直增加其寬度，直到它們完全覆蓋元素，如步驟3所示。在那之後，我們將它們滑到底部以更新其位置。這是懸停效應(yīng)的“魔術(shù)”部分。由於兩個(gè)漸變都將使用相同的顏色，因此在步驟4中更改其位置不會(huì)產(chǎn)生視覺(jué)上的差異 - 但是，一旦在步驟5中降低鼠標(biāo)的大小後，我們將看到差異。

如果比較步驟2和步驟5，您會(huì)發(fā)現(xiàn)我們有不同的傾向。讓我們將其翻譯成代碼：

 .Hover-4 {
  背景圖像：
    圓錐級(jí)（/ * ??? */），
    圓錐分子（/ * ??? */）;
  背景位置：
    0 0，
    100％0;
  背景大?。?％200％；
  背景重複：無(wú)重複；
  過(guò)渡：背景大小.4s，背景位置0s;
}
.Hover-4：懸停{
  背景大?。?/* ??? */ 200％;
  背景位置：
    0 100％，
    100％100％；
}

職位很清楚。一個(gè)梯度從左上（0 0）開(kāi)始，在左下角（0 100％）結(jié)束，而另一個(gè)梯度在右上（100％0）開(kāi)始，在右下角（100％100％）結(jié)束。

我們正在使用背景位置和大小的過(guò)渡來(lái)揭示它們。我們只需要背景大小的過(guò)渡值。和以前一樣，背景位置需要立即更改，因此我們?yōu)檫^(guò)渡持續(xù)時(shí)間分配了0S值。

對(duì)於大小，兩個(gè)梯度都需要具有0寬度和兩倍的元素高度（0％200％）。稍後，我們將看到它們的尺寸如何變化。讓我們首先定義梯度配置。

下圖說(shuō)明了每個(gè)梯度的配置：

請(qǐng)注意，對(duì)於第二個(gè)梯度（以綠色表示），我們需要知道在我們創(chuàng)建的圓錐級(jí)別內(nèi)使用它的高度。因此，我將添加一個(gè)線(xiàn)程，以設(shè)置元素的高度，然後為我們遺漏的圓錐梯度值嘗試相同的值。

 .Hover-4 {
  -C：＃1095C1;
  線(xiàn)高：1.2em;
  背景圖像：
    圓錐分子（來(lái)自-135DEG的100％50％，var（-c）90DEG，＃0000 0），＃0000 0），
    圓錐分子（來(lái)自-135DEG，1.2EM 50％，＃0000 90DEG，var（-c）0）;
  背景位置：
    0 0，
    100％0;
  背景大?。?％200％；
  背景重複：無(wú)重複；
  過(guò)渡：背景大小.4s，背景位置0s;
}
.Hover-4：懸停{
  背景大?。?/* ??? */ 200％;
  背景位置：
    0 100％，
    100％100％；
}

我們剩下的最後一件事是找出背景的大小。直覺(jué)上，我們可能會(huì)認(rèn)為每個(gè)梯度都需要佔(zhàn)據(jù)元素寬度的一半，但實(shí)際上還不夠。

We get a gap equal to the height, so we actually need to do is increase the size of each gradient by half the height on hover for them to cover the whole element.

 .Hover-4：懸停{
  背景大?。河?jì)算（50％.6EM）200％；
  背景位置：
    0 100％，
    100％100％；
}

這是我們像以前的示例那樣優(yōu)化它們之後得到的：

 .Hover-4 {
  -C：＃1095C1;
  線(xiàn)高：1.2em;
  背景：
    圓錐分子（來(lái)自-135DEG的100％50％，var（-c）90DEG，＃0000 0） 
      0 var（-p，0％） / var（-s，0％）200％no-repeat，
    圓錐分子（來(lái)自-135deg at 1.2em 50％，＃0000 90DEG，var（-c）0） 
      100％var（-p，0％） / var（-s，0％）200％no-repeat;
  過(guò)渡：.4S，背景位置0s;
}
.Hover-4：懸停{
  -p：100％；
  -s：計(jì)算（50％.6EM）;
}

只有一個(gè)自定義屬性的版本呢？

我會(huì)留給你！在查看了四個(gè)類(lèi)似的懸停效果之後，您應(yīng)該能夠?qū)⒆罱K優(yōu)化降低到單個(gè)自定義屬性。在評(píng)論部分中分享您的作品！沒(méi)有獎(jiǎng)品，但是我們可能會(huì)以不同的實(shí)現(xiàn)和想法使所有人受益！

在我們結(jié)束之前，讓我分享Ana Tudor烹製的最後一個(gè)懸停效果的版本。這是一個(gè)改進(jìn)！但是請(qǐng)注意，由於已知的錯(cuò)誤，它缺乏Firefox支持。儘管如此，這還是一個(gè)很好的主意，它表明瞭如何將梯度與混合模式相結(jié)合，以創(chuàng)造更酷的懸停效果。

總結(jié)

我們做出了四個(gè)超級(jí)懸停效果！即使它們是不同的效果，它們都採(cǎi)用了使用CSS背景屬性，自定義屬性和Calc（）的相同方法。不同的組合使我們能夠製作不同的版本，所有版本都使用相同的技術(shù)使我們擁有乾淨(jìng)，可維護(hù)的代碼。

如果您想獲得一些想法，我製作了500個(gè)（是，500?。彝ＰЧ渲?00個(gè)沒(méi)有偽元素。我們?cè)诒疚闹薪榻B的四個(gè)只是冰山一角！

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