2014/08/04
CSSだけでブルブル震えるエフェクトを簡単実装!CSS Shakeを使ってみた
CSSだけでブルブル震えるエフェクトを簡単実装!CSS shakeを使ってみた
すでにお気づきかもしれませんが、当サイトのロゴやRSSボタン、Topへボタンなどにカーソルを合わせていただくと、
ブルブルと震えるかと思います(モダンブラウザのみ)。
ユーモラスな動きだと思いませんか?
実はこれ、CSS3だけで実装しているんです。
といっても、私自身が実装したわけではありません。
私がしたのclss名を書き加えただけ。
簡単ですよね。
今回はclass名を加えるだけで、手軽にブルブル震えるエフェクトを実装できる「CSS Shake」をご紹介します。
サイトにちょっとしたスパイスがほしいなあと思っている方などのご参考になれば幸いです。
clss名を加えるだけで簡単にブルブルしたエフェクトを加えることができるCSS Shake

CSS Shakeは、clss名を加えるだけで簡単にブルブルしたエフェクトを加えることができるCSSです。
エフェクトは全部で10種類あります。
CSS Shakeの使い方
使い方はとても簡単です。
CSS Shakeのサイトにいき、CSSをダウンロードして(もしくは、リンク先を別名保存でcsshake.min.cssとして保存)、head内に読み込みます。

|
1 |
<link rel="stylesheet" href="csshake.min.css" type="text/css" media="all" /> |
あとは、実装したいエフェクトに対応するclass名を、ブルブルさせたい要素に書き加えるだけです。

|
1 2 3 4 5 6 7 8 9 10 |
<div class="shake"></div> <!-- 通常のエフェクト --> <div class="shake shake-hard"></div> <!-- 激しいのエフェクト --> <div class="shake-slow"></div> <!-- ゆっくりのエフェクト --> <div class="shake shake-little"></div> <!-- 少しのエフェクト --> <div class="shake shake-horizontal"></div> <!-- 水平方向のエフェクト --> <div class="shake shake-vertical"></div> <!-- 垂直方向のエフェクト --> <div class="shake shake-rotate"></div> <!-- 左右が縦に振れるのエフェクト --> <div class="shake shake-opacity"></div> <!-- 透過を伴うエフェクト --> <div class="shake shake-crazy"></div>"></div> <!-- クレイジーなエフェクト --> <div class="shake shake-constant"></div>"></div> <!-- コンスタントなエフェクト --> |
カーソルを合わせてエフェクトを止めることもできる
これまでは、カーソルを合わせると震え始めるエフェクトでしたが、逆に、常に震えているものに対してカーソルを合わせると、震えをストップさせることも可能です。
その場合は、以下のコンスタントなエフェクトに、hover-stop:hoverを加えるだけです。
|
1 |
<div class="shake shake-constant hover-stop:hover"></div>"></div> <!-- コンスタントなエフェクト --> |
Sponsored by
お役に立てましたら、以下どれでも結構のですので、ポチリと……。
Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
Chromeのタブをクリックするだけで音声を消す方法
Google Chromeのタブをクリックするだけで音声を消す方法をご紹介します。 Chromeの
-
-
使える!2015年時点で最高の無料レスポンシブ用フリーテンプレート50+
2015年時点で最高の無料レスポンシブ用フリーテンプレートをご紹介します。 今回ご紹介する無料のH
-
-
左右からメニューがスルッ!CSSだけで作成されたオフカンバスメニュー6
CSSだけで作られたオフカンバスメニューをまとめてご紹介します。 「オフカンバスメニュー」は、ボタ
-
-
息抜きに火星ツアーに出かけよう!火星をバーチャル・ツアーできるDiscovering Gale Crater
火星をバーチャル・ツアーできるDiscovering Gale Craterをご紹介します。 Lo
-
-
WEBデザインのインスピレーションに最適!パーツ/テーマごとのデザイン見本帳「calltoidea」
WEBデザインのインスピレーションに最適なパーツ/テーマごとのWEBデザイン見本帳「calltoid
-
-
名だたるデザイナーが作成したフリーのWEBサイト用PSDファイルが無料!Dribble発Photoshop用サイトテンプレート45
今回もDribbbleから。 Dribbbleは世界の名だたるデザイナーが作品をアップしているコミ
-
-
画像URLを読み込むだけでCSSのfilterプロパティを試せる「CSS Filters Playground」
CSSで今後、ますます注目度が高まるであろうCSSフィルタ。 なにせお手軽にエフェクトをかけられる
-
-
WEBデザインのインスピレーションに!UIデザインのコードスニペットコレクション「CodeMyUI」
WEBデザインのインスピレーションになるUIデザインのコードスニペットがコレクションされた「Code
-
-
クリックしたくなる!CSSだけで作られた無料のボンタコレクション「CSS Buttons」
CSSだけで作られた無料のボタンがコレクションされている便利なサイトをご紹介します。 Photos
-
-
これは簡単!CSSだけで棒グラフ/チャートが作成できてしまう「chart.css」
CSSだけで棒グラフ/チャートが作成できてしまう「chart.css」をご紹介します。 CSSファ
