ケン（ストリートファイターⅡ）の必殺技をCSS3で完全再現

CSSスプライト、CSSアニメーションを駆使し、キーボードやマウスで操作可能なストリートファイターⅡのケンの様々な動を作完全再現したデモです。パンチやキックのみならず、波動拳、昇竜拳や竜巻旋風脚などの必殺技も思いのままです。

HTML、CSS、JSのソースコードはこんな感じになっています。

Check out this Pen!

デモページはこちら
Ken's Street Fighter II with animated sprites – CodePen

またこちらのサイトに動作の詳細仕様が記載されています。
ソース：Animate png sprites with css3 animations | Front / Back

関連記事

ウェブページ製作者は必見、HTMLやJavascript等のチートシート19個 - DNA

TwitterやNikeなど有名なロゴをCSS3のみで再現 - DNA

Windows、Apple、Linux、それぞれのトラブル対処方法を比較してみる - DNA

HTMLやCSSで「Center」ではなく「Centaur」と書くとこうなるはず、というスクリプト「text-align: centaur;」 - DNA

CSS3とHTML5のみで映画「スター・ウォーズ」の文字スクロールを見事に再現 - DNA

初代から最新の「9」まで、Internet Explorerのレンダリングエンジンを試してみた動画 - DNA

ものすごくどうでもいいWebサイトに1発でジャンプできるWebサイト「The Useless Web」 - DNA