CSS过渡与背景渐变

时间:2011-10-17 17:26:33

标签: css animation css3 css-transitions css-animations

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

4 个答案:

答案 0 :(得分:2)

这对我来说应该是有意义的。有几点,如果你想让它在其他浏览器中运行,这只适用于谷歌浏览器:

Here is a generator

Here is an explanation

修改

抱歉,我没有意识到那里有一个transition财产。在做了一些谷歌搜索并自己尝试了一些东西后,很明显,背景渐变的转换是不可能的......但是。

这是一篇很好的文章,介绍如何让它与一些黑客一起工作

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

它对我有用,我也可以指向CSS3游乐场,你可以随时查看它

CSS3 Playground

答案 3 :(得分:0)

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