Question

我有一个关于过渡效果的问题。我创建了这个fiddle

我想为悬停添加过渡效果。但它没有用。有人可以帮我吗？

.h_grid_2 .gradient_c_grd_2 {
    position:absolute;
    width:384px;
    height:200px;
    z-index:1;
    background: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
    -webkit-transition: 1s all;
    transition: 1s all;
}

.h_grid_2:hover .gradient_c_grd_2 {
    position:absolute;
    width:384px;
    height:200px;
    z-index:1;
    background: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(255 255, 255, 0.2));
    background: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0, 0), rgba(255, 255, 255, 0.2));
    background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2));
    -webkit-transition: 1s all;
    transition: 1s all;
}

Answer 1

结帐方式：http://jsfiddle.net/gqLgu7jw/1/

想法是添加另一个div（.gradient_c_grd_3）并使用这样的样式：

.h_grid_2:hover .gradient_c_grd_3{
    opacity: 1;
}

.h_grid_2:hover .gradient_c_grd_2 {
   opacity: 0;
}

Answer 2

现在这是不可能的！ CSS转换还不支持背景图像。

但你可以玩背景大小和背景位置：

引自 Animating CSS3 Gradients ：

...因为CSS3渐变不是真正的属性，但实际上是   由浏览器创建的图像，它们不在动画列表中   属性。但这并不意味着你不能动画渐变。

渐变，就像标准图像一样，受某些限制   可动画的与背景相关的属性。这些包括   背景大小和背景位置。

对于一些基本代码片段和包含此想法的示例，我建议您查看上面的网站。

Css过渡悬停渐变

2 个答案: