CSS3でロールバーアニメーションを可能にする

css3

CSSで背景色を徐々に変化させる
ボタンにマウスカーソルを合わせると背景が徐々に変化するロールオーバーアニメーションは従来はjavascriptやFlashを使うことが多かったわけですが、それらを使うことなくCSS3で簡単に実装してみましょう。

CSS3でロールバーアニメーション

サンプル

ここの背景と文字色が変わります

サンプルソース

HTML部

<p id="Transition"><a href="#Transition">Transition</a></p>

CSS部

#Transition {

	width:300px;

	height:50px;

	line-height:50px;

	text-align:center;

}

#Transition > a {

	display:block;

	color:#FFFFFF;

	text-decoration:none;

	background-color:#000000;

}

#Transition > a:hover {

	background-color:#CCCCCC;

	color:#000000;

	-webkit-transition: background-color 0.5s linear;

	-moz-transition:background-color 0.5s linear;

	transition:background-color 0.5s linear;

}
rss登録 rss登録 rss登録

コメント

コメントをお寄せください。

コメントの投稿

コメントフィード コメントフィード

トラックバックURL: http://select.rash.jp/css/170/trackback/