メインカテゴリーを選択しなおす
【CSSイラスト】発光するオリキャラのアニメーションを作ってみた
こんにちはです。あっちのそららです。今回は、HTMLとCSS(ウェブ制作などで使う言語)で、オリキャラのアニメーションを作ってみました。「Result」で確認できます(レスポンシブ対応済)。 See the Pen Shine-Fairy by あっちのそらら (@acchinosoraranocode) on CodePen. アニメーション用の正円を作り、大きさや不透明度を徐々に変化させることで、発光を表現しています。また、正円は同じものを3つ重ね、各々のアニメーション開始のタイミングをずらし、波紋のような動きにしました(下記参照)。 正円1のアニメーションを開始 正円1の開始から0.3秒…
こんにちはです。あっちのそららです。今回は、HTMLとCSS(ウェブ制作などで使う言語)で、雪うさぎのアニメーションを作ってみました。「Result」で確認できます(レスポンシブ対応済)。 See the Pen Snow Rabbit by あっちのそらら (@acchinosoraranocode) on CodePen. CSSのアニメーション機能(@keyframes)で、下記の処理を順に実行させています。 雪うさぎを画面外に配置(スタート位置) 雪うさぎの縦位置を移動し、落下を表現 雪うさぎの縦横比率を交互に変え、着地時のぷるぷる感を表現 雪うさぎの横位置を移動+角度を変更し、転がり…
こんにちはです。あっちのそららです。初めて「GIFアニメ」なるものを作ってみました。計12フレームの短い動きですが、それでも12枚のイラストを編集するので、手間がかかるもの。違和感なくループさせるための計算にも一苦労。雲や雨を1フレームでどれだけ移動させるか、全体を通して均一なスピードで移動しているかなど、1枚のイラストを描くのとは違った視点に気づかされました。 毛の動きもムズカシイー ランキング参加中イラスト
■あらすじ ●斎藤瞳…『サバク』の新人女性監督。●王子千晴…天才監督。『リデル』監督。●行城…トウケイ動画プロデューサー。●有科…『リデル』の女性プロデ…