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

　　了解如何“后臺位置”工作

　　在今天構建演示之前，讓我們學習如何使用百分比值。因為幾乎在演示中，我們將使用本文中的百分比值進行構建。background-position

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

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

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

　　為了便于理解，您可能會在此圖像中看到一個示例：

　　在此示例中，我將“左背景位置”值定義為“100%”，從圖像到左側的范圍值為 50%。請記住此公式，因為我們將在本文中將其用于許多示例。

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

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

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

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

　　讓我們看看我們的結果：

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

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

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

　　使用單個過渡屬性創建效果

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

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

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

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

　　它運作良好。您是否想知道如果我們不為所有屬性進行設置會發生什么?我看看：transition

　　這種效應是混亂的，因為和正在同時發生的轉變。這就是為什么我只設置為.請注意，請考慮我們需要做出效果的轉換。在進入下一部分之前，我將嘗試完成本部分中的其余示例。background-size background-position transition background-size

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

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

　　使用多個過渡屬性和延遲使效果

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

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

　　在編碼之前，我認為我們需要為這種效果提出一個想法。因為我們只使用一個背景，所以在這種情況下，我們不能對一個屬性進行兩次轉換。這就是為什么我有另一個想法來使這種效果與 和 .在我的想法中，我們需要定義一個高度較小的背景(也許是0.1rem)。此背景將像下面的照片一樣從元素中移出。background-position background-size background-position

　　現在，我們將規劃懸停效果。為此，我們將執行兩個操作。第一個操作是將背景移動到元素的內部。第二個操作是用 填充從底部到元素其余部分的背景。background-size

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

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

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

　　讓我們檢查結果：

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

　　在這里，我們得到的結果：

　　我認為我們可以進入下一部分，我們將在多個背景下工作。這是筆和其他例子：

　　使用多個背景制作一些懸停效果

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

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

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

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

　　在此代碼中，我將寬度值用作“51%”，因為我們不需要填充每個背景中的所有元素內容。

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

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

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