使用滑動動畫變換背景顏色
尋求透過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中文網其他相關文章！
