パーツ番号 10-06-06 ・ CSSのみ

音声入力風波形アニメーション

マイクアイコンと音声波形のバーが揺れ動く入力インジケーター。音声入力対応のAIチャットUIに使えます。

cssinput

プレビュー

ソースコード

HTML

<div class="d10-06-06-wrap">
          <div class="d10-06-06-mic">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"><path d="M12 15a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3z"/><path d="M19 11a7 7 0 0 1-14 0"/><line x1="12" y1="18" x2="12" y2="22"/></svg>
          </div>
          <div class="d10-06-06-wave">
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
          </div>
        </div>

CSS

.d10-06-06 .d10-06-06-wrap{display:flex;align-items:center;gap:12px}
        .d10-06-06 .d10-06-06-mic{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#a855f7);display:flex;align-items:center;justify-content:center;flex-shrink:0}
        .d10-06-06 .d10-06-06-wave{display:flex;align-items:center;gap:3px;height:30px}
        .d10-06-06 .d10-06-06-wave span{display:inline-block;width:3px;border-radius:2px;background:#818cf8;animation:d556Wave .9s ease-in-out infinite}
        .d10-06-06 .d10-06-06-wave span:nth-child(1){height:9px;animation-delay:0s}
        .d10-06-06 .d10-06-06-wave span:nth-child(2){height:20px;animation-delay:.1s}
        .d10-06-06 .d10-06-06-wave span:nth-child(3){height:13px;animation-delay:.2s}
        .d10-06-06 .d10-06-06-wave span:nth-child(4){height:26px;animation-delay:.3s}
        .d10-06-06 .d10-06-06-wave span:nth-child(5){height:17px;animation-delay:.4s}
        .d10-06-06 .d10-06-06-wave span:nth-child(6){height:24px;animation-delay:.15s}
        .d10-06-06 .d10-06-06-wave span:nth-child(7){height:11px;animation-delay:.25s}
        .d10-06-06 .d10-06-06-wave span:nth-child(8){height:19px;animation-delay:.05s}
        @keyframes d556Wave{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

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