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

使用滑動動畫變換背景顏色

尋求透過CSS 過渡來改變懸停時元素的背景色調，您面臨的挑戰是達到向上滾動的效果。目前的 CSS 程式碼會淡化背景，但您需要平滑的幻燈片動畫。

一種方法是利用背景影像或漸層並仔細調整背景位置。此技術使您能夠從底部滑動背景。

請考慮以下範例：

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

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

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

使用此方法，背景最初在上半部顯示紅色，然後顯示黑色在下半部。懸停時，背景向上滑動，將紅色平滑過渡到整個元素的高度。

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