DETAIL NOTE

INTUITION DETAIL DESIGN BLOG

hover時ゆっくり変化させるCSS

画像やボタンなど、マウスホバーした際に色を変えるなどして変化をつけることにより、リンクがあることをよりわかりやすく見せることがあります。

通常はパッと切り替わるのですが、ゆっくり切り替わるアニメーションを付加することによりリッチに表現できます。

CSSのみですごく簡単にできるので、今回はその説明を。

文字リンクをゆっくり変化させる

背景色も同じ処理で大丈夫です。

 

画像をゆっくり変化させる

 

注意点としては、hoverではなくaの箇所のcssに記載することです。

こんな簡単なことでサイトがリッチに変わるので、ぜひやってみてください。

 

次へ 投稿

前へ 投稿

© 2022 INTUITION DETAIL DESIGN