20x20のdivタグブロック
CSSアニメーション例

以前、ファンアートとして、マッハドッターbraveさん作のネコブレイバー(NekoBraver)を、divタグ20x20で作りました。

ここでは、CSSアニメーションを使って各ブロックに動きや変化をつけてみます。

素材となるネコブレイバー（20x20）

CSSアニメーション例

• 奇数行と偶数行が左右反対に動く
• 上下にゆらゆら
• 上から降ってくる
• 上から降ってきてから整列
• マキ割ダイナミック
• 右から颯爽と登場
• 四角から丸に変形
• 四角から丸に変形、背景落下
• トップページ

HTML/CSS

ネコブレイバーのドット絵をマークアップするため、divタグを20x20の400個使ってドット地を作っています。

主に次のように処理してアニメーションを適用させるためのドット地を作っています。

• すべてのdivタグにfloat: left; width: 5%; padding-top: 5%;を適用してドット地を作る
• すべてのdivタグにposition: relative;を適用することで、topやleftを使ってアニメーションで移動できるようにする
• 一行目にはすべてr1、二行目にはすべてr2・・のようにr20までクラス名を設定
• 一列目にはすべてc1、二列目にはすべてc2・・のようにc20までクラス名を設定

詳しくは本ページのソースコードをご覧ください。