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

Posted 2023-03-06

【中文标题】如何在 CSS 中从 HEX 过渡到渐变？ [复制]

【英文标题】：How to transition from HEX to gradient in CSS? [duplicate]

【发布时间】：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);

<div>test</div>

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

JSFiddle

【问题讨论】：

不确定我是否遇到了您的问题。你有白色的 div，你将鼠标悬停在它上面并立即改变颜色。这种颜色褪色有问题吗？

我想应用一个不起作用的过渡。无论转换值如何，背景都会立即更改。我想要从这种白色到渐变并返回的平滑 1s 过渡。

【参考方案1】：

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

div:hover::before 
   opacity: 1;