如何在 CSS 中从 HEX 过渡到渐变？ [复制]答案

【问题标题】：How to transition from HEX to gradient in CSS? [duplicate]如何在 CSS 中从 HEX 过渡到渐变？ [复制]
【发布时间】：2020-07-11 03:59:26
【问题描述】：

如何创建从 HEX 颜色到渐变再返回的背景过渡？

我的变量 --base 只是白色，十六进制和渐变之间的过渡不起作用。

:root {
  --app: radial-gradient( circle 753.6px at 10% 20%, rgba(248,167,221,1) 0%, rgba(230,192,254,1) 41%, rgba(169,217,243,1) 90% );
  --base: #FFFFFF; /* radial-gradient(#FFFFFF, #FFFFFF) */
}

body {
  background: #DDD;
}

div {
  height: 100px;
  line-height: 100px;
  text-align: center;
  width: 300px;
  background: var(--base);
  transition: all 1s ease;
}
div:hover {
  background: var(--app);
}

&lt;div&gt;test&lt;/div&gt;

当我尝试将 --base 更改为 radial-gradient(#FFFFFF, #FFFFFF) 时也不起作用。有没有人解决这个问题？

JSFiddle

【问题讨论】：

不确定我是否遇到了您的问题。你有白色的 div，你将鼠标悬停在它上面并立即改变颜色。这种颜色褪色有问题吗？
我想应用一个不起作用的过渡。无论转换值如何，背景都会立即更改。我想要从这种白色到渐变并返回的平滑 1s 过渡。

标签： css hex css-transitions radial-gradients

【解决方案1】：

我为您创建了一个解决方案：https://jsfiddle.net/axgq60ro/4/ 为了在这两者之间创建过渡，您需要使用 z-index 的技巧。欲了解更多信息，请查看这篇文章：https://keithjgrant.com/posts/2017/07/transitioning-gradients/ 祝你有美好的一天！

div:hover::before {
   opacity: 1;
}

【讨论】：