Inicio
Animación de Corazón de Neón con Mensajes

Animación de Corazón de Neón con Mensajes

Esta plantilla crea una cautivadora animación de un corazón delineado con efectos de neón en movimiento. Tres trazos de colores vibrantes (rosa, azul y morado por defecto) recorren el contorno del corazón, creando un efecto de 'persecución' luminoso. Además, incorpora mensajes de texto que aparecen y se desvanecen en momentos específicos, permitiendo una personalización para expresar sentimientos o felicitaciones. Es ideal para tarjetas de San Valentín digitales, fondos de sitios web románticos, presentaciones o simplemente para añadir un toque de amor y estilo neón a cualquier proyecto web. Todos los colores, la velocidad de la animación, los mensajes y sus tiempos son fácilmente modificables.

Previsualizar

Características de la plantilla

Corazón animado con múltiples trazos de neón.
Colores de neón personalizables (rosa, azul, morado por defecto).
Efecto de brillo de neón (glow) ajustable.
Mensajes de texto con animaciones de aparición y desvanecimiento.
Contenido y temporización de los mensajes personalizables.
Animación de trazo de neón con velocidad ajustable.
Tamaño del corazón y la fuente de texto responsivos.
Fácil modificación del color de fondo.
Diseño moderno y llamativo, ideal para temas románticos o futuristas.

Tecnologías usadas

HTML5 CSS3 JavaScript SVG

Código de la Plantilla

 
                            
                                
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title>Neon Heart Chase Animation</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="heart-container">
  <svg class="heart-svg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <path id="neon-pink" class="neon-chaser"
          d="M100,30 C100,30 130,0 160,20 C190,40 190,70 160,90 L100,150 L40,90 C10,70 10,40 40,20 C70,0 100,30 100,30 Z" />
    <path id="neon-blue" class="neon-chaser"
          d="M100,30 C100,30 130,0 160,20 C190,40 190,70 160,90 L100,150 L40,90 C10,70 10,40 40,20 C70,0 100,30 100,30 Z" />
    <path id="neon-purple" class="neon-chaser"
          d="M100,30 C100,30 130,0 160,20 C190,40 190,70 160,90 L100,150 L40,90 C10,70 10,40 40,20 C70,0 100,30 100,30 Z" />
  </svg>

  
  <div id="first-message" class="text-message">Te amo</div>
  
  <div id="second-message" class="text-message">Para siempre</div>
</div>

<script src="script.js"></script>
</body>
</html>
                            
                         
 
                            
                                
body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* MODIFICAR: Color de fondo de la página */
    background-color: #221f2a;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden;
}

.heart-container {
    position: relative;
    width: clamp(250px, 60vw, 450px);
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.heart-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.neon-chaser {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* MODIFICAR: Duración de una vuelta completa de la animación (ej: 4s = 4 segundos) */
    animation: neonChase 4s linear infinite;
}

#neon-pink {
    /* MODIFICAR: Color de la primera línea de neón y su brillo */
    stroke: #ff00aa;
    filter:
            drop-shadow(0 0 3px #ff00aa)
            drop-shadow(0 0 8px #ff00aa)
            drop-shadow(0 0 15px #ff00aa);
    /* MODIFICAR: Retraso para el inicio de esta línea */
    animation-delay: 0s;
}

#neon-blue {
    /* MODIFICAR: Color de la segunda línea de neón y su brillo */
    stroke: #00ccff;
    filter:
            drop-shadow(0 0 3px #00ccff)
            drop-shadow(0 0 8px #00ccff)
            drop-shadow(0 0 15px #00ccff);
    /* MODIFICAR: Retraso para el inicio de esta línea */
    animation-delay: 1.33s;
}

#neon-purple {
    /* MODIFICAR: Color de la tercera línea de neón y su brillo */
    stroke: #be00ff;
    filter:
            drop-shadow(0 0 3px #be00ff)
            drop-shadow(0 0 8px #be00ff)
            drop-shadow(0 0 15px #be00ff);
    /* MODIFICAR: Retraso para el inicio de esta línea */
    animation-delay: 2.66s;
}


@keyframes neonChase {
    0% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: var(--path-length-negative);
    }
}

.text-message {
    position: absolute;
    left: 50%;
    top: 25%;
    transform: translateX(-50%);
    /* MODIFICAR: Color del texto */
    color: #f0f0f0;
    text-align: center;
    opacity: 0;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    font-size: clamp(1.5rem, 4vw, 2.5rem);
}

#first-message {
    /* MODIFICAR: Tiempos para el primer mensaje. Formato: [animación] [duración] [efecto] [retraso] */
    animation:
            fadeInText 2s ease-in-out 1s forwards, /* Aparece durante 2s, tras esperar 1s */
            fadeOutText 2s ease-in-out 5s forwards;/* Desaparece durante 2s, tras esperar 5s */
}

#second-message {
    /* MODIFICAR: Tiempos para el segundo mensaje */
    animation: fadeInText 2s ease-in-out 6s forwards; /* Aparece durante 2s, tras esperar 6s */
}

@keyframes fadeInText {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes fadeOutText {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
}
                            
                         
 
                            
                                
document.addEventListener('DOMContentLoaded', () => {
    const chasers = document.querySelectorAll('.neon-chaser');
    // MODIFICAR: Longitud del trozo de neón visible (número más grande = trazo más largo)
    const neonSegmentLength = 100;

    chasers.forEach(chaserPath => {
        const pathLength = chaserPath.getTotalLength();
        chaserPath.style.setProperty('--path-length', pathLength);
        chaserPath.style.setProperty('--path-length-negative', -pathLength);
        const gapLength = pathLength - neonSegmentLength;
        chaserPath.style.strokeDasharray = `${neonSegmentLength} ${gapLength}`;
    });
});
                            
                         