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

AIアバターの脈動演出

円形のAIアイコンが応答中に光の輪を放つように脈打つ演出。チャットヘッダーのAIステータス表示に使えます。

autocss

プレビュー

ソースコード

HTML

<div class="d10-06-07-wrap">
          <div class="d10-06-07-ring d10-06-07-ring1"></div>
          <div class="d10-06-07-ring d10-06-07-ring2"></div>
          <div class="d10-06-07-avatar">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="#fff"><path d="M12 2a2 2 0 0 1 2 2v1.06A6 6 0 0 1 18 11v2h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1.17A6 6 0 0 1 12 22a6 6 0 0 1-5.83-4H5a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1v-2a6 6 0 0 1 4-5.66V4a2 2 0 0 1 2-2z"/></svg>
          </div>
        </div>

CSS

.d10-06-07 .d10-06-07-wrap{position:relative;width:76px;height:76px;display:flex;align-items:center;justify-content:center}
        .d10-06-07 .d10-06-07-ring{position:absolute;width:100%;height:100%;border-radius:50%;border:2px solid #818cf8;opacity:0;animation:d557Ping 2.2s ease-out infinite}
        .d10-06-07 .d10-06-07-ring2{animation-delay:1.1s}
        @keyframes d557Ping{0%{transform:scale(.5);opacity:.7}100%{transform:scale(1.3);opacity:0}}
        .d10-06-07 .d10-06-07-avatar{position:relative;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#a855f7);display:flex;align-items:center;justify-content:center;animation:d557Glow 2.2s ease-in-out infinite}
        @keyframes d557Glow{0%,100%{box-shadow:0 0 0 0 rgba(99,102,241,.4)}50%{box-shadow:0 0 18px 4px rgba(99,102,241,.5)}}

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