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

AIチャット吹き出しグラデーション枠

送信・応答中の吹き出しの枠がグラデーションで脈打つように光る演出。処理中であることを視覚的に強調できます。

clickautocssinput

プレビュー

ソースコード

HTML

<div class="d10-06-03-bubble">
          <p>ご質問にお答えしています…<br>もう少しお待ちください。</p>
        </div>

CSS

.d10-06-03 .d10-06-03-bubble{position:relative;max-width:230px;padding:16px 18px;border-radius:16px;background:#fff;font-size:12.5px;line-height:1.8;color:#374151;z-index:0}
        .d10-06-03 .d10-06-03-bubble::before{content:'';position:absolute;inset:0;border-radius:16px;padding:2px;background:linear-gradient(120deg,#6366f1,#ec4899,#f59e0b,#6366f1);background-size:300% 300%;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:d553Grad 3s linear infinite,d553Pulse 1.6s ease-in-out infinite;z-index:-1}
        @keyframes d553Grad{0%{background-position:0% 50%}100%{background-position:300% 50%}}
        @keyframes d553Pulse{0%,100%{opacity:.7}50%{opacity:1}}

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