パーツ番号 07-12-06 ・ CSSのみ

周波数スペクトラム風カラフルバー

虹色のグラデーションで彩られた20本のバーが個別のリズムで伸縮する、周波数スペクトラム風の演出です。イベント・音楽フェスサイトの背景演出に向きます。

css

プレビュー

ソースコード

HTML

<div class="spec07-12-06">
          <span style="--c:0"></span><span style="--c:1"></span><span style="--c:2"></span><span style="--c:3"></span><span style="--c:4"></span>
          <span style="--c:5"></span><span style="--c:6"></span><span style="--c:7"></span><span style="--c:8"></span><span style="--c:9"></span>
          <span style="--c:10"></span><span style="--c:11"></span><span style="--c:12"></span><span style="--c:13"></span><span style="--c:14"></span>
          <span style="--c:15"></span><span style="--c:16"></span><span style="--c:17"></span><span style="--c:18"></span><span style="--c:19"></span>
        </div>

CSS

.d07-12-06{ background:#0a0a12; }
        .d07-12-06 .spec07-12-06{ display:flex; align-items:flex-end; gap:3px; height:150px; }
        .d07-12-06 .spec07-12-06 span{ width:8px; border-radius:3px 3px 0 0; background:hsl(calc(var(--c) * 18), 85%, 60%); animation:spec1356wave 1.3s ease-in-out infinite; animation-delay:calc(var(--c) * -0.07s); }
        @keyframes spec1356wave{
          0%,100%{ height:20%; }
          30%{ height:90%; }
          55%{ height:45%; }
          80%{ height:70%; }
        }
        @media (prefers-reduced-motion: reduce){
          .d07-12-06 .spec07-12-06 span{ animation:none; height:55%; }
        }

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