Like Burst

DEMO

CODE

<div class="demo-stage"><button class="lb-btn" id="lbBtn"><span class="lb-heart">♥</span><span class="lb-count" id="lbCount">0</span></button></div>

.lb-btn { position:relative; display:flex; align-items:center; gap:.8rem; padding:1rem 2rem; background:transparent; border:2px solid #E91B89; border-radius:99px; color:#E91B89; font-size:1.5rem; cursor:pointer; transition:all .3s ease; }
.lb-btn.liked { background:#E91B89; color:#fff; }
.lb-heart { transition:transform .3s cubic-bezier(.68,-.55,.27,1.55); }
.lb-btn.liked .lb-heart { transform:scale(1.3); }
.lb-particle { position:absolute; width:10px; height:10px; background:#E91B89; border-radius:50%; pointer-events:none; opacity:0; }
@keyframes burst { 0%{opacity:1;transform:translate(0,0) scale(1)} 100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(0)} }
.lb-particle.go { animation:burst .8s ease-out forwards; }

let count = 0; const btn = document.getElementById('lbBtn'); const counter = document.getElementById('lbCount');
btn.addEventListener('click', () => { count++; counter.textContent = count; btn.classList.add('liked');
for(let i = 0; i < 8; i++){ const p = document.createElement('span'); p.className = 'lb-particle'; const angle = (Math.PI * 2 / 8) * i; const dist = 50 + Math.random() * 30; p.style.setProperty('--tx', Math.cos(angle) * dist + 'px'); p.style.setProperty('--ty', Math.sin(angle) * dist + 'px'); btn.appendChild(p); requestAnimationFrame(() => p.classList.add('go')); setTimeout(() => p.remove(), 800); } });

AI PROMPT

いいねボタンに押下時パーティクルバースト。8方向に10pxピンクドットがランダム距離飛んで.8sでフェードアウト。CSS変数--tx/--tyで方向制御、@keyframes burstで0%→100%でtranslate+scale(0)+opacity:0。ハート絵文字はcubic-bezier(.68,-.55,.27,1.55)でscale(1.3)バウンス。

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。