如何使用 CSS 建立懸停時滑動背景顏色動畫？

滑動背景顏色動畫

您在使用 CSS 過渡創建懸停時滑動背景顏色動畫時遇到了挑戰。雖然你可以實現淡入淡出的效果，但你希望讓背景從底部向上滾動。

解決方案：使用背景圖片

實現幻燈片效果，僅靠 CSS 過渡是不夠的。相反，您需要建立背景圖像（例如漸層），並隨著時間的推移調整其位置。具體操作方法如下：

程式碼範例：

.box {
    width: 200px; 
    height: 100px;
    background-size: 100% 200%;
    background-image: linear-gradient(to bottom, red 50%, black 50%);
    -webkit-transition: background-position 1s;
    -moz-transition: background-position 1s;
    transition: background-position 1s;
}

.box:hover {
    background-position: 0 -100%;
}

H TML標記：

<div class="box"></div>

說明：

• .box類別定義背景屬性，包括大小、漸層影像和過渡持續時間.
• 懸停時，background-position屬性調整為-100%，導致漸變影像滑動向上，露出底部的紅色。
• 使用漸層影像可以使顏色從一端到另一端平滑過渡。

另一種方法：

雖然漸變影像方法效果很好，但您也可以考慮創建一個具有所需背景的單獨元素，並使用CSS 過渡來向上滾動。但是，此方法可能涉及額外的標記和複雜性。

以上是如何使用 CSS 建立懸停時滑動背景顏色動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！