通过向上滑动动画过渡背景色

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%);
    transition: background-position 1s;
}

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