渐变过渡

Question

我在渐变上添加过渡时遇到问题。我知道无法过渡渐变，因此找到了解决方案。 https://keithjgrant.com/posts/2017/07/transitioning-gradients/ 背景图像应及时显示。此按钮的背景颜色为：黑色； ，并且应随着鼠标悬停而在渐变上更改。知道如何在悬停伪类上做到这一点吗？

.register {
  float: right;
  padding: 0 20px;
  text-transform: uppercase;
}

.register a {
  border: 1px solid white;
  border-radius: 4px;
}

.register a:hover {
  background-image: linear-gradient( to bottom right, rgb(40, 40, 40), rgb(60, 60, 60));
}

<li class="register"><a href="#">register</a></li>

Answer 1

您可以尝试从白色过渡到黑色（如果按照您的建议代码段，这就是您想要的）。

<a class="btn btn-1">Hover me</a>

伴随CSS：

.btn {
  flex: 1 1 auto;
  margin: 10px;
  padding: 30px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background: linear-gradient(90deg, var(--c1, #fff), var(--c2, #333) 51%, var(--c1, #000)) var(--x, 0)/ 200%;
  color: white;
 }


.btn:hover { --x: 100%; }

.btn-1 {
  --c1: #fff;
  --c2: #000;
}

更多信息请见我的小提琴

https://jsfiddle.net/80f7t1ej/