我已经对 div 应用了 CSS 淡入/淡出解决方案,在很大程度上我对此感到满意。
但是我只想将其应用于背景,而不是文本。我需要文本始终完全不透明。
参见示例:http://jsfiddle.net/howiepaul/gUAPV/33/ http://jsfiddle.net/howiepaul/gUAPV/33/
a.tab {background-color:#d4d4d4;
font-family: arial;
font-weight: bold;}
a.tab:hover {
opacity:1;
animation: tickhov 1.5s;
-moz-animation: tickhov 1.5s; /* Firefox */
-webkit-animation: tickhov 1.5s; /* Safari and Chrome */}
@-ms-keyframes tickhov {from {opacity:0.2;} to {opacity:1;}}
@-moz-keyframes tickhov /* Firefox */ {from {opacity:0.2;} to {opacity:1;}}
@-webkit-keyframes tickhov /* Safari and Chrome */ {from {opacity:0.2;} to {opacity:1;}}
a.tab{
opacity:0.2;
animation: letgo 1.5s;
-moz-animation: letgo 1.5s; /* Firefox */
-webkit-animation: letgo 1.5s; /* Safari and Chrome */}
@-ms-keyframes letgo {from {opacity:1;} to {opacity:0.2; visibility: hidden; display: none;}}
@-moz-keyframes letgo /* Firefox */ {from {opacity:1;} to {opacity:0.2; visibility: hidden; display: none;}}
@-webkit-keyframes letgo /* Safari and Chrome */ {from {opacity:1;} to {opacity:0.2; visibility: hidden; display: none;}}
任何帮助将不胜感激。
非常感谢
豪伊
你应该动画background-color
not opacity
。仅供参考,如果这就是您所做的一切,您应该使用过渡而不是动画,它们要简单得多。
jsFiddle http://jsfiddle.net/Tyriar/zrMTd/2/
a.tab {
position:relative;
font-family: arial;
font-weight: bold;
background-color:rgba(212,212,212,.2);
-moz-transition:background-color 1.5s ease;
-webkit-transition:background-color 1.5s ease;
transition:background-color 1.5s ease;
}
a.tab:hover {
background-color:rgba(212,212,212,1);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)