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

イコライザー風波形ビジュアライザー

複数バーが音楽に合わせるように不規則に上下するループアニメーション。再生中コンテンツの演出に使えます。

autocss

プレビュー

ソースコード

HTML

<div class="eq07-06-01">
          <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        </div>

CSS

.d07-06-01{ background:#111; }
        .d07-06-01 .eq07-06-01{ display:flex; align-items:flex-end; gap:5px; height:120px; }
        .d07-06-01 .eq07-06-01 span{ width:8px; border-radius:3px 3px 0 0; background:linear-gradient(180deg,#7dd3fc,#0ea5e9); animation:eq581bar 1.1s ease-in-out infinite; }
        .d07-06-01 .eq07-06-01 span:nth-child(1){ height:30%; animation-delay:-1.0s; }
        .d07-06-01 .eq07-06-01 span:nth-child(2){ height:60%; animation-delay:-0.8s; }
        .d07-06-01 .eq07-06-01 span:nth-child(3){ height:90%; animation-delay:-0.6s; }
        .d07-06-01 .eq07-06-01 span:nth-child(4){ height:45%; animation-delay:-0.4s; }
        .d07-06-01 .eq07-06-01 span:nth-child(5){ height:75%; animation-delay:-0.2s; }
        .d07-06-01 .eq07-06-01 span:nth-child(6){ height:35%; animation-delay:-0.9s; }
        .d07-06-01 .eq07-06-01 span:nth-child(7){ height:65%; animation-delay:-0.3s; }
        .d07-06-01 .eq07-06-01 span:nth-child(8){ height:50%; animation-delay:-0.5s; }
        @keyframes eq581bar{
          0%,100%{ transform:scaleY(0.3); }
          25%{ transform:scaleY(1); }
          50%{ transform:scaleY(0.5); }
          75%{ transform:scaleY(0.85); }
        }

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