DAY10:マウスホバー時の動きを付ける

ボタンやリンクの上にボタンを乗せた時にどういったアニメーションをさせるかの代表的なパターンを覚えていきましょう。

:hoverの擬似クラスと一緒に、transitionのCSSプロパティも理解しておく必要があったりします。

課題:マウスホバー時の動きを指定する

以下の記事を参考に、全部のパターンを作れるようになってください。そして、どのホバーアクションでもいいので、DAY8までに作成したサイトのすべてのリンク要素に対して:hover時の動きを指定してください!

【コピペOK】よく使われがちなマウスホバーのCSSパターン10選と作り方

テキスト系はこちらが参考になります。
テキストリンクのホバー時に使えるエフェクト・デザインサンプル 15

ただ、ヘッダーのメニューはアクティブな要素にアンダーラインが引いてある状態です。これは、現在の表示されているメニューを分かりやすく見せる意味を持っています。

ホバー時も「次はこのメニューがアクティブになりますよ!」という意味を込めて同様の表示を見せてあげると親切だと思います。

その他の特に指定がなさそうな要素に関しては、とりあえずで透過を指定しておけば無難?です。

余裕があれば…

transitionプロパティもついでに覚える

移ろいゆくアニメーションを表現するCSS「transition」について解説

今は、CSSで動きを制御できるtransitionanimationなどのプロパティの理解は必須かもしれません。これらのプロパティの値を変えながら挙動を試してみてください!

transformプロパティもついでに覚える

さらに、transitiontransformはセットで使われがちです。余裕がある方は、transformについても色々と触ってみてください。

マテリアルデザインを設計する上で欠かせないCSS「transform」について解説

このページが役に立ったら
いいね!お願いします

運営の励みになります...。

関連の記事