Css过渡悬停渐变[重复]

Posted 2023-03-06

【中文标题】Css过渡悬停渐变[重复]

【英文标题】：Css Transition hover gradient [duplicate]

【发布时间】：2014-12-10 11:58:40

【问题描述】：

我有一个关于过渡效果的问题。我创建了这个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;

【问题讨论】：

CSS 过渡还不支持背景图像（CSS 渐变也被视为图像）。

【参考方案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;

【讨论】：

这是正确的解决方案。谢谢

【参考方案2】：

目前这是不可能的！ CSS 过渡还不支持背景图片。

但是你可以使用背景大小和背景位置：

引自Animating CSS3 Gradients：

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

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

对于一些基本的code-sn-ps和包含这个想法的例子，我建议你看看上面的网站。