読者です 読者をやめる 読者になる 読者になる

はしくれエンジニアもどきのメモ

情報・Web系技術の勉強メモ・備忘録です。

CSS3 で作るパックマン + アニメーション

CSS アニメーション

CSS3 で作るパックマン + アニメーション

CSS3 のみでパックマンとアニメーション(口の動き+並行移動)ができたのでメモ。

コード

こいつの良いところは、 :before,:after を駆使したおかげで div タグ 1つで済んでいます。

codepen.io

以下、ちょっと解説。

パックマンの形の作り方

肝は、

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で呼ばれている口の動きアニメーションと独立して、 平行移動アニメーションを付けられます。