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

波線ドローイング見出し

スクロールで表示されると波線の下線が左から右へアニメーションで描かれていく見出し。やさしい雰囲気のサロン・クリニックサイトに。

scrollcss

プレビュー

ソースコード

HTML

<div class="d02-01-23-wrap io-reveal">
          <h4 class="d02-01-23-h">やさしい時間を、あなたに。</h4>
          <svg class="d02-01-23-svg" viewBox="0 0 300 12" preserveAspectRatio="none">
            <path d="M0,6 Q7.5,0 15,6 T30,6 T45,6 T60,6 T75,6 T90,6 T105,6 T120,6 T135,6 T150,6 T165,6 T180,6 T195,6 T210,6 T225,6 T240,6 T255,6 T270,6 T285,6 T300,6" />
          </svg>
        </div>

CSS

.d02-01-23 .d02-01-23-wrap{ display:inline-block; }
        .d02-01-23 .d02-01-23-h{
          font-size:24px;
          font-weight:700;
          color:#1a2333;
          margin-bottom:2px;
        }
        .d02-01-23 .d02-01-23-svg{
          width:100%;
          height:10px;
          display:block;
          overflow:visible;
          clip-path:inset(0 100% 0 0);
          transition:clip-path 1.3s cubic-bezier(.22,1,.36,1) .2s;
        }
        .d02-01-23 .d02-01-23-svg path{
          fill:none;
          stroke:#10b981;
          stroke-width:2.5;
          stroke-linecap:round;
        }
        .d02-01-23 .d02-01-23-wrap.is-in .d02-01-23-svg{
          clip-path:inset(0 0 0 0);
        }

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