2

ええ、タイトルが示すように、スライド アニメーションを使用してナビゲーション メニュー項目の背景色 (ホバー時) を変更する方法はありますか? そして画像を使わずに？

jQuery や CSS3 を使用してフェード アニメーションを行うのは簡単ですが、たとえば、ホバーの色を左から右にスライドさせる方法はありますか?

これには多くのスレッドがあることは知っていますが、それらにはすべて画像の使用が含まれています。

4

1 に答える 1

7

次のようなことができます。

HTML:

<a href="#"><span>aosgibmoa bnocibnas</span></a>

CSS:

a{
    display:inline-block;
    background:green;
    position:relative;
    padding:2px 5px;
}
a>span{
    position:relative;
}

a::before{
    content:'';
    background:red;
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:0%;
    -webkit-transition:width .3s ease-out;
}
a:hover::before{
    width:100%;
}

デモ:
http://jsfiddle.net/nsfxE/

グラデーションを使用した代替: (Bojangles に感謝)

CSS:

a{
    display:inline-block;
    background:green;
    position:relative;
    padding:2px 5px;
    background: -webkit-gradient(linear, left top, right top, color-stop(50%,red), color-stop(50.001%,green));
    background-size:200% 100%;
    background-position:0 0;
    -webkit-transition:background-position .3s ease-out;
}

a:hover{
    background-position:-100% 0;
}

デモ:
http://jsfiddle.net/nsfxE/1/

于 2013-04-23T15:41:00.310 に答える