フリーランス・クリエイターへ送るWebマガジン
 
MENU
06Jan プログラミング・開発

CSSで作られたアニメーションする美しい絵・デザイン25選

マリオ

パタパタ飛び続けるタヌキのマリオ。

See the Pen CSS NES Super Leaf Mario by Ryan Petersen (@rpetersen29) on CodePen.

Pure CSSで作られた犬。尻尾を振り続けているのがとても可愛い…。

See the Pen Cute Dog Pure CSS by Henrique Rodrigues (@hjdesigner) on CodePen.

犬と来たら猫!全身振り続ける猫。ずっと見てられる…。

See the Pen CSS: Cat Swinging on String by David Khourshid (@davidkpiano) on CodePen.

キタキツネ

どこか寂しそうな表情で歩き続けます。どこ行くんだろう。

See the Pen CSS Snow Fox by David Khourshid (@davidkpiano) on CodePen.

クマ

クマを模したトグルボタン。カチカチやるとその方向を見つめます。

See the Pen CSS Bear Toggle by Anastasia Goodwin (@agoodwin) on CodePen.

スパイダーマン

ドットで作られたスパイダーマン。上から現れたあとずっとこちらを見つめてきます。気まずい。

See the Pen Spider-man pixel art by Bruno Almeida (@brunob182) on CodePen.

アベンジャーズ

4人のヒーローがこっち見てきます。気まずい。

See the Pen Marvel Icons | Pure CSS by Julie Park (@juliepark) on CodePen.

ピクサー映画の最初のあれ

ピクサー映画の最初のあれです。

See the Pen Disney pixar part of intro by Jeroen (@jeroens) on CodePen.

お寿司

規則正しく並べられたお寿司です。醤油の隣の緑の液体が何か気になります。

See the Pen CSS Sushi Board by Sasha (@sashatran) on CodePen.

ハンバーガー

ハンバーガーのハンバーガーメニュー。クリック→ホバーで要素の名前が表示されますが、諸々の挙動にはjs使用。

See the Pen Hamburger Menu (with cheese) by Michael Smart (@mikedevelops) on CodePen.

コーヒーメーカー

ドリップの一連の流れがアニメーションとなっています。圧巻。

See the Pen Coffee Maker Animation by Roger Flanagan (@thisisroger) on CodePen.

ピタゴラスイッチ風

ピタゴラスイッチ風のアニメーション。ネズミが歯車を回していて可愛いです。

See the Pen The Incredible Machine – level1 by Julien Chipscompany (@chipscompany) on CodePen.

風車

マテリアル風のレスポンシブな風車。フワフワ浮かぶ様が可愛い。

See the Pen Windmill (Pug + SCSS) – Responsive + Animated by Ashish Bardhan (@AshBardhan) on CodePen.

ワゴン車

上下に軽く揺れるワゴン車。外装が可愛い。

See the Pen Loving Car – Pure CSS with animation by Nikhil Krishnan (@nikhil8krishnan) on CodePen.

波に揺れる船と魚のアニメーション。360度回転します。

See the Pen Only CSS: Pirates of the Caribbean by Yusuke Nakaya (@YusukeNakaya) on CodePen.

宇宙船

画面から飛び出てくるのではないかという迫力で進んできます。Pure CSSでの製作。

See the Pen CSS 3D X-wing by Julian Garnier (@juliangarnier) on CodePen.

iPhone6

CSSで作られたiPhoneです。表示15秒後にreminderで文字が表示されます。

See the Pen CSS Only iPhone 6 by Fabrizio Bianchi (@_fbrz) on CodePen.

MacbookAir

ランダムに動Macbookです

See the Pen CSS only 3d Macbook Air by Burak Can (@neoberg) on CodePen.

ポケモンソフト

懐かしい灰色のカセット。背景色といい、エモい。

See the Pen 3D CSS Game Boy Cartridge by Van Huynh (@worksbyvan) on CodePen.

ゲームボーイ

ボタンの押し心地が異常に良いゲームボーイです。

See the Pen Game Boy by Murat Khatypov – AntonEssenetial (@AntonEssenetial) on CodePen.

時計

アメリカ時間に設定されていますが、コードいじって日本時間にしてサイドバーに表示したら可愛いかも。

See the Pen CSS3 Working Clock by Ilia (@iliadraznin) on CodePen.

ホバーで開き、ダウンロードリンクが現れます。表紙に好みの画像使ったら良い感じになりそう。

See the Pen Animated CSS Book by Fivera (@fivera) on CodePen.

ルービックキューブ

背景でドラッグすればカメラ切り替え、ルービックキューブをドラッグすれば回転させられます。諸々の挙動はjs。

See the Pen Rubik’s cube in Javascript by Dmytro Omelyan (@Omelyan) on CodePen.

打ち上げ花火

無数の打ち上げ花火が上がります。

See the Pen Fire Works by jack schmatjen (@Jackthenerd) on CodePen.

クレーン

クレーンにSNSボタンが吊るされています。フッターに置いたら面白いかも。

See the Pen Truck (Crane) by Mohan Khadka (@khadkamhn) on CodePen.

- SHARE -