【CSS】ホバー時にヒョイと線が伸びる方法!複数のパターンも紹介!

(この記事は2022年1月10日に投稿されました。)

皆さんはサイトのメニューをマウスでホバーしてみると、時間差で下から線が表示されるアニメーションを見たことがありますか?

実は当サイトでも搭載されており、メニューにマウスを持っていくと、下記の画像のように下から線が時間差で表示されるようになっています。

このイベントはメニューだけでなく、テキストでしたらどこでも使用できるアニメーションになります。

そのため、「テキストの表示だけで少し物足りない!」と感じている人は、こちらのアニメーションをつけてみましょう。

また、このイベントを実装させるにはHTML、CSSのコードを追記する必要がありますが、少量のコードで実装できますので挑戦してみたい人はぜひこちらの記事をご参考下さい。

今回はホバー時にヒョイと線が伸びる方法について紹介していきます。

この記事はこんな方におすすめ
⚫︎ サイトのテキストアニメーションをおしゃれにしたい




ホバー時にヒョイと線が伸びる方法

ここでは、ホバー時にヒョイと線が伸びる方法について紹介していきます。

まず、コードを書く前に下記の2つのファイルを用意する必要があります。

⚫︎ HTMLファイル
⚫︎ CSSファイル

下記のコードをそれぞれのファイルにコピーして貼り付けることで下記の画像のように作成することができます。

しかし、コピーして貼り付けるだけでなぜ動くか気になるかと思いますのでHTML、CSSのコードをそれぞれに分けて解説していきます。

HTMLの書き方

まずは、HTMLの書き方について紹介していきます。

ここでは分かりやすいようにファイル名を「example.html」とします。

コードの簡単な解説
  1. 9行目と19行目はPCやスマホの画面に表示する要素を記述している。
  2. 6行目は使用するCSSファイルをリンクさせている。

CSSの書き方

次に、CSSの書き方について紹介していきます。

ここでは分かりやすいようにファイル名を「example.css」とします。

作成した「example.css」は「example.html」と同じファイルに追加しましょう。

コードの簡単な解説
  1. 4行目のクラスはホバーする前の線のアニメーションやデザイン
    (「transition: all 0.5s;」で変化する時間を0.5秒に設定し、「transform: scale(0,0);」より、通常は縮小している)
  2. 13行目のクラスはホバーした後の線のアニメーション
    (「transform: scale(1,1)」でホバーした時に拡大している)

ホバー時にヒョイと線が伸びる方法のパターン

先ほどはホバー時にヒョイと線が伸びる方法を紹介しましたが、ここではホバー時にヒョイと線が伸びる方法のパターンについて紹介していきます。

パターンとしてはたくさんありますが、使用できるのは下記の3つになるかと思いますのでそれぞれ解説していきます。

⚫︎ 真ん中から左右にヒョイと線が伸びるパターン
⚫︎ 左から右にヒョイと線が伸びるパターン
⚫︎ 右から左にヒョイと線が伸びるパターン

真ん中から左右にヒョイと線が伸びるパターン

まずは真ん中から左右にヒョイと線が伸びるパターンです。

要素の中央かもしくは下からを設定することでおしゃれなアニメーションになりますので、その2パターンを紹介します。

要素の中央から線が伸びる場合(真ん中から左右)

要素の中央から線を伸ばすには、先ほどのhtmlファイルにある<body>内のコードを下記のように変更します。

⚫︎ example.html

また、CSSファイル内のコードを下記のように変更します。

⚫︎ example.css

● 実行結果

要素の下から線が伸びる場合(真ん中から左右)

要素の下から線を伸ばすには、先ほどのhtmlファイルにあるbodyタグ内のコードを下記のように変更します。

⚫︎ example.html

また、CSSファイル内のコードを下記のように変更します。

⚫︎ example.css

● 実行結果

左から右にヒョイと線が伸びる方法のパターン

次は左から右にヒョイと線が伸びる方法のパターンです。

要素の上にマウスを重ねると、線が左から右へ伸びるようになります。

こちらも要素の中央かもしくは下からを設定することでおしゃれなアニメーションになりますので、その2パターンを紹介します。

要素の中央から線が伸びる場合(左から右)

要素の中央から線を伸ばすには、先ほどのhtmlファイルにある<body>内のコードを下記のように変更します。

⚫︎ example.html

また、CSSファイル内のコードを下記のように変更します。

⚫︎ example.css

● 実行結果

要素の下から線が伸びる場合(左から右)

要素の下から線を伸ばすには、先ほどのhtmlファイルにある<body>内のコードを下記のように変更します。

⚫︎ example.html

また、CSSファイル内のコードを下記のように変更します。

⚫︎ example.css

● 実行結果

右から左にヒョイと線が伸びる方法のパターン

最後は左から右にヒョイと線が伸びる方法のパターンです。

こちらも要素の中央かもしくは下からを設定することでおしゃれなアニメーションになりますので、その2パターンを紹介します。

要素の中央から線が伸びる場合(右から左)

要素の中央から線を伸ばすには、先ほどのhtmlファイルにあるbodyタグ内のコードを下記のように変更します。

⚫︎ example.html

また、CSSファイル内のコードを下記のように変更します。

⚫︎ example.css

● 実行結果

要素の下から線が伸びる場合(右から左)

要素の下から線を伸ばすには、先ほどのhtmlファイルにあるbodyタグ内のコードを下記のように変更します。

⚫︎ example.html

また、CSSファイル内のコードを下記のように変更します。

⚫︎ example.css

● 実行結果

WordPressにホバー時にヒョイと線が伸びるアニメーションをつけて実装してみた

WordPressにホバー時にヒョイと線が伸びるアニメーションをつけて実装してみましたのでご紹介します。

今回は当サイトのグローバルメニューのテキストアニメーションを変更してみます。

● 実行結果

左から右に線を引くアニメーションを、真ん中から左右に線を引くアニメーションへと変更しました。

まとめ

⚫︎ ホバー時にヒョイと線が伸びるようにするには、CSSを使用する

⚫︎ ホバー時にヒョイと線が伸びる方法のパターンは下記の3つである
・ 真ん中から左右にヒョイと線が伸びるパターン
・ 左から右にヒョイと線が伸びるパターン
・ 右から左にヒョイと線が伸びるパターン

コメントを残す

メールアドレスが公開されることはありません。