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

色相ループ見出しセット

各レベルの左バーの色が、hue-rotateで常にゆっくりと変化し続ける。h2・h3・h4で変化のタイミングをずらしてあるため、3本のバーが揃わずに流れ続け、サイトマップのような一覧性の高いページに彩りを添える。

autocss

プレビュー

ソースコード

HTML

<div class="set">
          <p class="lv2">サイトマップ</p>
          <p class="lv3">サービス一覧</p>
          <p class="lv4">保守プラン</p>
        </div>

CSS

.d02-17-30 .set{ width:100%; display:flex; flex-direction:column; gap:16px; }
        .d02-17-30 .lv2,.d02-17-30 .lv3,.d02-17-30 .lv4{ margin:0; border-left-style:solid; padding-left:14px; filter:hue-rotate(0deg); animation:d02-17-30-hue 6s linear infinite; }
        .d02-17-30 .lv2{ font-size:23px; font-weight:800; color:#1f2937; border-left-width:7px; border-left-color:#4b5563; }
        .d02-17-30 .lv3{ font-size:18px; font-weight:700; color:#374151; border-left-width:4px; border-left-color:#6b7280; margin-left:14px; animation-delay:1s; }
        .d02-17-30 .lv4{ font-size:14px; font-weight:700; color:#6b7280; border-left-width:2px; border-left-color:#9ca3af; margin-left:28px; animation-delay:2s; }
        @keyframes d02-17-30-hue{ 0%{ filter:hue-rotate(0deg); } 100%{ filter:hue-rotate(360deg); } }

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