问

背景图像渐变不动画

倩女碧海蓝天_979 发布于 2023-02-07 14:36

html

我希望有人可以帮助澄清这一点.

我正在使用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',但这不起作用.

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

1 个回答

背景图像不可动画.由于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; }

演示

此外,我将删除你有900毫秒的延迟(我在演示中做了).这对用户来说真的很烦人,他们想要立即反馈,而不是一秒钟后反馈

PS你应该像我一样将代码本地化到相关部分,以便更快,更好地响应.对于只需要20个问题的问题,没有人想要查看300行代码

特别感谢使用z-index改进它的vals

2023-02-07 14:39 回答

昔日重来r_510

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签