x

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Sobre de Amor</title>

<style>
body{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  background:#f8c8dc;
  font-family: Arial, sans-serif;
  overflow:hidden;
}

/* CONTENEDOR */
.container{
  position:relative;
  cursor:pointer;
}

/* SOBRE */
.envelope{
  position:relative;
  width:300px;
  height:200px;
  background:#f5e6cc;
  border-radius:5px;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

/* SOLAPA */
.flap{
  position:absolute;
  width:100%;
  height:100%;
  background:#f0d9b5;
  clip-path: polygon(0 0, 100% 0, 50% 60%);
  transform-origin:top;
  transition:transform 1s ease;
}

/* CARTA */
.letter{
  position:absolute;
  width:90%;
  height:90%;
  background:white;
  top:5%;
  left:5%;
  border-radius:5px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  transform:translateY(100%);
  transition:transform 1s ease;
  text-align:center;
  padding:10px;
}

.open .flap{
  transform:rotateX(180deg);
}

.open .letter{
  transform:translateY(0);
}

h2{
  color:#d6336c;
}

p{
  color:#444;
}

/* CORAZONES */
.heart{
  position:absolute;
  font-size:20px;
  animation:floatUp 3s linear forwards;
  pointer-events:none;
}

@keyframes floatUp{
  0%{
    transform:translateY(0) scale(1);
    opacity:1;
  }
  100%{
    transform:translateY(-300px) scale(1.5);
    opacity:0;
  }
}
</style>
</head>

<body>

<div class="container" onclick="openEnvelope(event)">
  <div class="envelope">
    <div class="flap"></div>
    <div class="letter">
      <h2>Para Ti ❤️</h2>
      <p>Eres lo más bonito que llegó a mi vida.</p>
    </div>
  </div>
</div>

<script>
function openEnvelope(event){
  const container = document.querySelector('.container');
  container.classList.toggle('open');

  // Crear corazones
  for(let i=0;i<20;i++){
    createHeart(event.clientX, event.clientY);
  }
}

function createHeart(x,y){
  const heart = document.createElement("div");
  heart.classList.add("heart");
  heart.innerHTML = "❤️";

  heart.style.left = (x + (Math.random()*100 - 50)) + "px";
  heart.style.top = (y + (Math.random()*50)) + "px";
  heart.style.fontSize = (Math.random()*20 + 15) + "px";

  document.body.appendChild(heart);

  setTimeout(()=>{
    heart.remove();
  },3000);
}
</script>

</body>
</html>

Comentarios

Publicar un comentario

Entradas populares de este blog

mapa gps

Mapa con GPS Detectando calle… 🛣️ Calle ✏️ Trazar 📐 Línea ⬡ Área ⭕ Círculo 📍 Pin Color Grosor ↩️ Deshacer 🗑️ Borrar ▶️ Animar 💾 Guardar 📂 Proyectos ⬇️ Exportar ⬆️ Importar 📂 Mis Proyectos ▶ Animación de Recorrido ✕ — Selecciona una ruta — 0 m 0% — ⏮ ▶ Reproducir ⏹ Velocidad 4× 💾 Guardar Proyecto Dale un nombre a tu trazado para encontrarlo después Cancelar Guardar ⌨️ Enter o Espacio para finalizar  ·  Esc cancelar ✅ Finalizar Trazado Selecciona una herramienta para comenzar a dibujar
Leer más

No hay nada que perder

No hay nada que perder Autor: Eduardo Sebastián Dzul Cetina Verso  No hay nada que perder, mi amor, solo todo por ganar. Mi corazón ya es tuyo, mi alma te quiere amar. Verso  En tus ojos hay un brillo que me enseña dónde andar. En tus brazos me refugio, ya no me quiero soltar. Coro Para poderte amar, me sobra la vida, me alcanza este sueño que nunca termina. Para poderte amar, no ocupo riqueza, me basta contigo, me basta tu entrega. Verso  Tus labios son mi perdición, tu piel es mi paraíso. En tus besos encuentro el amor, en tus caricias cariño. Coro Para poderte amar, me sobra la vida, me alcanza este sueño que nunca termina. Para poderte amar, no ocupo riqueza, me basta contigo, me basta tu entrega. Coro  Para poderte amar, te entrego mi suerte, te entrego mis días, te entrego mi fe. Para poderte amar, cruzo cualquier frontera, porque en esta vida mi mundo eres tú. Final (desahogo) Si te quedas conmigo, nunca voy a fallar...
Leer más

No aprendí a olvidarte

   No aprendí a olvidarte Autor: Eduardo Sebastián Dzul Cetina Verso  Me dijeron que el tiempo curaba las heridas que deja el amor, pero ya se me hizo una vida y tu sombra jamás se marchó. He intentado llenar este hueco con caricias que no saben igual, y aunque jure que ya no te pienso, tu recuerdo me vuelve a ganar. Coro No aprendí a olvidarte, por más que lo intento, me duele aceptarlo, me mata por dentro. Tus besos se quedaron marcados en mi piel, y aunque busque otros labios siempre vuelvo a caer. No aprendí a olvidarte, aunque lo soñaba, la noche me grita que aún te esperaba. Mi orgullo se derrumba cada vez que pienso en ti, y es que no aprendí a olvidarte… tú sigues aquí. Verso  Dicen todos que ya me hace daño resguardarme en un viejo dolor, pero cómo arrancarte del alma si mi alma contigo quedó. He borrado tu número mil veces, y otras tantas lo vuelvo a marcar, porque aunque no contestes mis llamadas, yo te sigo queriendo igual. Coro No aprendí a olvidarte, po...
Leer más