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

担当者ふきだし紹介

アバターの横にセリフの吹き出しを表示。画面内に入るとポップと弾んで現れます(io-reveal)。問い合わせ窓口の担当者紹介に。

scrollcssoverlay

プレビュー

ソースコード

HTML

<div class="d06-03-07-wrap io-reveal">
          <div class="d06-03-07-ava">SN</div>
          <div class="d06-03-07-bubble">
            <span class="d06-03-07-role">サポート担当</span>
            <p>お困りごとは私、佐藤にお任せください！</p>
          </div>
        </div>

CSS

.d06-03-07-wrap{display:flex;align-items:center;gap:14px}
        .d06-03-07-ava{width:64px;height:64px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:20px;background:linear-gradient(135deg,#5ac8fa,#6a8dff)}
        .d06-03-07-bubble{position:relative;background:#fff;border-radius:14px;padding:12px 16px;box-shadow:0 8px 20px rgba(40,60,110,.14);transform:scale(.4);opacity:0;transition:transform .5s cubic-bezier(.2,1.4,.4,1),opacity .3s}
        .d06-03-07-wrap.is-in .d06-03-07-bubble{transform:scale(1);opacity:1}
        .d06-03-07-bubble::before{content:"";position:absolute;left:-8px;top:24px;border:8px solid transparent;border-right-color:#fff}
        .d06-03-07-role{font-size:11px;color:#6a8dff;font-weight:700}
        .d06-03-07-bubble p{margin:4px 0 0;font-size:13px;color:#3a4666;line-height:1.5}

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