Webデザインでリンクの上にマウスカーソルを乗せた気に、ゆっくり色が変わる方法を紹介します。
transitionプロパティで実装する
まず先に成果物を紹介。
リンクの文字上にマウスを乗せると、ゆっくり色が変わります。
See the Pen XqMxpM by code-school (@code-school) on CodePen.
コード解説
ふわっと時間をかけて変更していくようにするには、transitonプロパティで実装することができます。
1.0sという値は1秒ということ。sはsecond(秒)の略ですね。
これを0.5sにすると0.5秒かけて変化していくので、少し速い変化になります。
該当箇所を1.0sから変更してみて試してみてください。