[CSS]リンクにカーソルを乗せた時にゆっくり色を変更する方法

0

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から変更してみて試してみてください。








 

About Author

Comments are closed.