单击网页上的按钮时，如何制作html5动画？

Question

我有一个交互式动画的想法，我想在html5中创建。我想要一个有球衣的足球场，它的队形是4-4-2，边上有不同的选项来改变阵型，比方说4-5-1，然后当这个按钮被点击时，球衣就会重新排列到那个形状。我该怎么做呢?？

提前感谢

Answer 1

最简单、最无依赖项的方法是将JavaScript函数添加到按钮或元素的onClick属性中，然后让JavaScript通过编辑球员的位置、属性等来移动球员。

但是，我推荐使用jQuery，因为它通常更容易。然后将操作绑定到按钮的id (id="...“属性)。例如：

$(document).ready(function() {
  $("mybuttonid").click(function(event){
    ...
  });
});

Answer 2

http://jsfiddle.net/rlemon/3YRzS/

就像前面提到的，jquery和animate。

Answer 3

在某些浏览器上使用CSS3关键帧动画是可能的，例如，在smashing杂志的网站上可以看到- http://coding.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/