Animación de corazón explosivo interactiva

1,227 Viiper10

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Animación de corazón explosivo interactiva

Recomendado

16 October 2025

Ejemplo de animación CSS: Carga y efectos de texto

3 October 2025

Fragmento de animación de carga de CSS

20 February 2026

Cargador de cubos de imágenes 3D

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cœur Explosif Géant</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

CSS

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; 
    }
}

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;
}

heartButton.addEventListener('click', handleHeartClick);