パーツ番号 02-15-08 ・ CSSのみ

波線アンダーライン

見出しの下でくねくねとした波線が左から描かれていきます。WordPressの飲食・カフェ系サイトのメニュー見出しに柔らかい手描き感を加えられます。

css

プレビュー

ソースコード

HTML

<div class="d02-15-08-wrap">
          <h4 class="d02-15-08-txt">おすすめメニュー</h4>
          <svg class="d02-15-08-wave" viewBox="0 0 220 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path class="d02-15-08-path" d="M4,10 C14,2 24,18 34,10 C44,2 54,18 64,10 C74,2 84,18 94,10 C104,2 114,18 124,10 C134,2 144,18 154,10 C164,2 174,18 184,10 C194,2 204,18 214,10" fill="none"/>
          </svg>
        </div>

CSS

.d02-15-08{background:#fff}
        .d02-15-08-wrap{text-align:center}
        .d02-15-08-txt{margin:0 0 6px;font-size:22px;font-weight:800;color:#1f2937}
        .d02-15-08-wave{width:220px;height:20px}
        .d02-15-08-path{stroke:#0ea5e9;stroke-width:3;stroke-linecap:round;fill:none;stroke-dasharray:320;stroke-dashoffset:320}
        .d02-15-08.is-in .d02-15-08-path{animation:d1808draw 1.3s ease-out .2s forwards}
        @keyframes d1808draw{to{stroke-dashoffset:0}}
        @media (prefers-reduced-motion: reduce){.d02-15-08-path{animation:none!important;stroke-dashoffset:0}}

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