ホバー時に移動
マウスを載せる(ホバー時)に位置が少しだけ動くくらいならJavaを使わなくてもCSSで簡単に出来る。
1 2 3 4 5 6 |
クラス名{ transition: all 1s; } クラス名:hover{ transform: translate(0px, -5px); } |
どの方向にどれだけ動かしたいかは「translate(0px, -5px)」の値で決定。
値の見方はXとY(縦方向、横方向)のみ指定可能で、プラスの値二つなら右下に下がる。
左上に上げたいなら両方をマイナス値にすればOK。
ちなみに上記CSSは横方向0、縦方向マイナス値なのでホバー時に上に動く。
※スマホで見た時に微妙だったので要改良。
ホバー時に拡大
1 2 3 4 5 6 |
クラス名{ transition: all 1s; } クラス名:hover{ transform: scale(1.3,1.3); } |
標準の大きさが1になる。
ホバー時に小さくしたい場合は1未満の数字を記載。
コメントを残す