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

手書き風ストローク下線見出し

スクロールで表示されると、手書き風の曲線がSVGでゆっくりと描画されていく見出し。ハンドメイド・カフェ・パーソナルサイトに温かみを添えます。

scrollcsssvg

プレビュー

ソースコード

HTML

<div class="d02-01-18-wrap io-reveal">
          <h4 class="d02-01-18-h">心を込めて、丁寧に。</h4>
          <svg class="d02-01-18-svg" viewBox="0 0 300 20" preserveAspectRatio="none">
            <path class="d02-01-18-path" d="M4,14 C60,4 120,18 160,10 C200,3 250,15 296,8" />
          </svg>
        </div>

CSS

.d02-01-18 .d02-01-18-wrap{ display:inline-block; }
        .d02-01-18 .d02-01-18-h{
          font-size:26px;
          font-weight:700;
          color:#1a2333;
          margin-bottom:2px;
        }
        .d02-01-18 .d02-01-18-svg{
          width:100%;
          height:16px;
          display:block;
        }
        .d02-01-18 .d02-01-18-path{
          fill:none;
          stroke:#f97316;
          stroke-width:3;
          stroke-linecap:round;
          stroke-dasharray:400;
          stroke-dashoffset:400;
          transition:stroke-dashoffset 1.4s cubic-bezier(.22,1,.36,1) .2s;
        }
        .d02-01-18 .d02-01-18-wrap.is-in .d02-01-18-path{
          stroke-dashoffset:0;
        }

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