個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

CSSだけでブルブル震えるエフェクトを簡単実装!CSS Shakeを使ってみた

CSSだけでブルブル震えるエフェクトを簡単実装!CSS Shakeを使ってみた

CSSだけでブルブル震えるエフェクトを簡単実装!CSS shakeを使ってみた

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

clss名を加えるだけで簡単にブルブルしたエフェクトを加えることができるCSS Shake

CSSだけでブルブル震えるエフェクトを簡単実装!CSS Shakeを使ってみた
CSS Shakeは、clss名を加えるだけで簡単にブルブルしたエフェクトを加えることができるCSSです。
エフェクトは全部で10種類あります。

CSS Shakeの使い方

使い方はとても簡単です。
CSS Shakeのサイトにいき、CSSをダウンロードして(もしくは、リンク先を別名保存でcsshake.min.cssとして保存)、head内に読み込みます。
CSSだけでブルブル震えるエフェクトを簡単実装!CSS Shakeを使ってみた

あとは、実装したいエフェクトに対応するclass名を、ブルブルさせたい要素に書き加えるだけです。
CSSだけでブルブル震えるエフェクトを簡単実装!CSS Shakeを使ってみた

カーソルを合わせてエフェクトを止めることもできる

これまでは、カーソルを合わせると震え始めるエフェクトでしたが、逆に、常に震えているものに対してカーソルを合わせると、震えをストップさせることも可能です。
その場合は、以下のコンスタントなエフェクトに、hover-stop:hoverを加えるだけです。

CSS Shake

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 0
  • 0

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

ワンランク上のWEB表現を目指すなら!HTML/CSS/JSの必見テクニック満載「Top Pens of 2013」

CodePenというWEBサービスをご存知でしょうか。 CodePenは、HTML/CSS/Jav

記事を読む

スクロールした位置についてくるStickyプラグイン15

スクロールした位置についてくるStickyプラグイン15

スクロールした位置についてくる要素を実装するjQueryプラグイン「Stickyプラグイン」をまとめ

記事を読む

動画にCSSだけで色調補正エフェクトをかけた「dynamically colorize videos」は必見

動画にCSSだけで色調補正エフェクトをかけた「dynamically colorize videos」は必見

動画にCSSだけで色調補正エフェクトをかけた「dynamically colorize videos

記事を読む

無料ホームページなのにプロ並みのデザイン&高機能サイトが瞬時に作れるWix!感想と使い方をご紹介

無料ホームページなのにプロ並みのデザイン&高機能サイトが瞬時に作れるWix!感想と使い方

Wixという無料ホームページがつくれるサービスをご存知でしょうか。 かなり以前からあったサービスで

記事を読む

HTML5ビデオにも対応できる無料動画変換ツール/コンバーター10

HTML5ビデオを利用したサイトも見かけるようになってきました。 今後はHTML5ビデオを利用する

記事を読む

レスポンシブWEBデザイン用ナビゲーション&メニューのベストパターン16

レスポンシブWEBデザインは当たり前の世の中になりました。 当たり前になるにつれて、レスポンシブW

記事を読む

気になるサイトのモニタリング&変更箇所を知らせてくれる無料ツール6

気になるサイトのモニタリング&変更箇所を知らせてくれる無料ツール6

気になるサイトをモニタリング&変更箇所を知らせてくれる無料ツールをまとめてご紹介します。 みなさん

記事を読む

信じられないほど美しい!CSSだけで絶滅危惧種30を表現した「In Pieces」

信じられないほど美しい!CSSだけで絶滅危惧種30を表現した「In Pieces」

CSSだけで表現されているのに、信じられないほど美しいサイト「In Pieces」をご紹介します。

記事を読む

レスポンシブWEBデザインなら導入したいレスポンシブ対応CSSフレームワーク35(〜2013年9月まで)

レスポンシブWEBデザインにますます注目が集まっているようです。 つい最近では、カラーミーショップ

記事を読む

twitterでのキーワードのひろがりを調べられるツール「twimp」

twitterでのキーワードのひろがりを調べられるツール「twimp」

twitterでのキーワードのひろがりを調べられるツール「twimp」をご紹介します。 作成者した

記事を読む