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

複数トラック波形比較表示

色の異なる3本のミニ波形を縦に並べ、複数トラックの音量を見比べられるようにした演出です。DAW風の編集画面やミックス比較のイメージ表示に使えます。

css

プレビュー

ソースコード

HTML

<div class="multi07-12-10">
          <div class="track07-12-10">
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
          </div>
          <div class="track07-12-10 t2_07-12-10">
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
          </div>
          <div class="track07-12-10 t3_07-12-10">
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
          </div>
        </div>

CSS

.d07-12-10{ background:#0f1420; flex-direction:column; gap:10px; }
        .d07-12-10 .multi07-12-10{ display:flex; flex-direction:column; gap:10px; width:85%; max-width:260px; }
        .d07-12-10 .track07-12-10{ display:flex; align-items:center; gap:2px; height:34px; }
        .d07-12-10 .track07-12-10 span{ flex:1; border-radius:2px; background:linear-gradient(180deg,#93c5fd,#3b82f6); animation:track1360wave 1.2s ease-in-out infinite; }
        .d07-12-10 .track07-12-10 span:nth-child(odd){ animation-delay:-0.6s; }
        .d07-12-10 .track07-12-10 span:nth-child(3n){ animation-delay:-0.3s; }
        .d07-12-10 .t2_07-12-10 span{ background:linear-gradient(180deg,#86efac,#22c55e); animation-duration:1.5s; }
        .d07-12-10 .t3_07-12-10 span{ background:linear-gradient(180deg,#fca5a5,#ef4444); animation-duration:0.95s; }
        @keyframes track1360wave{
          0%,100%{ height:20%; }
          50%{ height:100%; }
        }
        @media (prefers-reduced-motion: reduce){
          .d07-12-10 .track07-12-10 span{ animation:none; height:55%; }
        }

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