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アソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
美しいCSSグラデーションをランダムにつくってくれる「Random CSS Gradient Generator」
ズボラな自分に最適なCSSグラデーション作成ツールがあったので、ご紹介します。 グラデーションを自
-
-
コピペOK! 画像のホバーエフェクトを簡単にアニメーションさせられるimagehover.css
画像や写真にマウスを重ねたときに、アニメーションのエフェクトがかかっていると、それだけで洗練された印
-
-
CSSボタンのコピペに!CSSでつくられたボタンのコードが100以上コレクションされている「CSS Buttons」
CSSボタンの参考やコピペに使える、とても参考になるCSSボタンのコードがコレクションされているサイ
-
-
レスポンシブWEBデザイン用ナビゲーション&メニューのベストパターン16
レスポンシブWEBデザインは当たり前の世の中になりました。 当たり前になるにつれて、レスポンシブW
-
-
今さら聞けない!作業時間を短縮するChrome用ショートカットベスト・コレクション
ブラウザはChromeを使ってます。 そのChromeでサイトを制作したり、ブログを書いたりしてい
-
-
信じられないほど美しい!CSSだけで絶滅危惧種30を表現した「In Pieces」
CSSだけで表現されているのに、信じられないほど美しいサイト「In Pieces」をご紹介します。
-
-
オフラインでも便利なChrome機能拡張おすすめアプリ10
ネットが便利なのは言うまでもありませんが、場所の制約からネット回線につながらないときがあります。
-
-
CSS3の色名147色(RGB、HEX16進カラーコード併記)
CSS3になって、色名についても大幅に選択肢が増えたのをご存知でしょうか。 私は知りませんでした。
-
-
リボン風の見出しをCSS3だけで実装する方法
見出しでリボン風の装飾をCSS3だけで実装する方法をご紹介します。 利用するのはboderプロパテ
-
-
ブラウザでプログラミング!ブラウザでコードが書けて実行・確認できるサービス14
ブラウザでコードが書けて実行・確認できるサービスをご紹介します。 サイトを実際に公開する前にテスト
