如何在 CSS 中从 HEX 过渡到渐变？

Question

如何创建从 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);
}

<div>test</div>

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

JSFiddle

Answer 1

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

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

如何在 CSS 中从 HEX 过渡到渐变？

How to transition from HEX to gradient in CSS?

css

hex

radial-gradients

css-transitions