亚洲国产成人va在线观看天堂,日韩av影院在线观看

涼爽的懸停效果系列：

懸停效應(yīng)＃4

總結(jié)

首頁

web前端

css教程

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

Joseph Gordon-Levitt

Mar 13, 2025 am 11:27 AM

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

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

涼爽的懸停效果系列：

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

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

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

懸停效應(yīng)＃1

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

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

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

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

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

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

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

語法看起來可能有些奇怪，但是我們告訴瀏覽器一種顏色應(yīng)用于兩個顏色停止，這足以定義CSS中的梯度。兩種顏色停止均為0，因此瀏覽器會自動使最后一個100％使我們的梯度填充相同的顏色?？旖莘绞剑琭tw！

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

 .hover-1 {
  背景圖像：線性級別（＃1095C1 0 0）;
  背景大?。?;
  背景重復(fù)：無重復(fù)；
  過渡：.4s;
}
.hover-1：懸停{
  背景大?。?00％；
}

讓我們介紹一個自定義屬性，以避免重復(fù)背景大?。?/p>

 .hover-1 {
  背景圖像：線性級別（＃1095C1 0 0）;
  背景大?。簐ar（-p，0％）;
  背景重復(fù)：無重復(fù)；
  過渡：.4s;
}
.hover-1：懸停{
  -p：100％；
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

但是，杰夫所描述的效果是從左開始到右結(jié)尾的相反的。當(dāng)似乎我們不能依靠相同的變量時，我們該怎么做？

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

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

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

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

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

懸停效應(yīng)＃2

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

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

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

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

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

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

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

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

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

這就是我們得到的：

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

 .hover-2 {
  背景： 
    線性級別（＃1095C1 0 0）無重復(fù)
    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變?yōu)?00％，位置從200％變?yōu)?00％

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

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

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

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

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

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

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

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

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

 .hover-2 {
  背景： 
    線性級別（＃1095C1 0 0）無重復(fù)
    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。您可以對兩種情況進(jìn)行數(shù)學(xué)，并獲取每個情況的值。您可以將該變量視為一個“開關(guān)”，該變量在懸停時立即更新我們所有值。

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

懸停效應(yīng)＃3

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

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

這就是CSS的外觀：

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

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

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

 .hover-3 {
  -C：無重復(fù)線性級別（＃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，該屬性定義了梯度，因?yàn)樵趦蓚€地方都使用了相同的梯度。

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

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

 .hover-3 {
  -C：無重復(fù)線性級別（＃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;
}

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

懸停效應(yīng)＃4

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

這種懸停效應(yīng)依賴于兩個圓錐梯度和更多計(jì)算。

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

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

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

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

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

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

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

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

 .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;
  背景大?。?％200％；
  背景重復(fù)：無重復(fù)；
  過渡：背景大小.4s，背景位置0s;
}
.Hover-4：懸停{
  背景大小： /* ??? */ 200％;
  背景位置：
    0 100％，
    100％100％；
}

我們剩下的最后一件事是找出背景的大小。直覺上，我們可能會認(rè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;
  線高：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：計(jì)算（50％.6EM）;
}