リンク色をゆっくりと変える方法
マウスでホバーした時にリンク色をゆっくりと変えるには、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>
関連記事
- dl要素を横並びにする方法
- dl要素を横並びに表示するには、dt要素にfloat: leftを適用し、dd要素の左余白を設けます。
- 三角形を作る方法
- CSSで三角形を作るには、横幅、高さが0の要素に幅の厚い枠線を付けます。
- ホバーした時に透過させる方法
- 画像などを透過させるには、opacityプロパティを利用します。
- リンクの下線を消す方法
- リンクテキストの下線を消すには、text-decorationプロパティにnoneを指定します。