CSSでパックマンを作ってみた件

CSS3を使えば、様々なものが表現出来てしまうことを知ってしまった。

きっかけはこれだ。

CodePen Embed Fallback

HTMLはたったの1行。

画像やJavaScriptは一切使用せずCSSのみ。
と記述しただけで、こんなに素晴らしいスーパーマリオのアニメーションが出力できてしまうのだ。

どこの誰かは知らないが、よく思いついたものだ。
いつ使うかわからないが、技術としては持っておきたい。

…ということで僕は、比較的簡単にできそうなパックマンを作ってみた。

CodePen Embed Fallback

SCSSは勉強不足なので、通常のCSSで挑戦。
パックマンが口を開閉するアニメーションだけで気が狂いそうになった…。

しかし見事、1エレメントでパックマンのアニメーションを実装できた。

CSS3アニメーションはJSを使うよりも軽量にループアニメなどを実装できるので、今後の仕事にも役立つはずだ。

…多分。