1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【CSS】ホバー時のアンダーラインアニメーションサンプル

Posted at

Webデザインでよく使うアンダーライン(下線)アニメーションのサンプルです。
ナビゲーションなどによく使われている使用頻度の高いもの3パターンになります。

#左からフェードインする下線
hoverすると左から右へアンダーラインが引かれます。カーソルを離すと左へ戻ります。

See the Pen 左からフェードインする下線 by m-akagi (@kanna999-) on CodePen.

#下から上へフェードインする下線
hoverすると下から上へアンダーラインがフェードインします。カーソルを離すと下に戻ります。

See the Pen 下から上へフェードインする下線 by m-akagi (@kanna999-) on CodePen.

#中央から左右に伸びる下線
hoverすると中央から左右に線が伸びます。カーソルを外すと中央に戻ります。

See the Pen 中央から左右に伸びる下線 by m-akagi (@kanna999-) on CodePen.

1
1
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?