【ズルいWeb制作】2nd:100万円稼ぐまでの挑戦32【マウスホバー時の動きを付ける】

こんにちは、タビんちゅです。

目標はWeb制作で100万円稼ぐ!!

東京フリーランスが無料で提供している30DAYSトライアル(デイトラ)1stを完了し、2ndで学んだことを忘れないうちに書いていきます。

これからデイトラをはじめる人の参考にもなるかもです。

この記事を書いたタビんちゅは、

  • Web制作で稼いで2020年5月のセブ🇵🇭友達の結婚式に絶対行く
  • セブIT留学で大失敗
  • 海外フリーランスを諦められない
  •  #30DAYSトライアル で再挑戦プログラミング中
  • Web制作、フリーランス関連を学んで即発信中

あと記事はサクッと書いているので、誤字脱字があったらすみません。

『2nd:DAY17』を学習中

https://www.daily-trial.com/lessons/web_site/courses/40074aa6/articles/b28e842e

【今日やること】マウスホバー時の動きを付ける

よく使われがちなマウスホバーのCSSパターン10選と作り方を学んでいきます

実務に必須のアニメーション

パターンをいくつかストックする

ナビゲーションの仕上がりは下記の感じ。ホバーの動きをコーディングする時は、transitionもつけた方がしっくりきますね。

実務ではホバーの動きはコーダーに任されることが多く、自分の「お決まり」ホバーアクションを持ってるとコーディング効率が上がるのでいい。ちなみに、ホバーすると「透過」するやつが定番らしい。

参考サイト:

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

テキストリンクのホバー時に使えるエフェクト・デザインサンプル 15

ひと口メモ

CSSで作るボタンアニメーションはある程度パターンをストックしてれば、あとは使い回すだけ。定番はホバーすると「透過」するやつ。

というわけで、今回はここまでです。『プログラミングは継続がいちばん大事。』ではでは。

人気No.1記事