WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animación de corazón explosivo interactiva
676
Viiper10
Abrir en el editor
Video
Publica tu código
1
Recomendado
25 August 2024
Efecto de flotar al beber refresco
5 October 2025
Estructura HTML del contenedor de animación CSS
2 July 2025
Un código de Mete
HTML
Copy
Cœur Explosif Géant
0 / 10
CSS
Copy
body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; font-family: sans-serif; overflow: hidden; } .heart-container { display: flex; flex-direction: column; align-items: center; position: relative; width: 400px; height: 400px; justify-content: center; } #click-counter { position: absolute; top: -50px; font-size: 28px; font-weight: bold; color: #333; z-index: 10; } #heart-button { background: none; border: none; cursor: pointer; padding: 0; transition: transform 0.2s ease-out; position: relative; z-index: 10; } .heart-icon { width: 400px; height: 400px; fill: #CC3A3A; transition: transform 0.2s ease-out, opacity 0.5s; transform-origin: center; } .heart-hidden { opacity: 0 !important; transform: scale(0) !important; } #particles-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .particle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; fill: #FF69B4; opacity: 0; transition: opacity 0.5s; pointer-events: none; } @keyframes explode { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(0.2); opacity: 0; } }
JS
Copy
const heartButton = document.getElementById('heart-button'); const heartIcon = document.querySelector('.heart-icon'); const clickCounterDisplay = document.getElementById('click-counter'); const particlesContainer = document.getElementById('particles-container'); let clickCount = 0; const MAX_CLICKS = 10; const INITIAL_SIZE = 400; function handleHeartClick() { if (clickCount >= MAX_CLICKS) { return; } clickCount++; clickCounterDisplay.textContent = `${clickCount} / ${MAX_CLICKS}`; const scaleFactor = 1 + (clickCount * 0.1); heartIcon.style.transform = `scale(${scaleFactor})`; if (clickCount === MAX_CLICKS) { explodeHeart(); } } function explodeHeart() { heartIcon.classList.add('heart-hidden'); heartButton.removeEventListener('click', handleHeartClick); const NUMBER_OF_PARTICLES = 1000; // Nombre de petits cœurs à faire exploser const EXPLOSION_RADIUS = 890; // Rayon de l'explosion en pixels for (let i = 0; i < NUMBER_OF_PARTICLES; i++) { const particle = createParticle(); particlesContainer.appendChild(particle); const angle = Math.random() * Math.PI * 2; const distance = Math.random() * EXPLOSION_RADIUS; const randomX = Math.cos(angle) * distance; const randomY = Math.sin(angle) * distance; particle.style.setProperty('--x', `${randomX}px`); particle.style.setProperty('--y', `${randomY}px`); const delay = Math.random() * 0.3; particle.style.animation = `explode 1.2s ease-out ${delay}s forwards`; } setTimeout(resetGame, 2000); } function createParticle() { const svgPath = heartIcon.querySelector('path').cloneNode(true); const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.setAttribute('viewBox', heartIcon.getAttribute('viewBox')); svg.setAttribute('class', 'particle'); svg.appendChild(svgPath); return svg; } function resetGame() { clickCount = 0; clickCounterDisplay.textContent = `${clickCount} / ${MAX_CLICKS}`; heartIcon.classList.remove('heart-hidden'); heartIcon.style.transform = `scale(1)`; particlesContainer.innerHTML = ''; heartButton.addEventListener('click', handleHeartClick); } heartButton.addEventListener('click', handleHeartClick);