デイトラWeb制作コース中級編DAY20 マウスホバー時の動きを付ける

アニメーションがあるとリッチ度が増しますね！今回はHTMLとCSSだけで実装します。

マウスホバー時の動きを付ける HTML&CSS

実際はSassで書きますが、CodePenで表示させるためCSSで書いています。

.hover01

See the Pen 透明に近づける by 那木 未央 (@sozghkbh-the-bashful) on CodePen.

最もオードソックスと言っていいスタイルですね。ホバー時にopacityを下げることにより透過させます。

.hover02

See the Pen 色が反転 by 那木 未央 (@sozghkbh-the-bashful) on CodePen.

ホバーするとボタンの色が反転します。01とは逆に色番号を書けば完成です。

.hover03

See the Pen 凹むボタン by 那木 未央 (@sozghkbh-the-bashful) on CodePen.

下ボーダーを太めに引いて影のようにし、立体的に見せるのがポイントですね。ホバー時は影を透明に、transformで動かし、まるでボタンが押されているかのように見せています。

.hover04

See the Pen 浮き上がって影 by 那木 未央 (@sozghkbh-the-bashful) on CodePen.

box-shadowプロパティのショートハンドでホバー時影の位置が動くように設定しています。

.hover05

See the Pen X軸で回転 by 那木 未央 (@sozghkbh-the-bashful) on CodePen.

transform: rotateXで、横軸を中心にアイテムが回転するアニメーションをつけます。

.hover06

See the Pen Y軸で回転 by 那木 未央 (@sozghkbh-the-bashful) on CodePen.

transform: rotateYで、縦軸を中心にアイテムが回転するアニメーションをつけます。

.hover07

See the Pen 時計回りに回転 by 那木 未央 (@sozghkbh-the-bashful) on CodePen.

transform: rotateZで、時計回りにアイテムが回転するアニメーションをつけます。

.hover08

See the Pen 拡大 by 那木 未央 (@sozghkbh-the-bashful) on CodePen.

transform: scaleで拡大させます。

.hover09

See the Pen 色を変える by 那木 未央 (@sozghkbh-the-bashful) on CodePen.

ホバーすると文字色が変わります。簡単ですね！

.hover10

See the Pen アンダーラインが登場 by 那木 未央 (@sozghkbh-the-bashful) on CodePen.

最後はちょっと複雑です。擬似要素とposition、transitionとの合わせ技ですね。

これで今回は終わりです。次は「Webフォント、デバイスフォントを理解する」です。