Wie verwenden von css3 zu erreichen, ein ball-bounce-Effekt?
In der Tat habe ich fast Erfolg:
Ich habe eine div
benötigt, um bounce :
<div class="container">
<div class="flipcard transition allowhover">
<h1>This is card</h1>
</div>
</div>
dann verwende ich css3 animieren zu erreichen bounce-Effekt:
.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;
}
}
nun die online-Beispiel ist hier :http://jsfiddle.net/GEEtx/
Scheint es funktionieren, aber nicht gut genug,wie soll ich den key-frames
parameter an, damit es mehr hüpfen wie ein ball?Gibt es eine Formel zur Berechnung der bounce-Höhe und countaccording dem element die Breite und Höhe oder die Zeit?
- Sieht gut aus für mich. Was ist 'mehr wie einen ball"?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Mit wenig Versuch und Irrtum können wir herausfinden, die bounce-Effekt wie gebraucht.
Es ist diese Formel, die verwendet wird, in allen jQuery-easing-plugins, um die bounce-Effekt.
Also die Anwendung dieser aktuelle CSS-keyframes.
d : die animation Dauer. //1.5 : 1500
b : top-Wert am start //0
c : ändern in Wert //40px
t : Aktuelle Zeit //10
Mit etwas mehr Arbeit auf Sie, indem Sie diese vielleicht finden wir die Werte, nach denen Bedarf für den bounce-Effekt in CSS.
Ich fand auch diese CSS3-3D-Bouncing Ball-tutorial
Hoffe, dass Ihnen helfen könnte.