WEB制作

2016-02-23(Tue)

Atsuko

簡単にマウスオーバーアニメーションを実現する

こんにちは久しぶりの登場でございます。

簡単にマウスオーバーアクションが実現できる「Hover.css」というものがあります。

206496

head内にcssを読み込んで、対応するクラスを付けるだけ!
簡単ですね。

cssはこちらでダウンロードするか、下記CDNを使うとより簡単です。

 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.0.2/css/hover-min.css">
 

あとはアニメーションさせたい要素にクラスを付けるだけです。

試しにhvr-pulseというクラス名を付けてみます。

マウスカーソルを乗せてみてください。↓

pulse

他にも色々なアクションが用意されています。

wobble
buzz
sweep to right
radial out
shutter in vertical
curl bottom right

いろいろお試しあれ!

ではまた(。・ω・。)ノシ


このブログを書いた人

Atsuko

実はJavascriptとか会社入るまでやったことなかったことは内緒です。
酉年生まれのせいか、話を聞いても三歩あるけば忘れます。

最近書いた記事

関連する記事