パーツ番号 05-07-07 ・ CSSのみ

バブルチャート出現演出

大小のバブルがポップしながら順に配置される。カテゴリ別ボリュームやポジショニングの図解に。

cssoverlay

プレビュー

ソースコード

HTML

<div class="d05-07-07 io-reveal">
          <div class="d05-07-07-field">
            <div class="d05-07-07-bubble" style="--x:14%;--y:70%;--s:52px;--d:.05s;background:#3b82f6">A</div>
            <div class="d05-07-07-bubble" style="--x:38%;--y:30%;--s:70px;--d:.15s;background:#10b981">B</div>
            <div class="d05-07-07-bubble" style="--x:62%;--y:62%;--s:40px;--d:.25s;background:#f59e0b">C</div>
            <div class="d05-07-07-bubble" style="--x:82%;--y:25%;--s:58px;--d:.35s;background:#ec4899">D</div>
            <div class="d05-07-07-bubble" style="--x:26%;--y:88%;--s:34px;--d:.45s;background:#8b5cf6">E</div>
            <div class="d05-07-07-bubble" style="--x:52%;--y:85%;--s:44px;--d:.55s;background:#06b6d4">F</div>
            <div class="d05-07-07-bubble" style="--x:92%;--y:75%;--s:30px;--d:.65s;background:#ef4444">G</div>
            <div class="d05-07-07-bubble" style="--x:8%;--y:22%;--s:36px;--d:.75s;background:#3b82f6">H</div>
          </div>
        </div>

CSS

.d05-07-07{width:100%}
        .d05-07-07-field{position:relative;width:100%;height:200px}
        .d05-07-07-bubble{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:600;transform:translate(-50%,-50%) scale(0);opacity:0}
        .d05-07-07.is-in .d05-07-07-bubble{animation:d05-07-07-pop .5s cubic-bezier(.34,1.56,.64,1) forwards var(--d)}
        @keyframes d05-07-07-pop{to{transform:translate(-50%,-50%) scale(1);opacity:1}}

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