2

メニュー項目の一部にスプライト画像リンクを使用し、背景位置で配置しています。ホバーの内外でフェード効果を作りたいと思います。私は

デモhttp://jsfiddle.net/6q2hH/

<li class="mobileimg"><a href="#" class="mobileimage" title="Go Mobile"></a></li>

    li.mobileimg .mobileimage{
     display:block;
     background:transparent url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png')no-repeat;
     width: 30px;
     height:30px;
     margin-top:9px;
     margin-left:3px;
    }

    li.mobileimg .mobileimage:hover {background-position:0px -29px;}
4

2 に答える 2

1

.mobileimage:hoverまず、 の不透明度を1 未満に設定する必要があります。ブラウザ間の互換性を保つには、次を試してください。

.mobileimage:hover {
    filter: alpha(opacity=50);
    -khtml-opacity: .5;
    -ms-filter: "alpha(opacity=50)";
    -moz-opacity: .5;
    opacity: .5;
}

次に、実際のトランジション効果.mobileimageを作成するには、すぐに切り替えるのではなく、不透明度でトランジションを作成するように指示する必要がありますopacity: .5。

.mobileimage {
    -webkit-transition: opacity 500ms ease;/* Saf3.2+, Chrome */
    -moz-transition: opacity 500ms ease;   /* FF4+ */
    -ms-transition: opacity 500ms ease;    /* IE10? */
    -o-transition: opacity 500ms ease;     /* Opera 10.5+ */
    transition: opacity 500ms ease;     
}

500ms不透明度が変化するのにかかる時間で、easeトランジション効果のタイプです。更新された fiddleを参照してください。

于 2013-03-31T13:46:27.903 に答える
0

このようなもの？http://jsfiddle.net/6q2hH/3/

li.mobileimg .mobileimage{
 display:block;
 background:transparent url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png')no-repeat;
 width: 30px;
 height:30px;
 margin-top:9px;
 margin-left:3px;
}

li.mobileimg .mobileimage:hover {
    background-position:0px -29px;
    -webkit-animation-name: fadingItOut;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes fadingItOut {
    0% {
        opacity: 1.0;
    }
    100% {
        opacity: 0.0;
    }
}
}

必要に応じて動作を微調整できます。詳細については、 Mozilla MDNを確認してください。

また、これは Safari/Chrome/Chromium などの WebKit の例に過ぎないことも覚えておいてください。その他のプレフィックスは次のとおりです (すべてのアニメーション タグにはプレフィックスが必要です。これは 1 つの例にすぎません)。

animation-name // Vanilla (general CSS)
-moz-animation-name // Firefox
-o-animation-name // Opera
-ms-animation-name // Internet Explorer

そしてフレームのために;

@keyframes fadingItOut {
@-moz-keyframes fadingItOut {
@-o-keyframes fadingItOut {
@-ms-keyframes fadingItOut {
于 2013-03-31T13:05:10.303 に答える