Question

我希望有人可以帮忙解决这个问题。

我正在使用HTML5 CSS3在搜索栏上工作这是工作示例http://jsfiddle.net/4Mr6D/

 text-decoration: none;
transition: all 400ms;
-webkit-transition: all 400ms; 
-moz-transition: all 400ms; 
-o-transition: all 400ms;

起始线164或我评论'搜索结果' 我试图让渐变背景在悬停时动画，它似乎只能在回滚时动画回原始颜色。

我尝试使用背景图像进行动画处理，但这不起作用。然后我转向使用关键字'all'，但这不起作用。

到目前为止，只有文字颜色才会生成动画。有人可以帮助我找到我在做背景渐变动画时我做错了吗？

Answer 1

Background images are not animatable。由于CSS中的渐变使用背景图像，因此您不能像使用文本颜色那样使用过渡到新的

话虽如此，如果你只在下拉列表中有文本，你可以使用伪元素并动画其不透明度。以下是如何操作的示例

.container:after {
    content: "";
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
    background-image: -webkit-linear-gradient(top, #FF0000, #770000);
    background-image: -moz-linear-gradient(top, #FF0000, #770000);
    background-image: -ms-linear-gradient(top, #FF0000, #770000);
    background-image: -o-linear-gradient(top, #FF0000, #770000);
    background-image: linear-gradient(top, #FF0000, #770000);
    position:absolute;
    top:0;left:0;
    opacity:0;
    width:100%; height:100%;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    z-index: -1;
}
.container:hover { color:white; }
.container:hover:after { opacity:1; }

Demo

另外，我会删除你所拥有的900毫秒延迟（我在演示中做了）。对于用户来说，真的很烦人，他们想要立即反馈，而不是一秒钟之后反馈

P.S。您应该像我一样将代码本地化到相关部分，以便更快，更好地响应。没有人想要查看300行代码来解决只需要20个问题的问题

特别感谢val使用z-index

进行改进

Answer 2

抱歉，但不支持渐变图像上的过渡。是的，我觉得那也很疯狂。

但是有希望：这是一个 fiddle 的解决方法。您可以将搜索输入的背景设置为原色，并在悬停时将其转换为辅助颜色。这样您就可以获得看起来像渐变过渡的颜色过渡效果。

为清晰起见减少了示例：

.search {
 background: primary_color;
 background-image: linear-gradient(top, primary_color, secondary_color);
 transition: background 1s ease-out;
}
.search:hover {
 background: secondary_color;
}

背景图像渐变不动画

2 个答案: