こんにちはです。あっちのそららです。
今回は、HTMLとCSS(ウェブ制作などで使う言語)で、オリキャラのアニメーションを作ってみました。
「Result」で確認できます(レスポンシブ対応済)。
アニメーション用の正円を作り、大きさや不透明度を徐々に変化させることで、発光を表現しています。また、正円は同じものを3つ重ね、各々のアニメーション開始のタイミングをずらし、波紋のような動きにしました(下記参照)。
- 正円1のアニメーションを開始
- 正円1の開始から0.3秒経過後、正円2のアニメーションを開始
- 正円1の開始から0.6秒経過後、正円3のアニメーションを開始
動くタイミングは段階的ですが、変化させる内容は3つとも共通です。色は全てベタ塗りですが、不透明度の上下によって、思いのほか複雑で柔らかい見映えになりました。
絵を描いているのかコードを書いているのか分からなくなる。