WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animazione cliccabile del cuore che esplode
52
Viiper10
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
30 August 2025
Cowboy Carter: codice HTML dell'album di Beyoncé
28 October 2025
Esempio di effetti di passaggio del mouse sul pulsante HTML
26 June 2025
forme magiche in crescita
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);