Nexus 9
PS4
Intuos Pro
Core i7-4790K
ページの先頭へ
トップに戻る
2014年1月30日 Web制作

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


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

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

Demoはベンダープレフィックスを省略したコードを載せています!

Demo - Block要素

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

Demo - inline-Block要素

上と同じく、マウスを乗せると震えます。
inline要素のままだとtransformが動かないので、display:inline-block;をお忘れなく…
文章内のリンクはこんな感じ→ここにマウスを乗せて!←で震えます。
以上、プルプル震えるリンクでした。

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