こんにちは。
今回はブルブル振るえる効果を簡単に追加できるスタイルシート「CSShake」を紹介したいと思います。
こちらのスタイルシートも先日使う機会があり、覚えている内に書きたいと思います。
ブルブル振るえる効果を簡単に追加できるスタイルシート「CSShake」！
CSS Shake
http://elrumordelaluz.github.io/csshake/
ブルブルの種類を確認してみよう！
ブルブルの種類は9種類あります。
本家サイトの下記から確認できます。
http://elrumordelaluz.github.io/csshake/#2
ダウンロードしてみよう！
本家サイトの下記からcsshake.min.cssをダウンロードできます。
http://elrumordelaluz.github.io/csshake/#5
で確認できます。
設置してみよう！
先程ダウンロードしたcsshake.min.cssをheadに読み込みます。
1 | <link rel="stylesheet" href="css/csshake.min.css"> |
ブルブルさせたい要素にクラス名を付けます。
ブルブルの種類の種類によって付けるクラス名が違いますので、下記のhtmlやサイトを参考して下さい。
1 2 3 4 5 6 7 8 9 | <div class="shake">Basic Shake</div> <div class="shake shake-hard">Hard Shake</div> <div class="shake shake-slow">Slow Shake</div> <div class="shake shake-little">Little Shake</div> <div class="shake shake-horizontal">Fixed Horizontal</div> <div class="shake shake-vertical">Fixed Vertical</div> <div class="shake shake-rotate">Fixed Rotation</div> <div class="shake shake-opacity">Opacity Shake</div> <div class="shake shake-crazy">Crazy Shake</div> |
http://elrumordelaluz.github.io/csshake/#4
基本マウスオーバーでブルブルします。
ずっとブルブルさせたい時はshake-constantというクラス名を追加します。
1 | <div class="shake shake-constant">Basic Shake</div> |
ずっとブルブルさせてマウスオーバーした時に止めたい時はshake-constantとhover-stopというクラス名を追加します。
1 | <div class="shake shake-constant hover-stop">Basic Shake</div> |
せっかくなのでDEMOを作ってみました。
DEMO
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
いかがでしたか。こういう遊び心のあるスタイルシートが増えたら面白いですね。
以上でブルブル振るえる効果を簡単に追加できるスタイルシート「CSShake」を紹介でした。
