2

現在の要素にマウスオーバーしたときにバウンス効果が必要な場合でも、メニューを設計していますが、jquery関数を使用したくありません。css3 でコードを記述できますか? 私はコードを試しています-

tab-switch li a.current {

background-image://any transition??//

     -webkit-transition:easeoutbounce 1s linear;
     -moz-transition: easeoutbounce 1s linear;
     -o-transition: easeoutbounce 1s linear;
     -ms-transition: easeoutbounce 1s linear;
     transition: easeoutbounce 1s linear;
    background-repeat:no-repeat;
    background-image:url('images/bgs/selectedmenu.png');}
4

2 に答える 2

2

トランジションのカスタムタイミング関数を使用して、トランジションをバウンスさせることができます。

私が行った（グラデーションを使用して作成された）背景画像のホバー時に遷移をバウンスするいくつかの例を参照してください。基本的には、2番目の値 ( ) が > 1 および/または 4 番目の値 ( ) が < 0 (つまり、関数cubic-bezier(x1, y1, x2, y2)が増加してから減少し、0% から 100% の間で再び増加します。バウンスがない場合のように厳密に増加するわけではありません - Dabblet CSS パネルの 3 次ベジエ コードにカーソルを合わせると、関数を視覚化できます)。 .x1x2[0, 1]y1y2

例で使用した 3 次ベジエ関数はcubic-bezier(0, 3.5, 1, -2.5)、cubic-bezier(0, 3.25, 1, -2.25)、でしたが、cubic-bezier(0, 3, 1, -2)任意の値を使用できます。一般に、2 番目の値が高く、4 番目の値が低い (または絶対値が高い) ほど、跳ね返りが顕著になります。

最後の例のCSSコード (グラデーション角度の跳ね返り):

.p4 {
    background: linear-gradient(left top, orangered 49%, lemonchiffon 51%)
            50% 50%;
    background-size: 100% 130%;
    transition: 2.75s cubic-bezier(0, 3.25, 1, -2.25);
}
.p4:hover {
    background-size: 100% 280%;
}

これ以上必要な場合は、キーフレーム アニメーションを使用する必要があります。先ほど行った簡単な例を参照してください。

CSS :

.p0 {
    background-image:
    url(http://imgsrc.hubblesite.org/hu/db/images/hs-2012-49-a-small_web.jpg), 
    url(http://imgsrc.hubblesite.org/hu/db/images/hs-2002-24-a-small_web.jpg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p0:hover {
    animation: ani0 4s forwards;
}
@keyframes ani0 {
    10% { background-size: 50% 75%, 100% 100%; }
    20% { background-size: 50% 50%, 100% 100%; }
    30% { background-position: 50% 50%; background-size: 50% 25%, 100% 100%; }
    30% { background-position: 25% 50%, 50% 50%;
        background-size: 25% 25%, 100% 100%; }
    40% { background-position: 25% 0, 50% 50%; }
    50% { background-position: 50% 0, 50% 50%; }
    60% { background-position: 100% 25%, 50% 50%; }
    70% { background-position: 75% 50%, 50% 50%;
        background-size: 25% 25%, 100% 100%; }
    80% { background-position: 50% 100%, 50% 50%; }
    90% { background-position: 0 50%, 50% 50%; }
    100% { background-size: 0 0, 100% 100%; }
}
于 2013-01-07T12:07:06.563 に答える