パーツ番号 02-17-24 ・ CSSのみ

アコーディオンラインループ見出しセット

各レベルの下線が0%と100%の間を伸縮し続ける呼吸のようなループ。h2はゆっくり、h4は速く、周期をずらして常時再生されるので、アクセス案内のように短い節が並ぶページに軽いリズムを添える。

autocss

プレビュー

ソースコード

HTML

<div class="set">
          <p class="lv2">アクセス</p>
          <p class="lv3">電車でお越しの方</p>
          <p class="lv4">駐輪場のご案内</p>
        </div>

CSS

.d02-17-24 .set{ width:100%; display:flex; flex-direction:column; gap:16px; }
        .d02-17-24 .lv2,.d02-17-24 .lv3,.d02-17-24 .lv4{ margin:0; position:relative; padding-bottom:9px; }
        .d02-17-24 .lv2::after,.d02-17-24 .lv3::after,.d02-17-24 .lv4::after{ content:""; position:absolute; left:0; bottom:0; height:2px; background:#0d9488; animation:d02-17-24-grow ease-in-out infinite alternate; }
        .d02-17-24 .lv2{ font-size:23px; font-weight:800; color:#134e4a; }
        .d02-17-24 .lv2::after{ animation-duration:3.2s; }
        .d02-17-24 .lv3{ font-size:18px; font-weight:700; color:#115e59; padding-left:14px; }
        .d02-17-24 .lv3::after{ left:14px; animation-duration:2.5s; }
        .d02-17-24 .lv4{ font-size:14px; font-weight:700; color:#64748b; padding-left:28px; }
        .d02-17-24 .lv4::after{ left:28px; animation-duration:1.9s; }
        @keyframes d02-17-24-grow{ from{ width:14%; } to{ width:96%; } }

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