ウェブ

カーソルホバー時のアンダーラインアニメーション実装【CSS】

ホバーアクションアイキャッチ画像

WEBデザインに必要なホバー時のアンダーラインをCSSのみで様々な動きを加えました。
カーソルが要素に乗った際に動作します。

実装するためのHTMLCSSをコピペ出来るようになっていて、カラー変更など自由に出来ます。

プル

BLOGやWEBサイトに使用してユーザビリティをアップさせましょう。

ライン【line】

::after::beforeでアンダーラインを指定。

線の太さ

線の太さはp.sample a:beforeheight: 4px;の変更で調整出来ます。

・動作確認
sampleをPC版はマウスを乗せたとき、スマホ版はタップで確認できます。

中央からアンダーライン

左からアンダーライン

右からアンダーライン

上下からライン

上下左からライン

上下右からライン

上下左右からライン

上下左右から
sample

上下右左からライン

上下右左から
sample

下にアンダーラインフェードイン

下にフェイードイン
sample

下にアンダーラインフェードイン2

下にフェイードイン2
sample

左から流れる

左から流れる
sample

↓下記本は自身がこの1冊でゼロからHTML、CSSの基本が身についたお勧めの本です。

ゼロから覚えるHTML&CSSの基本
ゼロから覚えるHTML&CSSの基本

▪ゼロから覚えるHTML&CSSの基本
これから本格的にWeb制作を始めたい人が必ず最初に読む本で、知識ゼロでもHTMLコードとCSSでスタイルの適用が書けるようになります。

book
created by Rinker
¥1,700 (2022/10/05 06:02:55時点 楽天市場調べ-詳細)

↓CSSの設計をもっと深く学びたい方はこちらの本がお勧めです。

Web制作者のためのCSS設計の教科書
Web制作者のためのCSS設計の教科書

▪Web制作者のためのCSS設計の教科書
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズで、コンポーネントやCSSプリプロセッサを意識した設計・管理の実践など、「ちゃんとCSSを書く」ためのプロの考え方を徹底解説されています。

book
created by Rinker
¥2,420 (2022/10/04 14:36:34時点 楽天市場調べ-詳細)
プル

よく使うコードは自身のメモ帳などに記述しておいて、コピーペーストで簡単に実装出来るようにすると作業効率がアップします。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA