© Style-5.net
 

CSS3を使い背景色(background)をエフェクトさせながら変化させる

CSS3を使い背景色(background)をエフェクトさせながら(ゆっくりと)変化させる方法

DEMOページ


このCSS3は「transition」プロパティを用います(※Internet Explorer(IE)では、バージョン10以上でないと反映されません)

テキストを絡めた代表例)
CSS
.henka-1 a {
	background:rgba(242,242,242,1);
	color:rgba(17,17,17,1);
	padding:10px;
	-webkit-transition: all 0.7s;
	-moz-transition: all 0.7s;
	transition: all 0.7s;
	}
.henka-1 a:hover{
	background:rgba(226,0,72,1);
	}


さらにテキスト色も同時に変化させるには

.henka-2 a {
	color:rgba(17,17,17,1);
	background:rgba(242,242,242,1);
	padding:10px;
	-webkit-transition: all 0.7s;
	-moz-transition: all 0.7s;
	transition: all 0.7s;
	}
.henka-2 a:hover{
	color:rgba(255,255,255,1);
	background:rgba(226,0,72,1);
	}


HTML
<div class="henka-1"><a href="">マウスをのせると変化</a></div>


※属性、要素名、各数値はあくまでも参考ですので適宜に編集してお使いください。