好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

用CSS3和JavaScript开发《街头霸王》游戏_html/css_WEB-ITnose

最近我学到了一种很酷的技术,使用CSS3的 steps() 动画属性来生成PNG背景动画。这种技术的主要功能是利用铺贴PNG背景图的方式“重现”GIF图的动画效果。

我的朋友都知道,年轻时候我非常痴迷《街头霸王》游戏,而当我看到了 这个素材 ….你知道我的脑子里想到了什么吗?

观看演示

让我们来做出第一个CSS动作

首先我们要实现的是直拳(就是下面图案中的第三个)。第一步是打开Photoshop,抠出这几个图,这些图都要保持着70px宽和80px高。有一个很好的网站 Texture Packer ,它能帮你处理这些图片。最终,你的图片应该是这个样子:

下面我们需要有一个 DIV ,动作将显示到这个 DIV 里:

/* html */

查看更多关于用CSS3和JavaScript开发《街头霸王》游戏_html/css_WEB-ITnose的详细内容...

  阅读:27次