0

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

#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>

但是该按钮未显示悬停效果。可能是什么问题？

4

2 回答 2

0

就像 Ryan 提到的那样，您不能为背景渐变设置动画。虽然，有一些 jQuery 插件可以帮助您实现这一点。

尝试jQuery 混合

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

希望能帮助到你。干杯。

于 2012-07-22T07:23:20.660 回答
0

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

  1. 使用 jQuery 在悬停时为两个不同背景图像之间的过渡设置动画。您可以通过使用绝对定位将三个元素相互堆叠来最轻松地完成此操作，其中底部两个是背景图像，顶部包含内容，在这种情况下是您的按钮文本。悬停时，淡出顶部背景图像以平滑地显示底部图像。请参阅本教程以使用 jQuery 制作悬停背景动画。

  2. 使用半透明渐变背景和 webkit 过渡来创建部分动画。CSS3 过渡可以轻松地为 background-color CSS 属性设置动画，该属性仅通过不存在或透明的背景图像或渐变可见。请参阅此示例以了解如何实现它。

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

于 2012-07-22T06:41:29.337 回答