带有背景渐变的 CSS 过渡

Posted 2023-03-06

【中文标题】带有背景渐变的 CSS 过渡

【英文标题】：CSS transition with background gradient

【发布时间】：2011-12-09 11:36:47

【问题描述】：

我正在学习使用 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/

【问题讨论】：

Webkit support for gradient transitions 的可能重复项 - 看来你现在运气不好

【参考方案1】：

渐变过渡可以通过一点点“作弊”来完成。我绝对不是 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>

【参考方案2】：

这对我有用。有几件事，如果您希望它在其他浏览器中工作，这只会在 google chrome 中工作：

Here is a generator

Here is an explanation

编辑

抱歉，我没有意识到那里有 transition 属性。在我自己进行了一些谷歌搜索并尝试了一些东西之后，很明显背景渐变上的过渡是不可能的......但是。

这是一篇很好的文章，介绍了如何通过一些 hack 让它工作

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

【参考方案3】：

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

【参考方案4】：

它对我很好。你用标签包装了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>

【讨论】：

真的吗？！我已经在 Chrome 和 Safari 中测试过，但过渡效果不起作用）：