ベルアイコン集約通知バッジ

<div class="stage09-12-10">
          <div class="bellwrap09-12-10">
            <button type="button" class="bellbtn09-12-10" aria-label="通知ベル">
              <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="#374151" stroke-width="1.8"><path d="M6 10a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6z"/><path d="M10 20a2 2 0 0 0 4 0"/></svg>
              <span class="badge09-12-10">0</span>
            </button>
            <button type="button" class="sendbtn09-12-10">+ 通知を送る</button>
          </div>
        </div>

.d09-12-10{ background:#f4f5fb; }
        .d09-12-10 .stage09-12-10{ position:absolute; inset:0; overflow:hidden; }
        .d09-12-10 .bellwrap09-12-10{ position:absolute; right:20px; top:16px; display:flex; flex-direction:column; align-items:center; gap:10px; }
        .d09-12-10 .bellbtn09-12-10{
          position:relative; width:46px; height:46px; border-radius:50%; border:none;
          background:#fff; box-shadow:0 6px 16px rgba(20,30,50,.14); cursor:default;
          display:flex; align-items:center; justify-content:center;
        }
        .d09-12-10 .bellbtn09-12-10.shake09-12-10{ animation:shake09-12-10 .5s ease; }
        @keyframes shake09-12-10{
          0%,100%{ transform:rotate(0); } 20%{ transform:rotate(-14deg); } 40%{ transform:rotate(12deg); } 60%{ transform:rotate(-8deg); } 80%{ transform:rotate(6deg); }
        }
        .d09-12-10 .badge09-12-10{
          position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px;
          border-radius:99px; background:#dc2626; color:#fff; font-size:10px; font-weight:800;
          display:flex; align-items:center; justify-content:center; transform:scale(1);
          transition:transform .25s cubic-bezier(.34,1.56,.64,1);
        }
        .d09-12-10 .badge09-12-10.pop09-12-10{ transform:scale(1.35); }
        .d09-12-10 .sendbtn09-12-10{
          border:1px dashed #c7cbe0; background:#fff; color:#4f46e5; font-size:10.5px; font-weight:700;
          padding:6px 12px; border-radius:99px; cursor:pointer;
        }
        .d09-12-10 .sendbtn09-12-10:hover{ background:#eef2ff; }
        .d09-12-10 .fly09-12-10{
          position:absolute; left:20px; top:20px; max-width:180px;
          background:#fff; border-radius:9px; padding:8px 10px; font-size:10.5px; color:#2b3444;
          box-shadow:0 8px 18px rgba(20,30,50,.16);
          transition:transform .55s cubic-bezier(.5,0,.75,0), opacity .55s ease;
        }
        .d09-12-10 .fly09-12-10.go09-12-10{ transform:translate(150px,-4px) scale(.2); opacity:0; }

(function(){
        var root = document.currentScript.closest('.item').querySelector('.d09-12-10');
        var stage = root.querySelector('.stage09-12-10');
        var bell = root.querySelector('.bellbtn09-12-10');
        var badge = root.querySelector('.badge09-12-10');
        var sendBtn = root.querySelector('.sendbtn09-12-10');
        var msgs = ['新着コメント','いいねが届きました','新しいフォロワー','メッセージが届きました'];
        var count = 0;
        var mi = 0;
        function send(){
          var el = document.createElement('div');
          el.className = 'fly09-12-10';
          el.textContent = msgs[mi % msgs.length];
          mi++;
          stage.appendChild(el);
          requestAnimationFrame(function(){
            requestAnimationFrame(function(){ el.classList.add('go09-12-10'); });
          });
          setTimeout(function(){
            if(el.parentNode){ el.parentNode.removeChild(el); }
            count++;
            badge.textContent = count > 9 ? '9+' : String(count);
            badge.classList.add('pop09-12-10');
            bell.classList.add('shake09-12-10');
            setTimeout(function(){ badge.classList.remove('pop09-12-10'); bell.classList.remove('shake09-12-10'); }, 500);
          }, 600);
        }
        sendBtn.addEventListener('click', send);
        setInterval(send, 2600);
      })();