コピペ一発!CSSのみでナビゲーションバーにアニメーションエフェクト

   

 ナビゲーションバーのホバーエフェクトをアニメーション(中心から広がる下線)のデザインに変更してみました。このブログナビゲーションバー↑で使用中なので確認下さい。

シンプルですが、動きがあり気に入っています。CSSのみ張り付けで、応用でも簡単に使用できますので導入してみてはいかがですか?サンプルのコピペOKです。

Sponsored Link

ナビゲーションバーアニメーションsample

hover(マウスを乗せたとき)のみのCSSです。

  • #main-navigationは各自のブログにあったものに変更して下さい。
  • color、backgroundはブログに合った色。
  • height、bottomは好きな間隔で。height大きくすれば線ではなくfont全体にも入ります。
  • background colorは出てくる線の色を指定。#000は黒です。

子テーマに追加で、以上の点さえ確認して問題なければコピペだけでもいけると思います。

これを基本に、px値を変更するだけでも見え方が変わりますので試してみて下さい。

シェアして頂ければ喜びます。

 - Webデザイン, ブログ関連