使用带有渐变背景的 CSS3 过渡

小编典典

使用带有渐变背景的 CSS3 过渡

all

我正在尝试在缩略图上使用 CSS
进行悬停转换，以便在悬停时背景渐变淡入。转换不起作用，但如果我只是将其更改为一个rgba()值，它就可以正常工作。不支持渐变吗？我也尝试使用图像，它也不会转换图像。

我知道这是可能的，就像在另一篇文章中那样，有人做到了，但我不知道到底是怎么回事。任何帮助>这里有一些 CSS 可以使用：

#container div a {
  -webkit-transition: background 0.2s linear;
  -moz-transition: background 0.2s linear;
  -o-transition: background 0.2s linear;
  transition: background 0.2s linear;
  position: absolute;
  width: 200px;
  height: 150px;
  border: 1px #000 solid;
  margin: 30px;
  z-index: 2
}

#container div a:hover {
  background: -webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .4)))
}

阅读 69

2022-05-27

共1个答案

小编典典

渐变还不支持过渡（尽管当前规范说它们应该通过插值支持类似渐变到类似渐变的过渡。）。

如果您想要具有背景渐变的淡入效果，则必须在容器元素上设置 不透明度并“过渡”不透明度。

（有一些浏览器版本支持渐变过渡（例如 IE10。我在 2016 年在 IE 中测试了渐变过渡，当时它们似乎可以工作，但我的测试代码不再有效。）

更新：2018 年 10 月 ，具有未加前缀的新语法 [例如径向渐变（…）] 的渐变过渡现在已确认（再次？）在 Microsoft Edge
17.17134 上工作。我不知道这是什么时候添加的。仍然无法在最新的 Firefox 和 Chrome / Windows 10 上运行。

更新：2021 年 12 月 这现在可以在最近使用 @property 解决方法的基于 Chromium 的浏览器中实现（但在 Firefox
中不起作用）。请在下面查看@mahozad 的答案。

2021：现在可以对渐变进行动画处理（还没有Firefox或Safari）

随着Chrome 85、Edge和Opera添加对@property rule的支持，现在我们可以在 CSS 中执行此操作：

@property --myColor1 {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

@property --myColor2 {
  syntax: '<color>';
  initial-value: green;
  inherits: false;
}

其余的是常规 CSS。
将变量设置为初始渐变颜色，并设置这些变量的过渡：

div {
  /* Optional: change initial value of the variables */
  /* --myColor1: #f64; --myColor2: brown; */

  background: linear-gradient(var(--myColor1), var(--myColor2));
  transition: --myColor1 3s, --myColor2 3s;
}

然后，根据所需的规则，为变量设置新值：

div:hover {  
  --myColor1: #f00;
  --myColor2: yellow;
}

Hide code snippet

@property --myColor1 {
  syntax: '<color>';
  initial-value: #0f0;
  inherits: false;
}

@property --myColor2 {
  syntax: '<color>';
  initial-value: rgb(40, 190, 145);
  inherits: false;
}

div {
  width: 200px;
  height: 100px;
  background: linear-gradient(var(--myColor1), var(--myColor2));
  transition: --myColor1 3s, --myColor2 3s;
}

div:hover {
  --myColor1: red;
  --myColor2: #E1AF2F;
}
<div>Hover over me</div>

2022-05-27