Question

我正在尝试编写一个按钮，在悬停时会产生一个轻松的效果。我使用了以下代码：

#quotebutton {
padding:20px;
margin-top:-55px;
/* fallback/image non-cover color */
background-color: #000;
/* Safari 4+, Chrome 1-9 */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), to(#333));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */
background-image: -webkit-linear-gradient(top, #000, #333); 
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(top, #000, #333);
/* IE 10+ */
background-image: -ms-linear-gradient(top, #000, #333);
/* Opera 11.10+ */
background-image: -o-linear-gradient(top, #000, #333);
font-size:18px;
color:#fff;
float:right;
transition: background 300ms ease-in-out;
-webkit-transition: background 300ms ease-in-out;
-moz-transition: background 300ms ease-in-out;
}

#quotebutton:hover {
/* fallback image non-cover color */
   background-color: #000;
   /* Safari 4+, Chrome 1-9 */
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#000));
   /* Safari 5.1+, Mobile Safari, Chrome 10+ */
   background-image: -webkit-linear-gradient(top, #333, #000); 
   /* Firefox 3.6+ */
   background-image: -moz-linear-gradient(top, #333, #000);
   /* IE 10+ */
   background-image: -ms-linear-gradient(top, #333, #000);
   /* Opera 11.10+ */
   background-image: -o-linear-gradient(top, #333, #000);
}
#quotebutton a {
    text-decoration:none;
    color:#fff;
}

HTML如下：

<div id="quotebutton">
<a href="">Download Now</a>
</div>

但按钮没有显示对悬停的影响。可能是什么问题？

Answer 1

不幸的是，简短的回答是你无法使用CSS3过渡动画背景渐变。有几种方法可以使用替代技术实现相同的目标：

使用jQuery在悬停时为两个不同背景图像之间的过渡设置动画。您可以通过使用绝对定位将三个元素堆叠在一起来最容易地实现这一点，其中底部两个是背景图像，顶部包含内容，在这种情况下是您的按钮文本。在悬停时，淡出顶部背景图像以平滑地显示底部图像。请参阅this tutorial for making a background animation on hover with jQuery。
将半透明渐变背景与webkit过渡结合使用以创建局部动画。 CSS3过渡可以轻松地为背景颜色CSS属性设置动画，该属性仅通过不存在或透明的背景图像或渐变可见。请参阅this example for an idea of how you might implement this。

在这两个选项中，（1）更灵活，但工作量更大，需要配套脚本，而（2）灵活性较差，浏览器兼容性较差。

Answer 2

像Ryan提到的那样，你无法为背景渐变设置动画。虽然，有jQuery插件可以帮助您实现这一目标。

尝试jQuery Blend

我的另一个想法是在纯色上应用线性透明渐变图像。然后，您可以使用过渡为纯色设置动画。顶部的透明渐变图像将使其看起来像渐变动画。

希望它有所帮助。欢呼声。

为什么按钮没有显示任何淡入效果？

2 个答案: