我试图在悬停时用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)))
}

当前回答

在codepend上发现了一个很好的hack,可以修改不透明度属性,但通过利用伪元素实现从一个渐变到另一个渐变。他所做的就是设置:after,这样当你改变实际元素的不透明度时,:after元素就会显示出来,看起来就像渐变一样。我觉得分享一下会有用。

原始代码来源:http://codepen.io/sashtown/pen/DfdHh

.button { display: inline-block; margin-top: 10%; padding: 1em 2em; font-size: 2em; color: #fff; font-family: arial, sans-serif; text-decoration: none; border-radius: 0.3em; position: relative; background-color: #ccc; background-image: linear-gradient(to top, #6d8aa0, #8ba2b4); -webkit-backface-visibility: hidden; z-index: 1; } .button:after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; border-radius: 0.3em; background-image: linear-gradient(to top, #ca5f5e, #d68584); transition: opacity 0.5s ease-out; z-index: 2; opacity: 0; } .button:hover:after { opacity: 1; } .button span { position: relative; z-index: 3; } body { text-align: center; background: #ddd; } <a class="button" href="#"><span>BUTTON</span></a>

其他回答

发布另一个视图也无妨,因为仍然没有一个官方的方法来做到这一点。写了一个轻量级的jQuery插件,你可以用它来定义背景径向渐变和过渡速度。这个基本的用法会让它淡入,用requestAnimationFrame优化(非常流畅):

$('#element').gradientFade({

    duration: 2000,
    from: '(20,20,20,1)',
    to: '(120,120,120,0)'
});

http://codepen.io/Shikkediel/pen/xbRaZz?editors=001

保持原始背景和所有属性完整。也有高亮跟踪作为设置:

http://codepen.io/Shikkediel/pen/VYRZZY?editors=001

2021年:现在可以动画渐变了(Firefox和Safari还不行)

随着Chrome 85, Edge和Opera添加了对@property规则的支持,现在我们可以在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;
}

@property——myColor1 { 语法:“< >颜色”; 初值:# 0 f0; 继承:错误; } @property——myColor2 { 语法:“< >颜色”; 初始值:rgb(40,190,145); 继承:错误; } div { 宽度:200 px; 身高:100 px; background: linear-gradient(var(——myColor1), var(——myColor2)); ——myColor1 3s,——myColor2 3s; } div:{徘徊 ——myColor1:红色; ——myColor2: # E1AF2F; } <div>悬停在我上方</div>

在这里查看完整的描述和示例,并参考这里的@property规范。 @property规则是CSS Houdini技术的一部分。要了解更多信息,请参考这里和这里,并观看这个视频。

我在工作中使用这个:)IE6+ https://gist.github.com/GrzegorzPerko/7183390

如果使用文本元素,不要忘记<element class="ahover"><span>Text</span></a>。

.ahover {
    display: block;
    /** text-indent: -999em; ** if u use only only img **/
    position: relative;
}
.ahover:after {
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all 0.5s ease 0s;
    width: 100%;
    z-index: 1;
}
.ahover:hover:after {
    opacity: 1;
}
.ahover span {
    display: block;
    position: relative;
    z-index: 2;
}

你可以伪造渐变之间的过渡,在一些堆叠渐变的不透明度中使用过渡,正如这里的一些答案所描述的:

CSS3动画与梯度。

你也可以转换位置,如下所述:

CSS3渐变过渡与背景位置。

这里还有一些技巧:

动画CSS3渐变。

如上所述。渐变目前不支持CSS过渡。但在某些情况下,你可以通过将其中一种颜色设置为透明来解决这个问题,这样其他一些包装元素的背景色就会穿透,并进行过渡。