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

プロンプト候補チップ表示

「要約して」などの候補チップが順番にふわっとフェードインで並ぶ演出。AIチャット入力欄の提案表示に使えます。

cssinput

プレビュー

ソースコード

HTML

<div class="d10-06-04-wrap">
          <span class="d10-06-04-chip">要約して</span>
          <span class="d10-06-04-chip">翻訳して</span>
          <span class="d10-06-04-chip">コードを書いて</span>
          <span class="d10-06-04-chip">アイデア出し</span>
        </div>

CSS

.d10-06-04 .d10-06-04-wrap{display:flex;flex-wrap:wrap;gap:8px;max-width:230px;justify-content:center}
        .d10-06-04 .d10-06-04-chip{padding:7px 14px;border-radius:999px;background:#eef2ff;color:#4338ca;font-size:12px;font-weight:600;opacity:0;transform:translateY(10px);animation:d554In 3.2s ease-in-out infinite}
        .d10-06-04 .d10-06-04-chip:nth-child(1){animation-delay:0s}
        .d10-06-04 .d10-06-04-chip:nth-child(2){animation-delay:.2s}
        .d10-06-04 .d10-06-04-chip:nth-child(3){animation-delay:.4s}
        .d10-06-04 .d10-06-04-chip:nth-child(4){animation-delay:.6s}
        @keyframes d554In{0%{opacity:0;transform:translateY(10px)}15%{opacity:1;transform:translateY(0)}85%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(10px)}}

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