お知らせ / ブログINFO / BLOG
2019.08.05
【CSS】マウスオーバー時にふんわり出る下線アニメーション
最近いろいろなサイトで見かけますが、グローバルナビなどのテキストメニューにマウスオーバーすると下線がふんわりとアニメーション表示されたりしますね。
こういったアニメーションがあると雰囲気が大分変ります。
簡単に実装できるので、ぜひ一度試してみて下さい!
HTML
<p>リンクのアニメーションを<a href="./">この部分</a>に実装です。</p>HTML部分は普通通りです。特定のa要素にだけかけたい場合は共通のクラス等つけておくといいと思います。
CSS
a {
text-decoration:none;
}
a::after {
content:"";
width:100%;
height:1px;
display:block;
background-color:#000;
transition:opacity 0.3s;
opacity:0;
}
a:hover::after {
opacity:1.0;
}transitionで指定する秒数指定によって雰囲気が大分変りますので調整してみてください。
実装サンプル
リンクのアニメーションをこの部分に実装です。
また今度、他のバリエーション(線が伸びる、動く)なども掲載していこうと思います。
