画像やボタンなど、マウスホバーした際に色を変えるなどして変化をつけることにより、リンクがあることをよりわかりやすく見せることがあります。
通常はパッと切り替わるのですが、ゆっくり切り替わるアニメーションを付加することによりリッチに表現できます。
CSSのみですごく簡単にできるので、今回はその説明を。
文字リンクをゆっくり変化させる
|
1 2 3 4 5 6 7 8 9 10 11 12 |
a { color: #f00; text-decoration: none; -webkit-transition: 0.8s; -moz-transition: 0.8s; -o-transition: 0.8s; -ms-transition: 0.8s; transition: 0.8s; } a:hover { color: #0f0; } |
背景色も同じ処理で大丈夫です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
a { padding: 4px; background: #f00; color: #fff; text-decoration: none; -webkit-transition: 0.8s; -moz-transition: 0.8s; -o-transition: 0.8s; -ms-transition: 0.8s; transition: 0.8s; } a:hover { background: #0f0; } |
画像をゆっくり変化させる
|
1 2 3 4 5 6 7 8 9 |
a:hover img { opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } |
注意点としては、hoverではなくaの箇所のcssに記載することです。
こんな簡単なことでサイトがリッチに変わるので、ぜひやってみてください。