CSS：ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法 - NxWorld

テクノロジーカテゴリーの変更を依頼記事元:

www.nxworld.net

159users がブックマークコメント

コメント

5

記事へのコメント5件

注目コメント
新着コメント

idocci22 “a::after { position: absolute; bottom: -4px; left: 0; content: ''; width: 100%; height: 2px; background: #333; transform: scale(0, 1); transform-origin: left top; transition: transform .3s; } a:hover::after { transform: scale(1, 1); }”

2021/10/16 リンク

glitters_mode “position: relative; display: inline-block; text-decoration: none;”

2018/11/27 リンク

sutara_lumpur アンダーラインに限らずCSSアニメーション全般の参考になる。ありがたや。

css

2017/05/18 リンク

maritimecolor 使えそう！

CSS

2017/05/17 リンク

winterfall そんなにうるさくないので、使い勝手がよさそう

2017/05/17 リンク

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

規約違反を報告

アプリのスクリーンショット

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

関連記事

CSS：ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法 - NxWorld

ここ最近主にナビゲーションなどでホバー時にアンダーラインをアニメーションさせるエフェクトの実装要... ここ最近主にナビゲーションなどでホバー時にアンダーラインをアニメーションさせるエフェクトの実装要望が多いので、パッと使えるようによく利用するものをひと通りまとめたのでシェアします。また、大体この手のアニメーションを利用する際はサイト全体で動きを統一させることが多いのですが、たまに場所によって少し違いをつけたいということもあるので、そういったときにすぐ対応できるようにSassのmixinを用いて実装する方法も併せて紹介します。ここで紹介しているサンプルで使用しているHTMLは、すべて<a href="#">Lorem ipsum</a>のようなシンプルなa要素を使用した想定になっています。

ブックマークしたユーザー

kjtec2022/08/23
idocci222021/10/16
capybaraww2021/02/22
aronbass42021/02/18
nelpesica2020/12/23
KUROPON2019/07/24
natural900002019/06/26
thinceller2019/06/18
pirokong-z2019/02/28
neu19752019/02/11
glitters_mode2018/11/27
nagaryo2018/11/01
ms09242018/05/21
akira_maru2018/04/27
typem1death2018/04/26
autumn_k2018/01/16
TAKEmaru2018/01/15
renos2017/06/08

同じサイトの新着

同じサイトの新着をもっと読む

いま人気の記事

いま人気の記事をもっと読む

いま人気の記事 - テクノロジー

いま人気の記事 - テクノロジーをもっと読む

新着記事 - テクノロジー

新着記事 - テクノロジーをもっと読む

いま人気の記事 - 企業メディア

企業メディアをもっと読む

設定を変更しましたx