エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
【CSSイラスト】発光するオリキャラのアニメーションを作ってみた - そららのクリエイティブログ
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
【CSSイラスト】発光するオリキャラのアニメーションを作ってみた - そららのクリエイティブログ
こんにちはです。あっちのそららです。 今回は、HTMLとCSS(ウェブ制作などで使う言語)で、オリキャラ... こんにちはです。あっちのそららです。 今回は、HTMLとCSS(ウェブ制作などで使う言語)で、オリキャラのアニメーションを作ってみました。 「Result」で確認できます(レスポンシブ対応済)。 アニメーション用の正円を作り、大きさや不透明度を徐々に変化させることで、発光を表現しています。また、正円は同じものを3つ重ね、各々のアニメーション開始のタイミングをずらし、波紋のような動きにしました(下記参照)。 正円1のアニメーションを開始 正円1の開始から0.3秒経過後、正円2のアニメーションを開始 正円1の開始から0.6秒経過後、正円3のアニメーションを開始 動くタイミングは段階的ですが、変化させる内容は3つとも共通です。色は全てベタ塗りですが、不透明度の上下によって、思いのほか複雑で柔らかい見映えになりました。 絵を描いているのかコードを書いているのか分からなくなる。 ランキング参加中イラ