CSS渐变背景的转换效果

Question

我正在学习使用CSS3进行动画/过渡，但在这段代码中，过渡不起作用...为什么？

HTML：

<div id="test">
</div>

CSS：

#test {
    background-color: #333;
    background-image: -webkit-linear-gradient(top, #333, #666);
    width: 100px;
    height: 100px;
    -webkit-transition: background 1s linear;
}

#test:hover {
    background-image: -webkit-linear-gradient(top, #666, #999);
}

http://jsfiddle.net/LLRfN/

- Caio Tarifa

---

可能是重复的问题：Webkit支持渐变过渡 - 看起来现在你运气不好。 - kapa

Answer 1

这对我来说正好如预期的一样。有几件事情需要注意，如果你想在其他浏览器中使用它，它只能在 Google Chrome 中工作:

这里是一个生成器

这里有一个解释

编辑

抱歉，我没有意识到其中有一个 transition 属性。经过一些谷歌搜索和自己尝试一些东西后，很明显背景渐变的转换还不可能...但是这里有一篇很好的文章，介绍了如何通过一点技巧使其工作。

http://nimbupani.com/some-css-transition-hacks.html

- locrizak

Answer 2

在我这里它运行良好。你是否用 <link> 标签包装了 CSS 文件？

<style>
#test {
background-color: #333;
background-image: -webkit-linear-gradient(top, #333, #666);
width: 100px;
height: 100px;
-webkit-transition: background 1s linear;
}

#test:hover {
background-image: -webkit-linear-gradient(top, #666, #999);
}
</style>
<div id="test">
</div>

- GianFS

---

真的吗？我已经在Chrome和Safari中进行了测试，但是过渡效果没有起作用 ): - Caio Tarifa

Answer 3

渐变过渡可以通过一点“欺骗”来实现。我绝对不是css方面的专家（而且我在这里是新手，所以别太快就讨厌我:D），但只需将两个div放在彼此上方，一个透明度为1，另一个透明度为0。（每个div都设置了不同的渐变）在悬停时，将透明度从1更改为0，反之亦然。

设置时间函数，无论这些div如何放置在彼此上方，z-index属性都会起作用。(针对Safari进行了优化)也许是新手的方法，但这个方法（令人惊讶地）完美地运行：

 #divgradient1
    {
     z-index:-1;
     height:100px;
     background: -webkit-linear-gradient(90deg, red, blue);
     background: -o-linear-gradient(90deg, red, blue);
     background: -moz-linear-gradient(90deg, red, blue); 
     background: linear-gradient(90deg, red, blue);

     opacity:1;
     transition:background,opacity,z-index;
     -webkit-transition:background,opacity,z-index ;
     transition-duration: 1s;
     -webkit-transition-duration: 1s;
    }

 #divgradient1:hover{
    z-index:-1;
    opacity:0;        
    transition:background,opacity,z-index;
    -webkit-transition:background,opacity,z-index;
    transition-duration: 1s;
    -webkit-transition-duration: 1s;
    }


 #divgradient2:hover{
    opacity:1;
    z-index:2;
    background: -webkit-linear-gradient(-90deg, red, blue);
    background: linear-gradient(-90deg, red, blue);
    transition:background,opacity,z-index;
    -webkit-transition:background,opacity,z-index;
    transition-duration: 1s;
    -webkit-transition-duration: 1s; 
    }


 #divgradient2
    {
    z-index:1;
    opacity:0;
    height:100px;        
    background: -webkit-linear-gradient(-90deg, red, blue);
    background: linear-gradient(-90deg, red, blue);
    transition:background,opacity,z-index;
    -webkit-transition:background,opacity,z-index;
    transition-duration: 1s;
    -webkit-transition-duration: 1s;
    }

以及无论它们应该看起来如何的div元素：

    <div id="divgradient1" style="position:absolute;width:100px;"></div>
    <div id="divgradient2" style="position:absolute;width:100px;"></div>

- Lukas Domonkos

Answer 4

这对我有用，我还可以指向CSS3游乐场，您可以在其中实时检查它

CSS3 Playground

- defau1t