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

627 ByBy.inc

Abrir en el editor Publica tu código

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

Recomendado

22 August 2025

Comentario de marcador de posición de código HTML

24 December 2023

Página de Aterrizaje de Cafetería

23 November 2025

Creación de sitios web: Obtenga presencia en línea y más clientes

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

Recomendado

Comentario de marcador de posición de código HTML

Página de Aterrizaje de Cafetería

Creación de sitios web: Obtenga presencia en línea y más clientes

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS