パーツ番号 02-01-02 ・ CSSのみ

蛍光マーカー見出し

表示時に蛍光ペンで引いたような背景が左から塗られます。記事本文の強調やキャンペーン見出しに。プラグインなしで実装可能。

scrollcss

プレビュー

ソースコード

HTML

<h4 class="d02-01-02-h">ここが<span class="io-reveal">いちばん大事な</span>ポイント</h4>

CSS

.d02-01-02 .d02-01-02-h{
          font-size:24px;
          font-weight:700;
          color:#1a2333;
          line-height:1.8;
        }
        .d02-01-02 .io-reveal{
          background-image:linear-gradient(transparent 55%, #ffe94d 55%, #ffe94d 92%, transparent 92%);
          background-repeat:no-repeat;
          background-size:0% 100%;
          transition:background-size .9s cubic-bezier(.22,1,.36,1) .25s;
          padding:0 .1em;
        }
        .d02-01-02 .io-reveal.is-in{
          background-size:100% 100%;
        }

クラス名 .d02-01-02 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。