Fragmento de código de animación de corazón CSS

1,562 byby.createsite

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

Fragmento de código de animación de corazón CSS

Recomendado

23 August 2025

Página de inicio de sesión HTML: Tema Matrix con autenticación por huella digital

23 February 2024

Plantilla Gratuita de Página de Aterrizaje

18 May 2026

Formulario HTML para enviar monedas de TikTok

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}
.codigo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #272822;
  color: #F8F8F2;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 18px;
  padding: 20px;
  border-radius: 8px;
  white-space: pre-line;
  text-align: left;
  line-height: 1.6;
  max-height: 50%;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.selector       { color: #F92672; } .property       { color: #66D9EF; } .value-number   { color: #AE81FF; } .value-string   { color: #E6DB74; } .value-color    { color: #A6E22E; } .brace          { color: #F8F8F2; } .comment        { color: #75715E; } .function       { color: #A6E22E; }
.animation-container {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
  overflow: hidden;
  z-index: 1;
}
.heart {
  width: 150px;
  height: 150px;
  position: relative;
  clip-path: polygon(50% 0%, 100% 22%, 75% 88%, 25% 88%, 0% 22%);
  animation: beat 1.5s ease-in-out infinite;
}
.heart::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f04040, #ed2f2f);
  box-shadow: 0 0 20px #d40000;
  filter: blur(5px);
  animation: glitch 2s linear infinite;
}

@keyframes beat {
  0% {
    transform: scale(1.0);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.0);
    opacity: 1;
  }  
}

@keyframes glitch {
  0% {
    transform: rotate(0deg);
  }
  30% {
    filter: blur(0px);
  }
  50% {
    transform: rotate(1deg);
  }
  100% {
    filter: blur(8px);
    transform: rotate(0deg);
  }
}