WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animação de coração explosivo clicável
55
Viiper10
Abrir no Editor
Publique Seu Código
Recomendado
25 November 2024
Site responsivo de dados de alunos
14 June 2025
Um Código de Metehan
30 May 2025
Formulário de inscrição / login
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);