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

マーカーパルス見出しセット

行頭の丸マーカーがh2は大きくゆっくり、h4は小さく速く、周期をずらしながら常時明滅を繰り返す。3つの鼓動が重ならないよう調整してあるので、お知らせ一覧の見出しに賑やかさを出しすぎない。

autocss

プレビュー

ソースコード

HTML

<div class="set">
          <p class="lv2">お知らせ</p>
          <p class="lv3">メンテナンス情報</p>
          <p class="lv4">対象サービス</p>
        </div>

CSS

.d02-17-09 .set{ width:100%; display:flex; flex-direction:column; gap:16px; }
        .d02-17-09 .lv2,.d02-17-09 .lv3,.d02-17-09 .lv4{ margin:0; display:flex; align-items:center; gap:12px; }
        .d02-17-09 .lv2::before,.d02-17-09 .lv3::before,.d02-17-09 .lv4::before{ content:""; border-radius:50%; background:#0891b2; flex:none; animation:d02-17-09-pulse ease-in-out infinite; }
        .d02-17-09 .lv2{ font-size:23px; font-weight:800; color:#164e63; }
        .d02-17-09 .lv2::before{ width:14px; height:14px; animation-duration:2.6s; }
        .d02-17-09 .lv3{ font-size:18px; font-weight:700; color:#155e75; padding-left:14px; }
        .d02-17-09 .lv3::before{ width:10px; height:10px; animation-duration:2.1s; animation-delay:.3s; }
        .d02-17-09 .lv4{ font-size:14px; font-weight:700; color:#0e7490; padding-left:28px; }
        .d02-17-09 .lv4::before{ width:6px; height:6px; animation-duration:1.6s; animation-delay:.6s; }
        @keyframes d02-17-09-pulse{ 0%,100%{ opacity:.4; transform:scale(.85); } 50%{ opacity:1; transform:scale(1.15); } }

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