css - 通过幻灯片动画过渡背景颜色

Question

我正在尝试使用 CSS 过渡更改鼠标悬停时元素的背景颜色。我想通过让它从底部向上滚动来做到这一点。我可以使用它淡化背景，但我希望它向上滑动:

-webkit-transition: background-color 0.5s linear;
-moz-transition: background-color 0.5s linear;
-o-transition: background-color 0.5s linear;  
transition: background-color 0.5s linear;

另一个想法是，向上滚动应用了背景的单独元素会更好吗？

Answer 1

为了向上滑动背景色，您需要使用背景图像或某种渐变，同时逐渐调整background-position:

.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%;
}

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