我正在尝试使用 css3和javascript创建像寺庙运行中的动画的硬币动画我尝试使用css3中的过渡复制动画但我无法实现相同 他们的任何一个例子在网络上都有相同的动画？或者任何人都可以帮助
... . . 我正在尝试使用 css3和javascript创建像寺庙运行中的动画的硬币动画我尝试使用css3中的过渡复制动画但我无法实现相同
他们的任何一个例子在网络上都有相同的动画？或者任何人都可以帮助我实现动画.
更新：
点击一个按钮,我想要一些硬币从按钮中出现并收集到一个篮子里(按钮可以在页面的任何地方,篮子固定在底部)
使用css3过渡和jquery实现
HTML
<button id="btn1">button1</button> <div id="1" class="coin"></div> <div id="2" class="coin"></div> <div id="3" class="coin"></div> <div id="4" class="coin"></div> <div id="basket"></div></div>
CSS
.coinanim{ top:420px; left: 430px; width:50px; height:50px; transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out; transition-delay: .36s; -webkit-transition-delay: .36s; } jQuery的
$('#btn1').click(function(){ $('.coin').css('opacity',1); $('#1').addClass('coinanim1'); $('#2').addClass('coinanim2'); $('#3').addClass('coinanim3'); $('#4').addClass('coinanim4'); }); $('.coin').on('webkitTransitionEnd',function(){ $('.coin').css('opacity',0); $('.coin').attr('class','coin'); }); 演示：http://jsfiddle.net/dA42n/23/
.解决方法
. 为什么不简单地使用JQuery动画？ http://jsfiddle.net/KeeB2/2/
$cart = $(".cart");$("button").on("click",function(){ $btn = $(this); var $coin = $('<div class="coin">') .insertAfter($btn) .css({ "left": $btn.offset().left,"top": $btn.offset().top }) .animate({ "top": $cart.offset().top,"left": $cart.offset().left },800,function() { $coin.remove(); });}); 使用此方法,您还可以使用CSS动画来增强他们飞向篮筐时的硬币行为.
. . .. ...