在本文中，我將向您展示使用 和 制作一些有益的懸停背景效果的方法。background-position background-size backgroud-image

　　了解如何“后臺(tái)位置”工作

　　在今天構(gòu)建演示之前，讓我們學(xué)習(xí)如何使用百分比值。因?yàn)閹缀踉谘菔局校覀儗⑹褂帽疚闹械陌俜直戎颠M(jìn)行構(gòu)建。background-position

　　首先，不要以相同的方式處理 。我將在下面顯示有關(guān)如何使用和：background-positionposition position top left

　　在這個(gè)例子中，我們可以看到，當(dāng)我們想要定義一個(gè)從“元素B”到“元素A”左側(cè)和頂部的空間范圍時(shí)，您可以將我們的范圍值定義為CSS，如下所示：

　　與 不同，使用其他方式。從背景到元素的空間范圍將按以下方式計(jì)算：position background-position

　　為了便于理解，您可能會(huì)在此圖像中看到一個(gè)示例：

　　在此示例中，我將“左背景位置”值定義為“100%”，從圖像到左側(cè)的范圍值為 50%。請記住此公式，因?yàn)槲覀儗⒃诒疚闹袑⑵溆糜谠S多示例。

　　具有“背景大小”的簡單懸停效果

　　這是一個(gè)理論!讓我們開始僅使用 和 構(gòu)建一些基本示例。我們將通過更改背景圖像的寬度或高度值來制作四個(gè)背景懸停效果的示例。在這些示例中，我們將使用背景圖像作為 帶有 的綠色背景。background-sizebackground-positionlinear-gradient

　　background: linear-gradient(#488566 0 0);

　　讓我們從第一個(gè)也是最簡單的例子開始。這是一個(gè)文本，當(dāng)它懸停時(shí)，它將從左到右填充背景色。為此，我們只需要從 0% 開始，并在 中將此值設(shè)置為 100%。為了使此動(dòng)畫平滑轉(zhuǎn)換，我們需要設(shè)置一個(gè)轉(zhuǎn)換時(shí)間的值，在這里我將其設(shè)置為“0.4s”。background-size:hover

　　讓我們看看我們的結(jié)果：

　　就是這么簡單！在上面的示例中，我們通過更改 的寬度來制作懸停效果。如果我們改變高度而不是寬度會(huì)發(fā)生什么？讓我們看看這段代碼及其結(jié)果：background-size

　　它的工作原理！我認(rèn)為這是毫不費(fèi)力的。是否要制作與上述示例相反的示例類似的示例?背景色將從右到左和從下到上填充。為此，我只需要將 設(shè)置為 100%，以確保背景始終位于元素的底部或右側(cè)。這些情況有兩個(gè)示例：background-position

　　你看到了嗎?只需要更改值，我們就可以反轉(zhuǎn)懸停效果。在下一部分中，我們將嘗試使用 做一些示例。這是這部分的筆：background-position transitions

　　使用單個(gè)過渡屬性創(chuàng)建效果

　　在上面的示例中，我們用 和 做了“回頭”效果。在這一部分中，我們將構(gòu)建“單向”效果，這與“回頭”效果不同。我們這里有一個(gè)小例子，當(dāng)元素懸停時(shí)，背景色將從左到右填充，如果元素沒有懸停，則從左到右刪除。background-size background-position

　　要使這些懸停效果，我們需要在上面的示例中修改 和 。為了便于理解，我將在這里逐步制作并解釋一個(gè)示例。transition background-position

　　我選擇的示例是從左到右的“單向”懸停。在這種效果中，我們有五種狀態(tài)“懸停前”，“開始懸停”，“完全懸停”，“開始取消懸停”和“取消懸停”。

　　為此，我們需要編譯上面的兩個(gè)示例。在“開始懸停”階段，背景色需要從左到右填充。為此，我們將背景大小從0%填充到100%，并將其設(shè)置為0%。在“開始解鎖”中，我們將從100%設(shè)置為0%，并將設(shè)置100%。此步驟中的一件重要事情是 。如您所見，我們只想通過更改背景大小來制作效果。這意味著我們只需要為 設(shè)置 的轉(zhuǎn)換時(shí)間。以下是此懸停和結(jié)果的 CSS 代碼：background-position background-size background-position transition background-size

　　它運(yùn)作良好。您是否想知道如果我們不為所有屬性進(jìn)行設(shè)置會(huì)發(fā)生什么?我看看：transition

　　這種效應(yīng)是混亂的，因?yàn)楹驼谕瑫r(shí)發(fā)生的轉(zhuǎn)變。這就是為什么我只設(shè)置為.請注意，請考慮我們需要做出效果的轉(zhuǎn)換。在進(jìn)入下一部分之前，我將嘗試完成本部分中的其余示例。background-size background-position transition background-size

　　我認(rèn)為在理解了本節(jié)中的第一個(gè)示例之后，您可以輕松做到這一點(diǎn)。在這一部分中，我們學(xué)習(xí)了如何使用單個(gè)過渡屬性創(chuàng)建效果。在下一部分中，我們將編譯許多過渡屬性，并制作一些令人敬畏的懸停效果。delay

　　如果您想測試或修改某些內(nèi)容，讓我們檢查此筆。

　　使用多個(gè)過渡屬性和延遲使效果

　　在上面的所有示例中，我們只使用單個(gè)屬性效果來制作效果。在這一部分中，我們將學(xué)習(xí)使用許多過渡屬性制作效果的方法，并使用 來控制它們。讓我們看一下我們將在這一部分中構(gòu)建的示例。delay

　　我認(rèn)為這很有趣。要制作它們，我們只需要 和 。不需要 、 、 子元素或類似的東西。正如我們在照片中看到的，我們需要在懸停效果中做兩個(gè)動(dòng)作。第一個(gè)動(dòng)作是使文本下方的行，此行將從左到右填充。第二個(gè)操作是用顏色從下到上填充元素的其余部分。background-position background-size transition before after

　　在編碼之前，我認(rèn)為我們需要為這種效果提出一個(gè)想法。因?yàn)槲覀冎皇褂靡粋€(gè)背景，所以在這種情況下，我們不能對一個(gè)屬性進(jìn)行兩次轉(zhuǎn)換。這就是為什么我有另一個(gè)想法來使這種效果與 和 .在我的想法中，我們需要定義一個(gè)高度較小的背景(也許是0.1rem)。此背景將像下面的照片一樣從元素中移出。background-position background-size background-position

　　現(xiàn)在，我們將規(guī)劃懸停效果。為此，我們將執(zhí)行兩個(gè)操作。第一個(gè)操作是將背景移動(dòng)到元素的內(nèi)部。第二個(gè)操作是用 填充從底部到元素其余部分的背景。background-size

　　讓我們遵循這個(gè)計(jì)劃。第一步，在元素外部制作背景。因?yàn)?不像 ，所以我們不能設(shè)置一個(gè)負(fù)值來移動(dòng)背景到元素的外部。您還記得計(jì)算背景的 x 偏移量和 y 偏移量的方法嗎?我再把它放在這里：background-position position

　　基于它，讓我們找到符合x值大于零的方程的值。我們有許多符合這個(gè)等式的值。但是我會(huì)選擇200%的x和200%的y。這意味著我們將具有“200%0.1rem”和“200%100%”的值。這是此步驟的照片：(100% — x) * y = -xbackground-size background-position

　　讓我們轉(zhuǎn)到懸停步驟。第一個(gè)操作是移動(dòng)元素內(nèi)部的背景。根據(jù)等式，我們可以很容易地找到y(tǒng)的值，“100%”。關(guān)于 ，我們只需要將值從“0.1rem”提高到“100%”。關(guān)于 ，如果要在多個(gè)進(jìn)程中運(yùn)行多個(gè)屬性，可以定義該值。在我們的例子中，我們想要首先運(yùn)行的轉(zhuǎn)換，我們只需要設(shè)置與持續(xù)時(shí)間相同的值的延遲時(shí)間。這是我的代碼：(100%-200%) * y = 100%background-size transition delay background-position background-size background-position

　　讓我們檢查結(jié)果：

　　我認(rèn)為我們的想法按照我們的計(jì)劃運(yùn)作良好。基于這個(gè)例子，我認(rèn)為我們可以制作懸停效果，從右到左填充背景。我們需要改變的是背景的位置(值)。如果我們想將背景移到右側(cè)元素之外，我們只需要稍微修改上面的等式。這里將是.我們可以發(fā)現(xiàn)x和y是“200%”和“-200%”。以下是我們針對此更改的代碼。background-position(100%-x) * y = x

　　在這里，我們得到的結(jié)果：

　　我認(rèn)為我們可以進(jìn)入下一部分，我們將在多個(gè)背景下工作。這是筆和其他例子：

　　使用多個(gè)背景制作一些懸停效果

　　從第一部分到上一部分，我們只使用一個(gè)背景來制作懸停效果。在這些例子中，我們可以看到基本流程是背景將從一個(gè)地方填充到元素的其余部分。我猜你有一些背景效果，以前在很多地方都發(fā)生過。在這一部分中，我們將制作一些具有多個(gè)背景的懸停效果。如果您了解前面的部分，則可以輕松完成此部分。

　　要定義多個(gè)背景，我們只需對單個(gè)背景執(zhí)行相同的操作即可。這些背景由逗號(hào)“，”分隔。下面是一個(gè)示例代碼和結(jié)果。

　　使用多個(gè)背景可以幫助我們將懸停效果編譯為一個(gè)效果。我想我們可以做兩個(gè)基本的例子，它們是從上面的例子中編譯出來的。我們將要構(gòu)建這些效果。

　　在第一個(gè)示例中，我們只需要編譯“簡單懸停效果與”部分中的兩個(gè)示例。第一個(gè)背景將從左到右開始，第二個(gè)背景將從右到左開始。這很簡單，讓我們看看代碼：background-size

　　在此代碼中，我將寬度值用作“51%”，因?yàn)槲覀儾恍枰畛涿總€(gè)背景中的所有元素內(nèi)容。

　　我們也對第二個(gè)示例執(zhí)行相同的操作，只需要編譯上面的兩個(gè)示例即可。這是我的代碼和它們的結(jié)果：

　　這種方式也適用于具有許多過渡和延遲的懸停效果。讓我們編譯邊框示例！

　　這是一個(gè)很棒的懸停效果。只是與和不需要任何，或Java腳本...back ground before after。