yle.height = `${diameter}px`; circle.style.left = `${event.clientX - rect.left - radius}px`; circle.style.top = `${event.clientY - rect.top - radius}px`; circle.classList.add('ripple'); const ripple = button.getElementsByClassName('ripple')[0]; if (ripple) { ripple.remove(); } button.appendChild(circle); // Remover el ripple después de la animación setTimeout(() => { circle.remove(); }, 600); } // Efecto de partículas en el fondo (opcional) document.addEventListener('mousemove', (e) => { const cursor = document.createElement('div'); cursor.style.position = 'fixed'; cursor.style.left = e.clientX + 'px'; cursor.style.top = e.clientY + 'px'; cursor.style.width = '6px'; cursor.style.height = '6px'; cursor.style.background = 'rgba(255, 255, 255, 0.8)'; cursor.style.borderRadius = '50%'; cursor.style.pointerEvents = 'none'; cursor.style.zIndex = '9999'; cursor.style.animation = 'fadeOut 1s ease-out forwards'; document.body.appendChild(cursor); setTimeout(() => { cursor.remove(); }, 1000); }); // Keyframes para fadeOut const style = document.createElement('style'); style.textContent = ` @keyframes fadeOut { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0); } } `; document.head.appendChild(style);