事實上我幾乎successs: 我有一個div
需要反彈:如何使用css3來實現球彈跳效果?
<div class="container">
<div class="flipcard transition allowhover">
<h1>This is card</h1>
</div>
</div>
然後,我使用CSS3動畫來實現反彈效果:
.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
參數,使其更像一個球彈跳?是否有一個公式來計算b盎司高度和數量根據元素的寬度和高度,或時間?
對我很好。什麼是'更像一個球'? – mrtsherman