WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Clickable Exploding Heart Animation
46
Viiper10
Open In Editor
Publish Your Code
Recommended
28 September 2025
CSS Loading Animation: Ellipse Loader
28 February 2023
Glitch Text Animation
2 October 2025
CSS Loading Animation Snippet
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);