BLOG ブログ

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

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

簡単にマウスオーバーアクションが実現できる「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

いろいろお試しあれ!

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

RELEVANCE 関連記事

お問い合わせ TOPへ