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

1,283 byby.createsite

Abrir en el editor Publica tu código

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

Recomendado

13 October 2025

Ejemplo de código HTML del juego de la serpiente

8 February 2025

Texto deslizante

29 August 2025

Fragmento de animación de memoria CSS

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #1b1c27;
  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;
  background:transparent;
}
.heart {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: relative;
  animation: pulse 2s infinite alternate;
}
.heart::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 30px;
  height: 30px;
  background: #F92672;
  border-radius: 50%;
  transform: scale(0.5);
}
.heart::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 30px;
  height: 30px;
  background: #F92672;
  border-radius: 50%;
  transform: scale(0.5) rotate(45deg);
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}