マウスオーバーでラインアニメーションを実現する

マウスオーバーでラインアニメーションを実現する

ナビゲーションなどでマウスオーバー時に、装飾の下線を横に伸ばすアニメーションをかつてはFlashなので実現していましたが、これと同じような動きをCSSのみで実現することが可能になりました。

a要素に対する擬似要素の「a:after」と「a:hover:after」をCSSに記述し、javascriptを併用していきます。

まずはデモサンプルを確認してください。

DEMO

それでは見ていきましょう。

 

 

HTMLを記述

変則的な記述方法ですが、「<!– –>コメントアウト」を上記のように記述します。

CSSを記述

hoverline3

a:after」と「a:hover:after」の指定で横に伸びるlineの太さや幅、アニメーション速度を指定しています。

以上になります。

 


 

タイトルとURLをコピーしました