テキストリンクのホバー時に使えるエフェクト・デザインサンプル 15 - NxWorld

文章内のテキストリンクやテキストのみで実装しているようなナビゲーションリンクなどで使えそうなホバーエフェクト・デザインのサンプルです。 文字数が変化したり改行が頻繁に入るような場所などでは正直使い辛くて利用できる場面が限られてしまうものも多いのですが、シンプルなHTMLとCSSで様々な見せ方ができます。 サンプルの中で特にdisplay: inline-block;を記述しているタイプのものが意図しない箇所で改行されたり、逆にされなかったりということがあるので注意して下さい。 実際にどのような動きになってしまうのかはブラウザを縮めて確認してもらったり、または自身で環境を用意して実装・確認をしてもらうとよりわかりやすいと思います。 ここで紹介するエフェクトは、基本的に<a href="#">リンク</a>のようなHTMLに対して実装したものになります。 また、サンプルコードに含まれていません

[webcenter]

リンクスタイル

[hujuu]

“a { position: relative; display: inline-block; transition: .3s; } a::after { position: absolute; bottom: .3em; left: 0; content: ''; width: 100%; height: 1px; background-color: #2ecc71; opacity: 0; transition: .3s; } a:hover::after { bottom: 0; opacity: 1; }”

[sisicom]

簡単だけど面白いアニメーション

[z1a2nh]

テキストリンクのホバー時に使えるエフェクト・デザインサンプル 15

[yukimurasama]

でかい見出しに使うといいかも

[musicala]

たのしい / テキストリンクのホバー時に使えるエフェクト・デザインサンプル 15 | NxWorld via @nxworld_net

[kumono_jyuza]

もうこんなことがjsじゃなくてcss3でできるんやもんなぁ…