【CSS】マウスを乗せたときにボーダーが伸びるアニメーション

プログラミング

おはこんばんにちは!ノボル(@Veritas40835638)です。

今回は、マウスを乗せたとき(マウスオーバー)に
ボーダーが伸びるCSSアニメーションをご紹介します。

コードだけだとイメージがつかないかもしれないので、
CodePenで動きが確認できるようにしました!

ほぼコピペで再現できるので、皆さんもアニメーションをつけて
ウェブサイトをよりカッコよくしてみては?


今回実装するアニメーションは以下の通りです。
画面の青いボックスにカーソルを合わせてみてください。
四辺のボーダーが伸びたり縮んだりすると思います。
では、早速実装していきましょう!

See the Pen oNNbdrB by ZeroRequiem126 (@zerorequiem126) on CodePen.


HTMLで要素を作成

CSSでアニメーションをつける前に、まずHTMLで要素を作成してあげる必要があります。
今回はボタン要素をマウスーバーした際に四辺のボーダーを表示させます。
上下左右のボーダーを表示するスパン要素を記述し、それをdivタグで囲ってあげます。

HTML


CSSでHTMLにスタイルをつける

次に、上で作成したHTMLにCSSでアニメーションをつけていきます。

上下左右のボーダーとなるspanタグを記述しましたが、
正確には、ボーダーのように見える要素という表現がふさわしいです。
上下左右にわかれた要素にスタイル高さ背景色を指定していきます。
マウスを当てたときのアニメーションは
transform(トランスフォーム)を使用して表現します。

CSS

最後に

今回ご紹介したホバーアニメーションは、数ある中の一つにすぎません。
他の動きを実装してみたいという方は、以下の記事がオススメです。
カッコいいアニメーションが多数紹介されており、参考になるかと思います。
https://lab.sonicmoov.com/markup/css/hover-css/

以上、マウスを乗せたときボーダーが伸びるアニメーションのご紹介でした!
最後まで読んで頂きありがとうございました(o^^o)

コメント

タイトルとURLをコピーしました