通过幻灯片动画过渡背景色

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>

Answer 2

@Sampson答案的扩展，我将在其中考虑更友好的值更容易理解：

.box {
  width: 100px;
  height: 100px;
  display:inline-block;
  background-size: 200% 200%;
  transition: background-position 1s;
}
.to-top{
  background-image: linear-gradient(to top, red 50%, black 0);
  background-position: top;
}
.to-top:hover {
  background-position: bottom;
}
.to-bottom{
  background-image: linear-gradient(to bottom, red 50%, black 0);
  background-position: bottom;
}
.to-bottom:hover {
  background-position: top;
}
.to-left{
  background-image: linear-gradient(to left, red 50%, black 0);
  background-position: left;
}
.to-left:hover {
  background-position: right;
}
.to-right{
  background-image: linear-gradient(to right, red 50%, black 0);
  background-position: right;
}
.to-right:hover {
  background-position: left;
}

<div class="box to-top"></div>
<div class="box to-bottom"></div>
<div class="box to-left"></div>
<div class="box to-right"></div>

以下是更花哨的过渡：

.box {
  width: 100px;
  height: 100px;
  display:inline-block;
  transition:  1s;
}
.to-center{
  background: 
    linear-gradient(black,black) no-repeat,
    red;
  background-size: 100% 100%;
  background-position:center;
}
.to-center:hover {
  background-size: 0% 100%; /* Or 100% 0% */
}
.from-center{
  background: 
    linear-gradient(red,red) no-repeat,
    black;
  background-size: 0% 100%;  /* Or 100% 0% */
  background-position:center;
}
.from-center:hover {
  background-size: 100% 100%;
}
.diagonal-right{
  background-image:linear-gradient(to bottom right,red 49.5%,black 50%);
  background-size: 200% 200%;
  background-position:bottom right;
}
.diagonal-right:hover {
  background-position:top left;
}
.diagonal-left{
  background-image:linear-gradient(to bottom left,red 49.5%,black 50%);
  background-size: 200% 200%;
  background-position:bottom left;
}
.diagonal-left:hover {
  background-position:top right;
}

<div class="box to-center"></div>
<div class="box from-center"></div>
<div class="box diagonal-right"></div>

<div class="box diagonal-left"></div>

相关问题以获取有关background-position如何与background-size结合使用的更多详细信息：在线性梯度上使用带有背景位置的百分比值

<小时 />

使用圆形的其他想法：

.box {
  width: 100px;
  height: 100px;
  display:inline-block;
  transition:  1s;
}
.to-center{
  background: 
    radial-gradient(farthest-side,black 98%,transparent) no-repeat,
    red;
  background-size: 150% 150%;
  background-position:center;
}
.to-center:hover {
  background-size: 0% 0%;
}
.from-center{
  background: 
    radial-gradient(farthest-side,red 98%,transparent) no-repeat,
    black;
  background-size: 0% 0%;  
  background-position:center;
}
.from-center:hover {
  background-size: 150% 150%;
}
.diagonal-right{
  background:radial-gradient(farthest-side,red 48%,transparent 50%) no-repeat,
    black;
  background-size: 300% 300%;
  background-position:bottom right;
}
.diagonal-right:hover {
  background-position:center;
}
.to-left{
  background:radial-gradient(farthest-side,red 48%,transparent 50%) no-repeat,
    black;
  background-size: 400% 400%;
  background-position:left;
}
.to-left:hover {
  background-position:center;
}

<div class="box to-center"></div>
<div class="box from-center"></div>
<div class="box diagonal-right"></div>

<div class="box to-left"></div>

相关： 如何使用 CSS 对径向渐变进行动画处理？