ブルブル振るえる効果を簡単に追加できるスタイルシート「CSShake」!

2014/11/27

こんにちは。
今回はブルブル振るえる効果を簡単に追加できるスタイルシート「CSShake」を紹介したいと思います。

こちらのスタイルシートも先日使う機会があり、覚えている内に書きたいと思います。

 

ブルブル振るえる効果を簡単に追加できるスタイルシート「CSShake」!

CSS Shake

csshake

http://elrumordelaluz.github.io/csshake/

 

ブルブルの種類を確認してみよう!

ブルブルの種類は9種類あります。
本家サイトの下記から確認できます。
http://elrumordelaluz.github.io/csshake/#2

csshake2

 

ダウンロードしてみよう!

本家サイトの下記からcsshake.min.cssをダウンロードできます。
http://elrumordelaluz.github.io/csshake/#5
で確認できます。

csshake3

 

設置してみよう!

先程ダウンロードしたcsshake.min.cssをheadに読み込みます。

 

ブルブルさせたい要素にクラス名を付けます。
ブルブルの種類の種類によって付けるクラス名が違いますので、下記のhtmlやサイトを参考して下さい。

 

csshake4

http://elrumordelaluz.github.io/csshake/#4

 

基本マウスオーバーでブルブルします。
ずっとブルブルさせたい時はshake-constantというクラス名を追加します。

 

ずっとブルブルさせてマウスオーバーした時に止めたい時はshake-constantとhover-stopというクラス名を追加します。

 

せっかくなのでDEMOを作ってみました。
DEMO

 

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

 

いかがでしたか。こういう遊び心のあるスタイルシートが増えたら面白いですね。
以上でブルブル振るえる効果を簡単に追加できるスタイルシート「CSShake」を紹介でした。

topへ戻る