3

実際、私はほとんど成功しています:私はdivバウンスする必要があります:

<div class="container">
    <div class="flipcard transition allowhover">
        <h1>This is card</h1>
    </div>
</div>​

次に、css3 animate を使用してバウンス効果を実現します。

.container{
    width: 100%;
    height: 100%;
    -moz-perspective: 1000px;
}
.flipcard{
    background: red;
    width: 200px;
    height: 300px;
    position: absolute;
    top: 40px;
    left: 20px;
    -webkit-transform-style: preserve-3d;
    -webkit-transition:all 0.6s ease-in-out;
}
.allowhover:hover{
    -webkit-animation-name: bounce;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite ;
    -webkit-animation-direction: normal;
}


@-webkit-keyframes bounce {
   25% {
     top:7px;
   }
   45% {
     top:40px;
   }
   64% {
      top:19px;
   }
   76% {
      top:40px;
   }
   96%{
      top: 25px
   }
   100% {
      top:40px;
   }
}​

今オンラインの例はここにあります: http://jsfiddle.net/GEEtx/

機能しているように見えますが、十分ではありません。key-framesパラメータを設定して、ボールのようにバウンドさせるにはどうすればよいですか?要素の幅と高さ、または時間に応じて、バウンスの高さとカウントを計算する式はありますか?

4

1 に答える 1

1

少し試行錯誤するだけで、必要に応じてバウンス効果を把握できます。

バウンス効果を得るためにすべての jQuery イージング プラグインで使用されるこの式があります。

        easeInBounce: function (x, t, b, c, d) {
                return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
        },
        easeOutBounce: function (x, t, b, c, d) {
                if ((t/=d) < (1/2.75)) {
                        return c*(7.5625*t*t) + b;
                } else if (t < (2/2.75)) {
                        return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
                } else if (t < (2.5/2.75)) {
                        return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
                } else {
                        return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
                }

// t: current time, b: begInnIng value, c: change In value, d: duration

これを現在の CSS キーフレームに適用します。
d : アニメーションの長さ。//1.5 : 1500
b : 開始時のトップ値 // 0
c : 値の変化 //40px
t : 現在の時間 // 10

これらを適用してさらに作業を進めると、CSS でバウンス効果に必要な値がわかるかもしれません。

このCSS3 3D Bounce Ballチュートリアルも見つけました

それがあなたを助けることを願っています。

于 2012-06-01T18:03:02.180 に答える