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

AI提案カードのポップアップ

「こちらもおすすめ」のカードが下からふわっとポップして提示される演出。関連提案やレコメンドの表示に使えます。

cssoverlay

プレビュー

ソースコード

HTML

<div class="d10-06-09-wrap">
          <div class="d10-06-09-card">
            <span class="d10-06-09-icon"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#d97706" stroke-width="2" stroke-linecap="round"><path d="M9 18h6M10 21h4M12 3a6 6 0 0 0-4 10.4c.6.5 1 1.3 1 2.1v.5h6v-.5c0-.8.4-1.6 1-2.1A6 6 0 0 0 12 3z"/></svg></span>
            <span>
              <p class="d10-06-09-title">こちらもおすすめ</p>
              <p class="d10-06-09-desc">「導入事例」もあわせてご覧ください</p>
            </span>
          </div>
        </div>

CSS

.d10-06-09 .d10-06-09-wrap{width:100%;max-width:230px;display:flex;align-items:flex-end;justify-content:center;min-height:88px}
        .d10-06-09 .d10-06-09-card{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:12px 14px;box-shadow:0 8px 20px rgba(0,0,0,.08);opacity:0;transform:translateY(24px);animation:d559Pop 3.6s ease-in-out infinite}
        @keyframes d559Pop{0%{opacity:0;transform:translateY(24px)}15%{opacity:1;transform:translateY(0)}80%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(24px)}}
        .d10-06-09 .d10-06-09-icon{width:26px;height:26px;border-radius:50%;background:#fef3c7;display:flex;align-items:center;justify-content:center;flex-shrink:0}
        .d10-06-09 .d10-06-09-title{margin:0 0 2px;font-size:12px;font-weight:700;color:#1f2937}
        .d10-06-09 .d10-06-09-desc{margin:0;font-size:11px;color:#6b7280;line-height:1.6}

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