自由自在なCSSアニメーション! 震える! 回る! モコモコする!! おすすめの記事3選

CSS

f:id:ksakae1216:20161004225258j:plain

みなさん、コウタロウです!!

 

今日はタイトルについて。

 

 

ココロ震えるCSS

下記記事で衝撃を受けました!!

www.tairakenji.com

 

いや〜スゴイな〜。

こんな秘密を大公開しちゃうなんて、ケンヂさんは器がでかい!!

 

もう、記事見たら、最初から最後までスゴイ震えてる。

震えまくってる!!

 

私はIT業界にいるんですが、サーバー周りが長かったのでCSSで震えさせるなんて知りませんでした。(いいわけです)

 

他にもあるのかな?

もしかして、震える以外にもあるんじゃないかと思って調べました。

 

まずは、「CSS 震える」で調べたら結構ヒットしてそこから震える以外について書いてあるページをいくつかチョイス。

 

ここで紹介させて頂きます。

結構、いろんなことができるのでサンプル見るだけでも結構面白いですよ!!

 

寝ログ

はい、まずは「寝ログ」さんから。

nelog.jp

 

ホバーエフェクトとは、マウスカーソルを合わせたときのことです。

 

マウスカーソルを合わせると、ボタンの色が変わったり、動いたり様々です。

Hover.cssで100種類以上のホバーエフェクトを使えます。

 

ここにあるホバーエフェクトを使えば、楽しいページになりそうですね!

 

coliss

次は、「coliss」さん。

coliss.com

 

本当にこれCSSだけ?と疑うようなすごいアニメーションんが紹介されています。

緑色のゲームボーイがアイキャッチ画像で表示されていますが、このページでゲームボーイにマウスカーソル当てると、スケルトンになるんですよ!

 

もうCSS恐ろしすぎ (;゚д゚)ァ….

 

他にもFacebook、Twitterのボタンなんかも結構オシャレだなと思いました。

 

Code部

最後は「Code部」。

blog.codecamp.jp

 

Code部はアニメーションの紹介だけでなく、アニメーションの基礎知識(メリット、デメリット)も紹介してくれています。

 

紹介された20選の中で私が一番気になったのは「CSS 3D Clouds」です。

雲がモコモコしていますよ。

 

CSSだけでなくJavaScriptも使っていますが「おぉ~」って感じです。

ぜひ、見てください。

 

最後に

いや、CSSってすごい!!

こんなに色んなことができるなんて知らなかったよ!

 

ケンヂさんの記事読んで良かった!

www.tairakenji.com

 

読者になったぜ!!!

コメント

タイトルとURLをコピーしました