滑動背景顏色動畫
您在使用 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>
說明：
另一種方法：
雖然漸變影像方法效果很好，但您也可以考慮創建一個具有所需背景的單獨元素，並使用CSS 過渡來向上滾動。但是，此方法可能涉及額外的標記和複雜性。
以上是如何使用 CSS 建立懸停時滑動背景顏色動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
