最近はCSSだけで色々なアニメーションが作れてしまいます。
すごいですよね。
そこで本日はHTMLとCSSのみで作られたアニメーションキャラクターをご紹介します。
正直実務で役に立つか怪しいものもたくさんありますが、どういった作りになっているのか、どういう風に動かしているのかはとても参考になります。
ぜひ一度どういうコードを使っていて、どういう風に動いているのかコードを確認してみて下さい。
↓こちらもオススメ↓
【UIデザイナー必見】動きが面白い！目を引くこと間違いなしのCSSアニメーション集part1
【UIデザイナー必見】動きが面白い！目を引くこと間違いなしのCSSアニメーション集part2
CSSだけでここまで出来る！？タイトルや見出しにオススメなぬるぬる動く最新のCSSテキストエフェクト19選
目次
クラッシュ・バンディクー アクアク
See the Pen Aku Aku CSS art by Joao Victor (@jotavejv) on CodePen.
トイストーリーエイリアン
See the Pen pure-css-toystory-alien by Sunyoung Park (@sunnn) on CodePen.
レゴ エメット
See the Pen The Lego Movie’s Emmet in Pure CSS by Rachel Bull (@rachel_web) on CodePen.
ポケモン ゼニガメ
See the Pen Baby Squirtle (Pure CSS) by Josh Bader (@joshbader) on CodePen.
ポケモン イーブイ
See the Pen CSS Eevee by David Khourshid (@davidkpiano) on CodePen.
フランケンシュタイン
See the Pen Daily CSS Images 16 – Frankenstein by Victoria Ninni Bergquist (@vicbergquist) on CodePen.
ミッ○ーマウス
See the Pen Disney’s Mickey Mouse in Pure CSS by Rachel Bull (@rachel_web) on CodePen.
サウスパークっぽいキャラクター
See the Pen A Rick Without a Morty – Pure CSS. by James Gilmore (@jcgilmore2) on CodePen.
Angry Birds
See the Pen Angry Birds in Pure CSS by Rachel Bull (@rachel_web) on CodePen.
Family Guy Brian Griffin
See the Pen Family Guy’s Brian Griffin in Pure CSS by Rachel Bull (@rachel_web) on CodePen.
ゼルダの伝説 ゼルダ姫
See the Pen CSS Princess Zelda by Charlie Marcotte (@FUGU22) on CodePen.
↓こちらもオススメ↓
【UIデザイナー必見】動きが面白い！目を引くこと間違いなしのCSSアニメーション集part1
【UIデザイナー必見】動きが面白い！目を引くこと間違いなしのCSSアニメーション集part2
CSSだけでここまで出来る！？タイトルや見出しにオススメなぬるぬる動く最新のCSSテキストエフェクト19選
