我试图在悬停时用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)))
}
一种解决方法是转换背景位置，以产生渐变变化的效果:
http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/
CSS3渐变过渡与背景位置
虽然你不能直接使用CSS的transition属性来动画渐变，但是你可以使用background-position属性来实现简单的渐变动画:
它的代码非常简单:
#DemoGradient{
background: -webkit-linear-gradient(#C7D3DC,#5B798E);
background: -moz-linear-gradient(#C7D3DC,#5B798E);
background: -o-linear-gradient(#C7D3DC,#5B798E);
background: linear-gradient(#C7D3DC,#5B798E);
-webkit-transition: background 1s ease-out;
-moz-transition: background 1s ease-out;
-o-transition: background 1s ease-out;
transition: background 1s ease-out;
background-size:1px 200px;
border-radius: 10px;
border: 1px solid #839DB0;
cursor:pointer;
width: 150px;
height: 100px;
}
#DemoGradient:Hover{
background-position:100px;
}
<div id="DemoGradient"></div>
我想让div看起来像一个3D球体，并通过颜色过渡。
我发现渐变背景色还不能过渡。
我在元素前面放置了一个径向梯度背景(使用z-index)，并带有一个过渡的固体背景。
/* overlay */
z-index : 1;
background : radial-gradient( ellipse at 25% 25%, rgba( 255, 255, 255, 0 ) 0%, rgba( 0, 0, 0, 1 ) 100% );
然后下面的div.ball:
transition : all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
然后改变div.ball的背景颜色，瞧!
https://codepen.io/keldon/pen/dzPxZP
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技术的一部分。要了解更多信息，请参考这里和这里，并观看这个视频。
一个更简洁的解决方案是设置背景色并使用蒙版图像。
#container div a {
background-color: blue;
transition: background 0.2s linear;
width: 200px;
height: 150px;
mask-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .7), rgba(0, 0, 0, .4));
}
#container div a:hover {
background-color: red;
}
一种解决方法是转换背景位置，以产生渐变变化的效果:
http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/
CSS3渐变过渡与背景位置
虽然你不能直接使用CSS的transition属性来动画渐变，但是你可以使用background-position属性来实现简单的渐变动画:
它的代码非常简单:
#DemoGradient{
background: -webkit-linear-gradient(#C7D3DC,#5B798E);
background: -moz-linear-gradient(#C7D3DC,#5B798E);
background: -o-linear-gradient(#C7D3DC,#5B798E);
background: linear-gradient(#C7D3DC,#5B798E);
-webkit-transition: background 1s ease-out;
-moz-transition: background 1s ease-out;
-o-transition: background 1s ease-out;
transition: background 1s ease-out;
background-size:1px 200px;
border-radius: 10px;
border: 1px solid #839DB0;
cursor:pointer;
width: 150px;
height: 100px;
}
#DemoGradient:Hover{
background-position:100px;
}
<div id="DemoGradient"></div>
