人気記事

  1. JSでiOSにも配慮した背景固定なスクロール対応のモーダルウィンドウ

  2. CSSで游ゴシックやメイリオなどのfont-familyを指定するときのベストプラクティス

  3. CSSで簡単に縁取りされたアウトライン文字を作る

  4. IE8〜11/Edge12〜の各バージョンに対応したCSSハックまとめ

  5. JSでtouchstartとclickイベントを2回発生させないようにしつつ同時に指定する

  6. CSSでスクロールバー非表示とJSでスクロールバーのデザインをカスタマイズする

  7. SVGでtext要素を上下左右中央寄せする

  8. 22個のサンプルから学ぶCSSのnth-child()を使った番目を指定するテクニック

  9. ドラッグ＆ドロップで要素を並び替えることができるSortable.js

  10. ネストや親セレクタの参照など基本的な拡張機能について学ぼう

CSSでホバーすると蛍光ペンで線を引いたようなアニメーション

CSSで蛍光ペン風の線を引く方法は広く知られていますが、それをアニメーションさせる方法はあまり知られていないようなので紹介します。蛍光ペン風の線自体は linear-gradient() を使えば表現できます。

蛍光ペン風のアニメーション


<div class="marker">
  <span>
    あのイーハトーヴォの<br>
    すきとおった風、<br>
    夏でも底に冷たさを<br>
    もつ青いそら、
  </span>
</div>


.marker span {
  background-image: -webkit-linear-gradient(left, #ffe653 50%, transparent 50%);
  background-image: linear-gradient(to right, #ffe653 50%, transparent 50%);
  background-position: 100% 0%;
  background-size: 200% auto;
  background-repeat: no-repeat;
  -webkit-transition: background-position .5s ease-out;
  transition: background-position .5s ease-out;
}
.marker:hover span {
  background-position: 0% 0%;
}

テキストの上にマウスホバーすれば蛍光ペンの線が引かれるようなアニメーションをします。


.marker span {
  background: -webkit-linear-gradient(left, #ffe653 50%, transparent 50%) 100% 0% / 200% auto no-repeat;
  background: linear-gradient(to right, #ffe653 50%, transparent 50%) 100% 0% / 200% auto no-repeat;
  -webkit-transition: background-position .5s ease-out;
  transition: background-position .5s ease-out;
}
.marker:hover span {
  background-position: 0% 0%;
}

background のショートハンドを使えばまとめてスッキリ書くこともできます。

仕組み

まず、background-size を 200% にしてテキストの2倍の大きさの背景にします。あとは background-position を変えてスライドアニメーションさせているだけです。ちなみに同じようなアニメーションを background-size を使って表現することもできますが、IEでは background-size の transition が効かないので使っていません。


.marker:hover span {
  background-position: 0% 0%;
  /* background-position: 0 0; ← これはダメ */
}

また、気をつける必要があるのが、0% のように 0 であっても単位は必ずつけてください。これをしないとIEでアニメーションの際にスライドアニメーションが戻らなくなるなどの問題が起きます。

細かな配慮

細かなことですが、たまに上図のように「あ」の前に黄色い背景色が見切れる現象が起きます。これはおそらくブラウザが小数点以下の数値を扱う際に発生する誤差のようなものだと思われますが、このままでは気になるので修正します。


.marker span {
  background: -webkit-linear-gradient(left, #ffe653 50%, transparent 50%) 100% 0% / 202% auto no-repeat;
  background: linear-gradient(to right, #ffe653 50%, transparent 50%) 100% 0% / 202% auto no-repeat;
  -webkit-transition: background-position .5s ease-out;
  transition: background-position .5s ease-out;
}

先ほどのソースコードの background-size の部分を 200% から少し大きめの 202% に変更します。これでこの問題は修正できます。

より蛍光ペンらしく

背景の高さを小さく


.marker span {
  background: -webkit-linear-gradient(left, #ffe653 50%, transparent 50%) 100% bottom / 200% 70% no-repeat;
  background: linear-gradient(to right, #ffe653 50%, transparent 50%) 100% bottom / 200% 70% no-repeat;
  -webkit-transition: background-position .5s ease-out;
  transition: background-position .5s ease-out;
}
.marker:hover span {
  background-position: 0% bottom;
}

background-size を 200% auto から 200% 70% のように高さを全部覆うのではなく、少し小さくしてみるとより蛍光ペンっぽくなります。

背景を下にずらす


.marker span {
  padding-bottom: .2em;
  background: -webkit-linear-gradient(left, #ffe653 50%, transparent 50%) 100% bottom / 200% 50% no-repeat;
  background: linear-gradient(to right, #ffe653 50%, transparent 50%) 100% bottom / 200% 50% no-repeat;
  -webkit-transition: background-position .5s ease-out;
  transition: background-position .5s ease-out;
}
.marker:hover span {
  background-position: 0% bottom;
}

padding-bottom で下にずらすことによってよりおしゃれになります。

CSS本執筆しました！！！