【CSS3】マウスを乗せるとプルプル震えるリンクを、CSSのみで作ってみた

なんか楽しい。 最近はあまり、というかほとんど見ないですが、たまーにリンクがﾌﾞﾙﾌﾞﾙ震えるブログがあったりします。…まぁ特にメリットは無いんですが、いい感じのアクセントにはなります。

こういった動きを付ける際はjQueryを使ったほうが楽なんですが、どうせならCSSで！というわけで作ってみました。

Demo - Block要素

マウスを乗せると震えます。 transformの回転＋移動を、animationで小刻みに繰り返すように作りました。適当に設定した割にはけっこう良い感じにプルンプルンしてます。

Demo - inline-Block要素

上と同じく、マウスを乗せると震えます。
inline要素のままだとtransformが動かないので、display:inline-block;をお忘れなく… 以上、ﾌﾟﾙﾌﾟﾙ震えるリンクでした。

…あと、やっぱりjQueryで震えるリンクを作りたい！っていう人用にjRumbleというプラグインの紹介記事も載せておきます。