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

341 ByBy.inc

Abrir en el editor Publica tu código

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

Recomendado

28 July 2025

Burbuja de mensaje HTML con diseño SVG

29 August 2024

Tienda de tarjetas de productos

7 February 2025

Un código de bachir123

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

Burbuja de mensaje HTML con diseño SVG

Tienda de tarjetas de productos

Un código de bachir123

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS