我已将 CSS 淡入/淡出解决方案应用到 div,我对大部分情况都很满意。 但是我只想将它应用于背景,而不是文本。我需要文本始终完全不透明。
看例子: 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
而不是 opacity
上设置动画。仅供引用,如果这就是您所做的全部,您应该使用过渡而不是动画,它们要简单得多。
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);
}
关于html - 淡化背景但不淡化文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15833271/