アニメーションがあるとリッチ度が増しますね！今回は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フォント、デバイスフォントを理解する」です。
コメント