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を丸裸にして見やすく統計的に整理してくれる「CSS STATS」
サイトのCSSを解析してくれるサービスってたくさんありますが、項目ごとに見やすくまとめてくれて、活用
-
-
CSSグラデーションをとっても簡単に生成するツール「Gradientoo」
CSSでグラーデーションを表現する場合、最初からコードを書くのは結構たいへんですよね。 そんなとき
-
-
コピペOK! 画像のホバーエフェクトを簡単にアニメーションさせられるimagehover.css
画像や写真にマウスを重ねたときに、アニメーションのエフェクトがかかっていると、それだけで洗練された印
-
-
いまさら聞けない無料のアイコンフォントの導入の仕方・使い方
アイコンフォントを今頃になってようやく使ってみました。 最初は正直よくわからず、戸惑ってしまいまし
-
-
よくわかる 初心者のためのCSS3 transitionとtransformのチュートリアル
初心者のためのCSS3 transition(トランジション)とtransform(トランスフォーム
-
-
Chromeのタブをクリックするだけで音声を消す方法
Google Chromeのタブをクリックするだけで音声を消す方法をご紹介します。 Chromeの
-
-
Gmailの送信メールを一定期間で自己消滅させる機能拡張「Dmail」
Gmailの送信メールを一定期間で自己消滅させる機能拡張「Dmail」をご紹介します。 Gmail
-
-
CSSグラデーションを簡単につくれる「Colorful CSS Gradient Background Generator」
CSSグラデーションは手軽に実装できるし、メンテナンスも簡単だし、とっても便利ですよね。 ただ、自
-
-
無料で利用できる検索フォーム12(CSS3,HTML5,jQuery)
検索フォームはサイトに欠かせない重要な要素の1つになっています。 最近では、アニメーションを用いた
-
-
JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつける方法
JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつけられる方法をご紹介します。 パララ
