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

ネオン明滅シーケンス見出しセット

暗い背景で3レベルのネオン発光が、それぞれ違う周期で常時脈打ち続ける。周期をわずかにずらしているため完全には同期せず、バーやイベントサイトの見出しに賑やかな明滅を作り出す。

autocssdark

プレビュー

ソースコード

HTML

<div class="set">
          <p class="lv2">NIGHT EVENT</p>
          <p class="lv3">LIVE SCHEDULE</p>
          <p class="lv4">TICKET INFO</p>
        </div>

CSS

.prev.d02-17-19{ background:#0a0a12; }
        .d02-17-19 .set{ width:100%; display:flex; flex-direction:column; gap:14px; }
        .d02-17-19 .lv2,.d02-17-19 .lv3,.d02-17-19 .lv4{ margin:0; letter-spacing:.1em; color:#e9faff; animation:d02-17-19-pulse ease-in-out infinite; }
        .d02-17-19 .lv2{ font-size:26px; font-weight:800; animation-duration:2.4s; }
        .d02-17-19 .lv3{ font-size:19px; font-weight:700; padding-left:14px; animation-duration:2s; animation-delay:.4s; }
        .d02-17-19 .lv4{ font-size:14px; font-weight:700; padding-left:28px; animation-duration:1.7s; animation-delay:.8s; }
        @keyframes d02-17-19-pulse{
          0%,100%{ text-shadow:0 0 6px #67e8f9,0 0 16px #22d3ee,0 0 32px #06b6d4; }
          50%{ text-shadow:0 0 3px #67e8f9,0 0 8px #22d3ee,0 0 14px #06b6d4; }
        }

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