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 Bouncing Ball 教程

希望对您有所帮助。

于 2012-06-01T18:03:02.180 回答