마이크로인터랙션

<div class="wrap"><button class="heart" id="h"><span class="ic">♥</span></button><div class="count" id="cnt">128</div></div>

.wrap{display:grid;place-items:center;gap:8px}
.heart{position:relative;width:64px;height:64px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;overflow:visible}
.ic{font-size:26px;color:var(--muted);transition:color .15s}
.heart.on .ic{color:var(--accent-2);animation:bounce .5s ease}
@keyframes bounce{0%{transform:scale(1)}40%{transform:scale(1.5)}70%{transform:scale(.9)}100%{transform:scale(1)}}
.p{position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:var(--accent-2);opacity:0}
.heart.on .p{animation:burst .6s ease-out forwards}
.count{font:700 15px/1 monospace;color:var(--fg)}

const h = document.getElementById('h');
const cnt = document.getElementById('cnt');
for (let i = 0; i < 8; i++) {
  const p = document.createElement('span');
  p.className = 'p';
  const a = (i / 8) * Math.PI * 2;
  p.style.setProperty('--dx', Math.cos(a) * 30 + 'px');
  p.style.setProperty('--dy', Math.sin(a) * 30 + 'px');
  h.appendChild(p);
}
const style = document.createElement('style');
style.textContent = '@keyframes burst{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(0)}}';
document.head.appendChild(style);
let n = 128, on = false;
setInterval(() => {
  on = !on;
  h.classList.toggle('on', on);
  n += on ? 1 : -1;
  cnt.textContent = n;
}, 1500);