过渡效果不适用于具有线性渐变到底部的悬停

Question

我有两个框，每个框都有 :hover 选择器，用于过渡线性渐变背景图像。到顶部的线性渐变与过渡完美配合（下面的代码）。

.box7:hover{
            color: #FFF; 
            background-image: linear-gradient(to top, #000 50%, #fff 50%);
            background-position: 0% 100%;
            background-size: 100% 200%;
            transition: all 1s ease;
            border: none;
        }

但我在线性渐变到底部时遇到问题，过渡效果似乎不起作用（下面的代码）。

.box2:hover{
            color: #FFF; 
            background-image: linear-gradient(to bottom, #000 50%, #fff 50%);
            background-position: 100% 0%;
            background-size: 100% 200%;
            transition: all 1s ease;
            border: none;
        }

如有任何帮助，我们将不胜感激。下面是要检查的 link（将鼠标悬停在所有框上） https://conrad93.github.io/linear-gradient-sliding-effect/boxbox.html

Answer 1

问题是当您没有将鼠标悬停在元素上时，您的样式不会被应用。因此，解决方案是将这些样式也应用到元素的默认状态。像这样：

// html

<div class="container">
  <div class="box box-1"></div>
  <div class="box box-2"></div>
  <div class="box box-3"></div>
  <div class="box box-4"></div>
</div>

//  CSS

.container {
  display: flex;
}

.box {
  width: 100px;
  height: 100px;
  border: solid 1px red;
  margin: 5px;
  transition: all .4s ease;
  background-color: lightgoldenrodyellow;
}

.box-1 {
  background-image: linear-gradient(to top, crimson 50%, lightgoldenrodyellow 50%);
  background-position: 0% 0%;
  background-size: 100% 200%;
}

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

.box-2 {
  background-image: linear-gradient(to bottom, crimson 50%, lightgoldenrodyellow 50%);
  background-position: 0% -100%;
  background-size: 100% 200%;
}

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

.box-3 {
  background-color: crimson;
  background-image: linear-gradient(to bottom left, crimson 50%, lightgoldenrodyellow 50%);
  background-position: 0% 100%;
  background-size: 200% 200%;
  background-repeat: no-repeat;
}

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

.box-4 {
  background-image: linear-gradient(to top right, crimson 50%, lightgoldenrodyellow 50%);
  background-position: 0% -100%;
  background-size: 200% 200%;
  background-repeat: no-repeat;
}

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

在悬停状态的声明块中，您只需声明那些正在更改的属性，在本例中为 background-position。

这是 JsFiddle 上的一个工作示例。

您可能还希望对角线渐变从元素的左下角向上移动。这做起来有点棘手，但您可以在示例中看到它的工作原理。要了解其工作原理，您需要了解 background-position 属性中的 x 和 y 值的含义。 MDN docs 是学习的好地方。

过渡效果不适用于具有线性渐变到底部的悬停

transition effect not working on hover with linear-gradient to bottom

css

linear-gradients

css-transitions