我试图在悬停时用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)))
}
不管怎样，这里有一个Sass mixin:
用法:
@include gradientAnimation(红色，蓝色，.6s);
混合:
@mixin gradientAnimation( $start, $end, $transTime ){
background-size: 100%;
background-image: linear-gradient($start, $end);
position: relative;
z-index: 100;
&:before {
background-image: linear-gradient($end, $start);
content: "";
display: block;
height: 100%;
position: absolute;
top: 0; left: 0;
opacity: 0;
width: 100%;
z-index: -100;
transition: opacity $transTime;
}
&:hover {
&:before {
opacity: 1;
}
}
}
摘自Dave Lunny在Medium上的这篇很棒的文章:https://medium.com/@dave_lunny/ animing-css -gradients-using-only-css-d2fd7671e759
在下面的例子中，一个锚标记有一个子标记和一个孙子标记。孙子有远背景梯度。近背景中的子元素是透明的，但是有渐变要过渡。在悬停时，子物体的不透明度在1秒内从0过渡到1。
下面是CSS:
.bkgrndfar {
position:absolute;
top:0;
left:0;
z-index:-2;
height:100%;
width:100%;
background:linear-gradient(#eee, #aaa);
}
.bkgrndnear {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background:radial-gradient(at 50% 50%, blue 1%, aqua 100%);
opacity:0;
transition: opacity 1s;
}
a.menulnk {
position:relative;
text-decoration:none;
color:#333;
padding: 0 20px;
text-align:center;
line-height:27px;
float:left;
}
a.menulnk:hover {
color:#eee;
text-decoration:underline;
}
/* This transitions child opacity on parent hover */
a.menulnk:hover .bkgrndnear {
opacity:1;
}
这是HTML:
<a href="#" class="menulnk">Transgradient
<div class="bkgrndfar">
<div class="bkgrndnear">
</div>
</div>
</a>
以上仅在最新版本的Chrome中进行测试。这些是悬停前，悬停中途和完全过渡的悬停图像:
渐变还不支持过渡(尽管目前的规范说它们应该通过插值支持类似渐变到类似渐变的过渡)。
如果你想要一个背景渐变的渐隐效果，你必须在容器元素上设置一个不透明度，然后“过渡”不透明度。
(已经有一些浏览器版本支持渐变过渡(例如IE10。我在2016年在IE中测试了梯度转换，当时它们似乎可以工作，但我的测试代码不再工作了。)
更新:2018年10月
带有无前缀新语法的渐变过渡[例如径向渐变(…)]现在确认在Microsoft Edge 17.17134上工作(再次?)我不知道这是什么时候加入的。在最新的Firefox和Chrome / Windows 10上仍然不能工作。
更新:2021年12月
在最近的基于Chromium的浏览器中，使用@property的变通方法可以实现这一点(但在Firefox中不起作用)。请在YMMV上方看到@mahozad的回答(并点赞)。
发布另一个视图也无妨，因为仍然没有一个官方的方法来做到这一点。写了一个轻量级的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
