さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【CSS3】CSSを利用したアニメーション効果の参考サイトまとめ

Pocket
LINEで送る

CSS3を利用したアニメーション効果の参考サイトを忘却録的に乗せておきます。

3 cool CSS3 image hover effects

css3_anime01

マウスオーバーすると画像が消えてキャプションが表示されます。

CSSのみで実装するキャプションエフェクト 20

css3_anime02

こちらはマウスオーバーすると画像の上にキャプションが表示されるアニメーションです。

Original Hover Effects

css3_anime03

10種類のマウスオーバーアニメーションが掲載されています。

12 fancy buttons

css3_anime04

12種類のマウスオーバーアニメーションが掲載されています。

  • https://codepen.io/bartekd/pen/qFsDf

CSSのみで実装するボタンデザインやホバーエフェクト 20+α

css3_anime05

CSSのみでデザイン、アニメショーンエフェクトを実装しているボタンなどが掲載されています。

Creative CSS3 Animation Menus

css3_anime06

CSS3でデザイン、アニメーションを実装しているメニューボタンのサンプルが10種類掲載されています。

CSS Ghost Buttons

css3_anime07

2015年に流行ると言われているゴーストボタンをCSS3で実装しています。

CSS3アニメーションに挑戦!色が移り変わる背景を実装しよう

css3_anime08

CSS3のキーフレームアニメーションについて詳しく掲載されています。

Creative Link Effects

css3_anime09

CSS3で実装されているメニューのアニメーションエフェクトのサンプルが数点掲載されています。

SpinKit | Simple CSS Spinners

css3_anime10

ページローディングのアニメーションをCSS3で実装しているサンプルが掲載されています。

CSS3 Hover Effects

css3_anime11

写真の拡大ができることを示唆できるアニメーションを集めたページです。

3D Thumbnail Hover Effects

css3_anime12

紙を折りたたんだようなアニメーションエフェクトのサンプルが掲載されています。

iHover

css3_anime13

様々なホバーアニメーションが掲載されており、とにかく数が多いです。

Magic Animations CSS3

css3_anime14

扉が開くようなアニメーションエフェクトのサンプルが多数掲載されています。

Animate.css

css3_anime15

60種類以上の数多くのアニメーションエフェクトが掲載されています。

Hover.css

css3_anime16

フラットデザインに合いそうなアニメーションエフェクトが多数掲載されています。

カテゴリー:HP制作, css

コメントを残す

コメント内容