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

バー型オーディオビジュアライザー

再生中を模した10本のバーが不規則な速さで上下に揺れ続けるループ演出です。音楽・ポッドキャストページの再生中表示に使えます。

autocss

プレビュー

ソースコード

HTML

<div class="bars07-12-01">
          <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        </div>

CSS

.d07-12-01{ background:#0f172a; }
        .d07-12-01 .bars07-12-01{ display:flex; align-items:flex-end; gap:5px; height:140px; }
        .d07-12-01 .bars07-12-01 span{ width:9px; border-radius:4px 4px 0 0; background:linear-gradient(180deg,#5eead4,#0d9488); animation:bar1351wave 1.1s ease-in-out infinite; }
        .d07-12-01 .bars07-12-01 span:nth-child(1){ height:28%; animation-delay:-1.0s; }
        .d07-12-01 .bars07-12-01 span:nth-child(2){ height:55%; animation-delay:-0.8s; }
        .d07-12-01 .bars07-12-01 span:nth-child(3){ height:80%; animation-delay:-0.65s; }
        .d07-12-01 .bars07-12-01 span:nth-child(4){ height:40%; animation-delay:-0.5s; }
        .d07-12-01 .bars07-12-01 span:nth-child(5){ height:95%; animation-delay:-0.35s; }
        .d07-12-01 .bars07-12-01 span:nth-child(6){ height:60%; animation-delay:-1.05s; }
        .d07-12-01 .bars07-12-01 span:nth-child(7){ height:35%; animation-delay:-0.2s; }
        .d07-12-01 .bars07-12-01 span:nth-child(8){ height:70%; animation-delay:-0.9s; }
        .d07-12-01 .bars07-12-01 span:nth-child(9){ height:45%; animation-delay:-0.45s; }
        .d07-12-01 .bars07-12-01 span:nth-child(10){ height:85%; animation-delay:-0.1s; }
        @keyframes bar1351wave{
          0%,100%{ transform:scaleY(0.3); }
          25%{ transform:scaleY(1); }
          50%{ transform:scaleY(0.5); }
          75%{ transform:scaleY(0.9); }
        }
        @media (prefers-reduced-motion: reduce){
          .d07-12-01 .bars07-12-01 span{ animation:none; transform:scaleY(0.7); }
        }

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