3

ほとんどの場合、満足しているdivにCSSフェードイン/アウトソリューションを適用しました。ただし、テキストではなく背景にのみ適用したい。テキストを常に完全に不透明にする必要があります。

例を参照してください: 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;}}

どんな助けでもありがたく受け取られます。

どうもありがとう

4

2 に答える 2

1

これにアニメーションを使用したり、かさばるコードを記述したりする必要はありません。テキストをそのままにして背景を変更する必要がある場合は、代わりにCSS トランジションを使用する必要があります。それらははるかにシンプルで使いやすく、これは非常に少ないコード行で実現できます。ここにフィドルのデモがあります

http://jsfiddle.net/gUAPV/37/

a.tab {
    background-color: #f4f4f4; 
    font-family: arial;
    font-weight: bold;
    font-size : 40px;
}

a.tab:hover {
   background-color:#d4d4d4;

   -webkit-transition: background 300ms ease-in 200ms;
   -moz-transition: background 300ms ease-in 200ms;
   -o-transition: background 300ms ease-in 200ms;
   transition: background 300ms ease-in 200ms;
}

文字サイズを大きくして見やすくしていますので、用途に合わせて調整してください。

PS CSSトランジションについてもっと知りたい場合は、ここにいくつかの便利なリンクがあります

W3.Org リンク

Mozilla 開発者フォーラム リンク

お役に立てれば ：）

于 2013-04-06T09:24:02.917 に答える
1

background-colornotでアニメーション化する必要がありますopacity。参考までに、これだけの場合は、アニメーションの代わりにトランジションを使用する必要があります。トランジションの方がはるかに簡単です。

jsフィドル

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);
}
于 2013-04-06T09:08:34.113 に答える