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

シマーカスケード見出しセット

暗い背景の中、金色の光がh2からh4へ向かって順番に、少しずつ遅れながら常時流れ続ける演出。3レベルを1本の光が滝のように伝っていくため、受賞歴や実績紹介のような格を見せたいセクションに向く。

autocssdark

プレビュー

ソースコード

HTML

<div class="set">
          <p class="lv2">受賞歴</p>
          <p class="lv3">グッドデザイン賞</p>
          <p class="lv4">審査員コメント</p>
        </div>

CSS

.prev.d02-17-13{ background:#1c1917; }
        .d02-17-13 .set{ width:100%; display:flex; flex-direction:column; gap:16px; }
        .d02-17-13 .lv2,.d02-17-13 .lv3,.d02-17-13 .lv4{ margin:0; color:transparent; background-image:linear-gradient(100deg,#78350f 40%,#fde68a 50%,#78350f 60%); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; animation:d02-17-13-shimmer 3.6s linear infinite; }
        .d02-17-13 .lv2{ font-size:23px; font-weight:800; }
        .d02-17-13 .lv3{ font-size:18px; font-weight:700; padding-left:14px; animation-delay:.4s; }
        .d02-17-13 .lv4{ font-size:14px; font-weight:700; padding-left:28px; animation-delay:.8s; }
        @keyframes d02-17-13-shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

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