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

録音中の波打つ波形ライン

REC表示と共に細いバーの列が絶えず波打ち、音声を録音中であることを示す演出です。ボイスメモ機能やライブ配信の収録画面に使えます。

autocss

プレビュー

ソースコード

HTML

<div class="recbadge07-12-04"><span class="dot07-12-04"></span>REC</div>
        <div class="line07-12-04">
          <span style="animation-delay:-1.2s"></span><span style="animation-delay:-1.0s"></span><span style="animation-delay:-0.8s"></span><span style="animation-delay:-0.6s"></span>
          <span style="animation-delay:-1.1s"></span><span style="animation-delay:-0.9s"></span><span style="animation-delay:-0.7s"></span><span style="animation-delay:-0.5s"></span>
          <span style="animation-delay:-1.3s"></span><span style="animation-delay:-0.4s"></span><span style="animation-delay:-0.3s"></span><span style="animation-delay:-1.0s"></span>
          <span style="animation-delay:-0.2s"></span><span style="animation-delay:-0.8s"></span><span style="animation-delay:-0.6s"></span><span style="animation-delay:-0.1s"></span>
          <span style="animation-delay:-0.9s"></span><span style="animation-delay:-0.5s"></span><span style="animation-delay:-1.2s"></span><span style="animation-delay:-0.3s"></span>
        </div>

CSS

.d07-12-04{ background:#1a1010; flex-direction:column; gap:14px; }
        .d07-12-04 .recbadge07-12-04{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:#f87171; letter-spacing:.06em; }
        .d07-12-04 .dot07-12-04{ width:8px; height:8px; border-radius:50%; background:#ef4444; animation:dot1354pulse 1s ease-in-out infinite; }
        @keyframes dot1354pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
        .d07-12-04 .line07-12-04{ display:flex; align-items:center; gap:3px; height:64px; }
        .d07-12-04 .line07-12-04 span{ width:3px; height:22%; border-radius:2px; background:linear-gradient(180deg,#fca5a5,#ef4444); animation:line1354wave 1.6s ease-in-out infinite; }
        @keyframes line1354wave{
          0%,100%{ transform:scaleY(0.4); }
          30%{ transform:scaleY(1.2); }
          60%{ transform:scaleY(0.7); }
        }
        @media (prefers-reduced-motion: reduce){
          .d07-12-04 .dot07-12-04{ animation:none; }
          .d07-12-04 .line07-12-04 span{ animation:none; transform:scaleY(0.7); }
        }

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