在引导导航中设置CSS渐变动画

在引导导航中设置CSS渐变动画,css,twitter-bootstrap,css-transitions,css-animations,Css,Twitter Bootstrap,Css Transitions,Css Animations,我正在使用引导式atm,注意到我简单的css导航按钮转换不起作用 我把它放在引导程序中,然后去掉了渐变背景,只用了纯色背景,效果很好 是否有CSS渐变过渡的规范,是否存在?我有什么办法可以做到这一点吗?如果不是,最好的解决方案是什么 下面是我的小提琴,渐变是橙色的悬停 渐变如下所示,因此它在多个浏览器中都能正常工作 background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(254, 204, 177, 1)), color-

我正在使用引导式atm,注意到我简单的css导航按钮转换不起作用

我把它放在引导程序中,然后去掉了渐变背景,只用了纯色背景,效果很好

是否有CSS渐变过渡的规范,是否存在?我有什么办法可以做到这一点吗?如果不是,最好的解决方案是什么

下面是我的小提琴,渐变是橙色的悬停

渐变如下所示,因此它在多个浏览器中都能正常工作

    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(254, 204, 177, 1)), color-stop(0.5, rgba(241, 116, 50, 1)), color-stop(0.51, rgba(234, 85, 7, 1)), to(rgba(251, 149, 94, 1)));
    background: -webkit-linear-gradient(rgba(254, 204, 177, 1) 0%, rgba(241, 116, 50, 1) 50%, rgba(234, 85, 7, 1) 51%, rgba(251, 149, 94, 1) 100%);
    background: -moz-linear-gradient(rgba(254, 204, 177, 1) 0%, rgba(241, 116, 50, 1) 50%, rgba(234, 85, 7, 1) 51%, rgba(251, 149, 94, 1) 100%);
    background: -o-linear-gradient(rgba(254, 204, 177, 1) 0%, rgba(241, 116, 50, 1) 50%, rgba(234, 85, 7, 1) 51%, rgba(251, 149, 94, 1) 100%);
    background: linear-gradient(rgba(254, 204, 177, 1) 0%, rgba(241, 116, 50, 1) 50%, rgba(234, 85, 7, 1) 51%, rgba(251, 149, 94, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feccb1', endColorstr='#fb955e', GradientType=0);
纯色不起作用的原因是
线性渐变
实际上创建了一个图像。它对应的长柄属性是
背景图像
,而不是
背景颜色

背景图像
不是过渡图像,但是使用定位和伪元素,我们可以使用
不透明度
属性来模拟它。下面是一个简单的例子来展示这种技术

例子:
li{
显示:内联块;
宽度:200px;
高度:200px;
背景:黑色;
文本对齐:居中;
线高:200px;
字体大小:40px;
/*必须有定位*/
位置:相对位置;
}
李阿{
颜色:白色;
/*必须有职位*/
位置:相对位置;
}
李:以前{
/*让它装满容器*/
内容:“;
显示:块;
位置:绝对位置;
左:0;
右:0;
排名:0;
底部:0;
/*创建渐变*/
背景:rgb(254204177);
背景:-webkit渐变(线性,0.0,0.100%,从(rgba(254,204,177,1)),颜色停止(0.5,rgba(241,116,50,1)),颜色停止(0.51,rgba(234,85,7,1)),到(rgba(251,149,94,1));
背景:webkit线性梯度(rgba(254204177,1)0%,rgba(2411150,1)50%,rgba(234,85,7,1)51%,rgba(251,149,94,1)100%);
背景:moz线性梯度(rgba(254,204,177,1)0%,rgba(241,116,50,1)50%,rgba(234,85,7,1)51%,rgba(251,149,94,1)100%);
背景:-o-线性梯度(rgba(254204177,1)0%,rgba(2411150,1)50%,rgba(234,85,7,1)51%,rgba(251,149,94,1)100%);
背景:线性梯度(rgba(254,204,177,1)0%,rgba(241,116,50,1)50%,rgba(234,85,7,1)51%,rgba(251,149,94,1)100%);
/*转换不透明度*/
不透明度:0;
-webkit过渡:不透明度0.5s;
-moz过渡:不透明度0.5s;
-o型过渡:不透明度0.5s;
过渡:不透明度0.5s;
}
李:悬停:之前{
不透明度:1;
}

  • 感谢您的解释和解决方案。我发现很难把我的头包起来,为什么它可以给渐变设置动画。干杯