Menu

ふわっと変わるエフェクト

2015年9月4日00:14  投稿者 : PINION

今回は、完全な小ネタなのですが、使い勝手は良いと思います。

疑似クラス:hoverは、主にリンクにマウスカーソルを合わせた時に使われますが、必ずしもリンクにしか使えない訳ではありません。
例えば、tableのtrにhoverを設定しておけば、今マウスカーソルが合っている行全体の色が変えられるので、どの項目に対応しているのか解りやすいですよね。

で、そのhoverで設定した効果を、ふわっとエフェクトをかけたように適用する方法です。
本当に簡単です。

a {
	-moz-transition: all .3s;
	-webkit-transition: all .3s;
	-ms-transition: all .3s;
	transition: all .3s;
}

a:hover {
	background-color: #CCC;
}

これだけ。
ポイントは、hover側はそのままで、その前の要素(上記の場合はa)にtransitionを設定する事。
そうすれば、次に適用される要素(hoverやactive)に移る時に、設定した時間(上記の場合は0.3秒)をかけて、ふわっと変わるようになります。
この時、aではなくhoverのほうに設定すると、カーソルを合わせた時はふわっと変わりますが、カーソルを外した時には適用されません。逆に言うと、合わせた時にふわっと変わって、外した時には瞬時に戻したい時は、hoverのほうに適用すれば良いという事ですね。

当サイトのサイドメニューや、各コーナートップの記事サムネイル画像(これはhoverにopacityで少し透けるようにしています)に、同じエフェクトを使っています。
本当に簡単な設定でエフェクトがかけられるので、とても便利ですね。

コメントを残す

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

コメントフィード

トラックバックURL : http://www.mp-create.com/44.html/trackback

HTML5 & CSS3トップ