渐变过渡

Question

我在添加渐变过渡时遇到问题。我知道过渡梯度是不可能的，我找到了解决方案。 https://keithjgrant.com/posts/2017/07/transitioning-gradients/ 背景图像应及时显示。这个按钮有 background-color: black; 并且应该随着悬停而改变渐变。知道如何在悬停伪类上实现吗？

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

查看我的fiddle了解更多

https://jsfiddle.net/80f7t1ej/

渐变过渡

Transition on gradient

css

gradient

hover

gradient-descent