使用背景屬性的涼爽懸停效果

不久前，傑夫（Geoff）寫了一篇有關懸停效果的文章。該效果依賴於CSS偽元素，轉換和過渡的組合。許多評論表明，使用背景屬性可以執行相同的效果。傑夫（Geoff）提到那是他最初的想法，這也是我的想法。我並不是說他登陸的偽元素很糟糕，但是知道實現相同效果的不同方法只會是一件好事。

涼爽的懸停效果系列：

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

在這篇文章中，我們將重新進行懸停效應，但也將其擴展到僅使用CSS背景屬性的其他類型的懸停效果。

您可以在該演示中查看工作中的背景屬性，以及我們如何使用自定義屬性和Calc（）函數進行更多操作。我們將學習如何組合所有這些，因此我們將擁有精美的優化代碼！

懸停效應＃1

讓我們從第一個效果開始，即傑夫（Geoff）在他的文章中詳細介紹的效果。用於實現該效果的代碼如下：

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

如果我們省略了顏色過渡（這是可選的），則只需要三個CSS聲明即可實現效果。您可能會驚訝於代碼有多小，但是您會看到我們如何到達那裡。

首先，讓我們從簡單的背景大小過渡開始：

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

讓我們開始優化。我們首先將梯度轉換為僅使用顏色一次：

背景圖像：線性級別（＃1095C1 0 0）;

語法看起來可能有些奇怪，但是我們告訴瀏覽器一種顏色應用於兩個顏色停止，這足以定義CSS中的梯度。兩種顏色停止均為0，因此瀏覽器會自動使最後一個100％使我們的梯度填充相同的顏色。快捷方式，ftw！

使用背景大小，我們可以省略高度，因為默認情況下梯度是全高。我們可以從背景大小的過渡：0到背景大小：100％。

 .hover-1 {
  背景圖像：線性級別（＃1095C1 0 0）;
  背景大小：0;
  背景重複：無重複；
  過渡：.4s;
}
.hover-1：懸停{
  背景大小：100％；
}

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

 .hover-1 {
  背景圖像：線性級別（＃1095C1 0 0）;
  背景大小：var（-p，0％）;
  背景重複：無重複；
  過渡：.4s;
}
.hover-1：懸停{
  -p：100％；
}

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

現在，讓我們使用速記版本組合所有背景屬性以獲取：

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

我們越來越近了！請注意，我引入了一個左值（對於背景位置），在定義背景速記中的大小時，這是強制性的。另外，我們無論如何都需要它來實現我們的懸停效果。

我們還需要更新懸停的位置。我們可以通過兩個步驟進行操作：

1. 增加鼠標懸停在鼠標右側的大小。
2. 降低鼠標左側的大小。

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

我們在代碼中添加了兩件事：

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

這意味著，在懸停的情況下，我們立即將背景位置從左側更改（請參閱，我們需要該值！）向右更改，以便背景的大小從右側增加。然後，當鼠標光標離開鏈接時，過渡從右到左反向播放，從而使我們從左側降低了背景的大小。我們的懸停效果完成了！

但是您說我們只需要三個聲明，有四個聲明。

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

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

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

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

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

但是，傑夫所描述的效果是從左開始到右結尾的相反的。當似乎我們不能依靠相同的變量時，我們該怎麼做？

我們仍然可以使用一個變量並稍微更新代碼以實現相反的效果。我們想要的是從100％增加到0％，而不是0％到100％。我們有100％的差異可以使用calc（）表達：這樣：

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

-P將從0％變為100％，但由於Calc（），背景的位置將從100％變為0％。

我們仍然有三份聲明和一個自定義屬性，但效果不同。

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

懸停效應＃2

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

我們首先有一個背景位置過渡，然後是背景大小的轉變。讓我們將其翻譯成代碼：

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

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

現在的問題是：我們用於背景位置什麼值？我們把那些空白留給上面。背景大小的值是微不足道的，但是背景位置的值不是。如果我們保持實際配置，我們將無法移動梯度。

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

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

訣竅是將寬度更改為不同於100％的東西。讓我們使用200％。我們不擔心超過元素的背景，因為無論如何溢出都被隱藏了。

 .hover-2 {
  背景圖像：線性級別（＃1095C1 0 0）;
  背景大小：200％.08EM；
  背景位置：200％100％；
  背景重複：無重複；
  過渡：背景大小.3s，背景位置.3s .3s;
}
.Hover-2：懸停{
  過渡：背景大小.3s .3s，背景位置.3s;
  背景大小：200％100％；
  背景位置：100％100％；
}

這就是我們得到的：

現在該優化我們的代碼了。如果我們從第一個懸停效應中獲取的想法，我們可以使用速記屬性，並撰寫更少的聲明來製作這項工作：

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

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

我還使用另一個變量-T來優化過渡屬性。在鼠標懸停上，我們將其設置為.3S值，這給了我們：

過渡：.3s .3s，背景位置.3S 0s;

在鼠標外，-t是未定義的，因此將使用後回來值：

過渡：.3s 0s，背景位置.3s .3s;

過渡中我們不應該有背景大小嗎？

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

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

我們仍然可以優化代碼並僅使用一個自定義屬性嗎？

是的，我們可以！ Ana Tudor分享了一篇很棒的文章，解釋瞭如何創建一個自定義屬性可以更新多個屬性的干燥開關。我不會在這裡詳細介紹，但是我們的代碼可以這樣修改：

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

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

同樣，我們只回到了三個聲明，以產生非常酷的懸停效果！

懸停效應＃3

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

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

這就是CSS的外觀：

 .hover-3 {
  背景圖像：
    線性級別（＃1095C1 0 0），
    線性級別（＃1095C1 0 0）;
  背景重複：無重複；
  背景大小：50％.08EM；
  背景位置：
    -100％100％，
    200％0;
  過渡：背景大小.3s，背景位置.3s .3s;
}
.Hover-3：懸停{
  背景大小：50％100％；
  背景位置：
    0 100％，
    100％0;  
  過渡：背景大小.3s .3s，背景位置.3s;
}

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

現在讓我們優化！到目前為止，您現在就可以理解這個想法 - 我們正在使用速記屬性，自定義屬性和calc（）來整理。

 .hover-3 {
  -C：無重複線性級別（＃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）;
  過渡：.3S var（-t，0s），背景位置.3S calc（.3s-var（-t，0s））;
}
.Hover-3：懸停{
  -p：100％；
  -t：0.3s;
}

我添加了一個額外的自定義屬性-C，該屬性定義了梯度，因為在兩個地方都使用了相同的梯度。

我在該演示中使用50.1％，而不是在背景大小上使用50％，因為它可以防止梯度之間的差距顯示。由於類似的原因，我還向職位上增加了1％。

讓我們使用開關變量進行第二個優化：

 .hover-3 {
  -C：無重複線性級別（＃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）;
  過渡：.3S calc（var（-i，0） * .3s），背景位置.3S calc（.3s-var（-i，0） * .3s）;
}
.Hover-3：懸停{
  -i：1;
}

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

懸停效應＃4

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

這種懸停效應依賴於兩個圓錐梯度和更多計算。

最初，我們在步驟1中具有零尺寸的兩個梯度。我們在步驟2中增加了每個梯度的大小。我們一直增加其寬度，直到它們完全覆蓋元素，如步驟3所示。在那之後，我們將它們滑到底部以更新其位置。這是懸停效應的“魔術”部分。由於兩個漸變都將使用相同的顏色，因此在步驟4中更改其位置不會產生視覺上的差異 - 但是，一旦在步驟5中降低鼠標的大小後，我們將看到差異。

如果比較步驟2和步驟5，您會發現我們有不同的傾向。讓我們將其翻譯成代碼：

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

職位很清楚。一個梯度從左上（0 0）開始，在左下角（0 100％）結束，而另一個梯度在右上（100％0）開始，在右下角（100％100％）結束。

我們正在使用背景位置和大小的過渡來揭示它們。我們只需要背景大小的過渡值。和以前一樣，背景位置需要立即更改，因此我們為過渡持續時間分配了0S值。

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

下圖說明了每個梯度的配置：

請注意，對於第二個梯度（以綠色表示），我們需要知道在我們創建的圓錐級別內使用它的高度。因此，我將添加一個線程，以設置元素的高度，然後為我們遺漏的圓錐梯度值嘗試相同的值。

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

我們剩下的最後一件事是找出背景的大小。直覺上，我們可能會認為每個梯度都需要佔據元素寬度的一半，但實際上還不夠。

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：懸停{
  背景大小：計算（50％.6EM）200％；
  背景位置：
    0 100％，
    100％100％；
}

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

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

只有一個自定義屬性的版本呢？

我會留給你！在查看了四個類似的懸停效果之後，您應該能夠將最終優化降低到單個自定義屬性。在評論部分中分享您的作品！沒有獎品，但是我們可能會以不同的實現和想法使所有人受益！

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

總結

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

如果您想獲得一些想法，我製作了500個（是，500！）懸停效果，其中400個沒有偽元素。我們在本文中介紹的四個只是冰山一角！

以上是使用背景屬性的涼爽懸停效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！