CSS3 で作るパックマン + アニメーション
CSS3 で作るパックマン + アニメーション
CSS3 のみでパックマンとアニメーション(口の動き＋並行移動)ができたのでメモ。
コード
こいつの良いところは、 :before,:after を駆使したおかげで div タグ 1つで済んでいます。
以下、ちょっと解説。
パックマンの形の作り方
肝は、
width: 0px;
height: 0px;
border-top: Xpx #XYZ;
border-right: Xpx transparent;
border-bottom: Xpx #XYZ;
border-left: Xpx #XYZ; の部分です。 これにより、右側の三角形が欠けた正方形ができあがります。 これを、boder-radius: 50%; で丸めてあげると右向きのパックマンになります。
口の動き
:before,:after それぞれで、上の形をつくります。 一つを、transform: rotate(); で、時計回りに回転、 もう一方を反時計回りに回転することにより、口の動きを再現してます。
並行移動
並行移動のアニメーションは、:before,:afterの親となっている div タグ自身に付与します。こうすることにより、 :before,:afterで呼ばれている口の動きアニメーションと独立して、 平行移動アニメーションを付けられます。