用CSS3和js构建街机游戏

利用png-sprites 和 CSS3 animations' steps()的属性 来构建街机动画。

1 首先用photoshop把分解后的动作拼装成一张大图，注意每一个分解后的动作图片的大小要一致

2 然后绘制div层

3 编写CSS3效果 (steps的使用)

 animation: punch steps(4) 0.15s infinite; 

4 脚本监控键盘点击事件 ，添加相应的动作样式

 

 

 

 

 

 

出处：http://davidwalsh.name/street-fighter  代码 http://codepen.io/jkneb/pen/smtHA