【CSSのみ】マウスホバー時に蛍光ペン風のマーカーを引くアニメーションを実装する方法

CSSのlinear-gradientを使うことで、蛍光ペン風のマーカーを引くことができますね。

そのままでも使えますが、今回はマウスホバー時にマーカーを引くようなアニメーションを実装してみました。

以下のDEMOにマウスカーソルを当ててみてください。(スマホの場合はタップ)

テキストリンクに何らかのアニメーションをつけたい時などに使えそうですね。

コピペ用の実装コードと解説をしていきますので、ぜひ真似してみてください。

【コピペ用】マウスホバー時に蛍光ペン風のマーカーを引く実装コード

<p><span class="marker">テキストを入れてください。</span></p>

/* マーカー通常時 */
.marker {
  display: inline;
  background-image: linear-gradient(90deg, #fcf69f, #fcf69f); /* マーカーの色を指定 */
  background-repeat: no-repeat;
  background-position: left bottom; /* マーカーの発生位置を左下に設定 */
  background-size: 0 40%; /* マーカーの横幅 / 縦幅 */
  transition: all 0.8s ease; /* マーカーを引く速度 */
  cursor: pointer; /* ホバー時のカーソルをポインターにする */
}

/* マーカーホバー時 */
.marker:hover {
  background-size: 100% 40%; /* マーカーの横幅を100%にする */
}

これらのコードをコピペするだけで、すぐにお使いいただけます。

次の章でコードの解説をしていきますので、カスタマイズしたい・コードを理解したいという方はぜひ読んでみてください。

【解説】マウスホバー時に蛍光ペン風のマーカーを引く実装コードの解説

HTMLとCSSをそれぞれ別々に解説していきます。

HTML

<p><span class="marker">テキストを入れてください。</span></p>

テキストをspanタグで囲み、markerクラスをつけます。

テキストにリンクを設定したい場合は、aタグを使用してください。

<a href="リンク先のURLを記入"><span class="marker">テキストを入れてください。</span></a>

これでHTMLは終了です！

CSS

/* マーカー通常時 */
.marker {
  display: inline;
  background-image: linear-gradient(90deg, #fcf69f, #fcf69f); /* マーカーの色を指定 */
  background-repeat: no-repeat;
  background-position: left bottom; /* マーカーの発生位置を左下に設定 */
  background-size: 0 40%; /* マーカーの横幅 / 縦幅 */
  transition: all 0.8s ease; /* マーカーを引く速度 */
  cursor: pointer; /* ホバー時のカーソルをポインターにする */
}

/* マーカーホバー時 */
.marker:hover {
  background-size: 100% 40%; /* マーカーの横幅を100%にする */
}

CSSでは、注意するポイントやカスタマイズ可能な箇所を説明していきます。

displayプロパティの値はinlineにしておく

.marker {
  display: inline;
}

まずdisplayプロパティは、inlineにしておきます。

この部分がinline以外だと、文章全体にマーカーを引くことができません。

inline以外だと、文章一行一行ではなくボックス全体にマーカーが引かれてしまいます。

なのでdisplay: inlineを忘れずに指定しておきましょう。

linear-gradient()にはマーカーの色を指定する

.marker {
  background-image: linear-gradient(90deg, #fcf69f, #fcf69f); /* マーカーの色を指定 */
}

#fcf69fと指定している2箇所に、好きな色を記入してください。

2箇所に同じ色を指定すると単色、違う色を指定すると複数色のマーカーをつくることができます。

あわせて読みたい

【CSS】複数色のグラデーションマーカーを実装する方法 ブログ記事を読んでいると、よく蛍光ペン風マーカーで装飾されているのを見かけますよね。（←こういうやつ） こういった単色のマーカーはカンタンに実装できるのですが…

background-sizeにマーカーの太さを指定する

.marker {
  background-size: 0 40%; /* マーカーの横幅 / 縦幅 */
}

background-sizeの値には、横幅・縦幅の順番でマーカーのサイズを指定できます。

まず横幅ですが、ホバー時以外はマーカーを非表示にしたいので0にしておきましょう。

次に縦幅には40%を指定していますが、ここには好きな高さを指定してください。

%だけでなくpxやemなどの単位も使用可能です。

ホバー時に横幅を100%にしてマーカーを表示する

/* マーカーホバー時 */
.marker:hover {
  background-size: 100% 40%; /* マーカーの横幅を100%にする */
}

初期状態では、background-sizeの横幅の値を0にしておきましたね。

この値をホバー時に100%にすることで、マーカーが引かれるという仕組みになっています。

transitionにマーカーを引く速度を指定する

.marker {
   transition: all 0.8s ease; /* マーカーを引く速度 */
}

0.8sの箇所に、マーカーを引くまでの時間を指定してください。

数値を大きくするとマーカーを引く速度が遅くなり、小さくすると早くなります。

以上、CSSの注意点やカスタマイズ箇所の解説でした！

【まとめ】マウスホバー時に蛍光ペン風のマーカーを引く方法

今回は、ホバー時に蛍光ペン風のマーカーを引くアニメーションの実装方法を紹介しました。

CSSの擬似要素を使う方法がよく紹介されていますが、今回の実装ではグラデーションを使用しているので、改行が起こる場合でも対応可能です。

テキストリンクにアニメーションをつけたい時には、是非使ってみてください！

グラデーションマーカーについて詳しく知りたい方は、以下の記事で解説しています。

あわせて読みたい

【CSS】複数色のグラデーションマーカーを実装する方法 ブログ記事を読んでいると、よく蛍光ペン風マーカーで装飾されているのを見かけますよね。（←こういうやつ） こういった単色のマーカーはカンタンに実装できるのですが…

今回の記事ではホバー時にマーカーを引く方法を紹介しましたが、テキストが画面内に入ると同時にマーカーを引く方法も別記事で紹介しています↓

あわせて読みたい

【CSS&JS】スクロールに合わせて蛍光ペン風マーカーを引く方法 記事内で文章を強調したいときには、よくCSSマーカーが使われていますよね。 スマホで記事を流し読みすることが一般的になった今、マーカーで強調することで読者に伝え…