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

1,399 byby.createsite

Abrir en el editor Publica tu código

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

Recomendado

14 September 2024

Formulario de inicio de sesión moderno

11 February 2026

Integración del SDK de juegos de Yandex con Unity WebGL

11 September 2025

Capas de animación CSS: Alerta y alegría

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