SYNCERのロゴ
アイキャッチ画像

リンク色をゆっくりと変える方法

マウスでホバーした時にリンク色をゆっくりと変えるには、transitionプロパティを利用します。

サンプルコード

1.0sは1.0秒という意味です。transitionは、要素にかかる変化の開始から終了までの秒数を設定するプロパティです。

a {
	transition: 1.0s ;
}

デモ

色変更の開始から終了までの時間をtransitionプロパティで1.0秒に設定しました。1.0の部分を変更すれば時間を調整できます。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
		a {
			transition: 1.0s ;
			color: blue ;
		}

		a:hover {
			color: red ;
		}
	</style>
</head>
<body>
	<b><a href="https://example.com/">リンク</a></b>
</body>
</html>
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年6月22日 (木)
コンテンツを公開しました。