我试图在悬停时用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)))
}
::之前，CSS伪元素可以很容易地做到这一点!
.element {
位置:相对;
宽度:200 px;
身高:150 px;
背景图像:线性梯度(45度，蓝色，水);
z - index: 2;
｝
{前.element::
位置:绝对的;
内容:“”;
插图:0;/*与{top: 0相同;右:0;底部:0;左:0;}* /
背景-图像:线性梯度(底部，红色，橙色);
z - index: 1;
透明度:0;
过渡:不透明度0.25s线性;
｝
{前.element:徘徊::
透明度:1;
｝
身体< >
< div class = "元素" > < / div >
身体< / >
你所要做的就是使用::before不透明度为零的伪元素。
打开:悬停，切换::before的不透明度为1，如果你遵循几个简单的步骤，你应该可以让你的过渡工作。
使用background-image设置元素的背景渐变
在不透明度为0的伪元素之前使用::来设置下一个渐变
设置不透明度为1 inside:hover::before
确保你的::before有:
绝对位置
内容:“
比默认元素更低的z-index
顶部，底部，左侧和右侧为零(或简单地插入:0)
过渡目标不透明度与您的偏好的时间间隔
就是这样!现在你应该可以用你喜欢的任何持续时间/延迟/计时函数来调整你的过渡!
发布另一个视图也无妨，因为仍然没有一个官方的方法来做到这一点。写了一个轻量级的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
不管怎样，这里有一个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
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技术的一部分。要了解更多信息，请参考这里和这里，并观看这个视频。
